Grid增删改

var store=null;

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

//建立json存儲器

store=new Ext.data.JsonStore({

id:'store',

url:'userInfoCptAction.action', //資料來源

root: 'rows',

autoLoad: true,

fields:[

{name:'userId'},

{name:'username'},

{name:'password'},

{name:'age'},

{name:'mobile'},

{name:'address'}

]

});

store.load(); //加載資料

// 建立表格

var grid = new Ext.grid.GridPanel({

store: store,

sm: new Ext.grid.RowSelectionModel({singleSelect:false}),

cm: new Ext.grid.ColumnModel([

{id:'userId',header: '使用者ID', width: 85, sortable: true, dataIndex: 'userId'},

{header: '使用者昵稱', width: 95, sortable: true, dataIndex: 'username'},

{header: '密碼', width: 85, sortable: true, dataIndex: 'password'},

{header: '年齡', width: 85, sortable: true, dataIndex: 'age'},

{header: '手機号', width: 85, sortable: true, dataIndex: 'mobile'},

{header: '位址', width: 85, sortable: true, dataIndex: 'address'}

]),

stripeRows: true,

autoExpandColumn: 'userId',

height:350,

width:600,

title:'資料顯示',

bbar:[{

text:'添加',

tooltip:'新添一個使用者',

listeners :{'click':function(){

var win=Ext.getCmp('win');

win.show();

}

}

}, '-', {

text:'修改',

tooltip:'修改使用者資訊',

listeners :{'click':function(){

if(grid.getSelectionModel().hasSelection()){

var records =grid.selModel.getSelections();//得到被選擇的行的數組

var recordsLen = records.length;//得到行數組的長度

if( recordsLen>1){

Ext.Msg.alert("系統提示資訊","請選擇其中一項進行編輯！");}//一次隻給編輯一行

else{

var record=grid.getSelectionModel().getSelected();//擷取選擇的記錄集

var userId=record.get("userId");

var win=Ext.getCmp('win');

win.show();

//查詢該使用者資料

UserInfoCptDwr.selectByUserId(userId,function(msg){

DWRUtil.setValues(msg);

win.getComponent('form').getComponent('userId').setDisabled(true);

});

}

}else{

Ext.Msg.alert("提示","請先選擇要編輯的行!");

}

}

}

},'-',{

text:'删除',

tooltip:'删除一個或多個使用者',

listeners :{'click':function(){

if(grid.getSelectionModel().hasSelection()){

var records =grid.selModel.getSelections();//得到被選擇的行的數組

var recordsLen = records.length;//得到行數組的長度

var myUserId=Ext.get("myUserId").getValue();

for(var i=0;i<recordsLen;i++){

if(records[i].get("userId")===myUserId){

Ext.Msg.alert("提示","你不能删除自己！");

return;

}

}

for(var i=0;i<recordsLen;i++){

//删除該使用者

UserInfoCptDwr.deleteUserByUserId(records[i].get("userId"),function(){

store.reload();

});

}

}else{

Ext.Msg.alert("提示","請先選擇要删除的行!");

}

}}

}]

});

grid.render('grid-example');

});

Ext.onReady(function(){

Ext.QuickTips.init(); //初始化提示資訊

Ext.form.Field.prototype.msgTarget = 'side'; //提示資訊顯示位子

//建立表單

var simple = new Ext.FormPanel({

id:'form',

labelWidth: 75,

width:300,

defaults: {width: 150},

defaultType: 'textfield',//預設字段類型

//定義表單元素

items: [{

fieldLabel: '使用者ID',

id:'userId',

name: 'userId',//元素名

allowBlank:false, //不允許為空

listeners :{'blur':function(){

var userId=$("userId").value;

//判斷是否存在該使用者ID

UserInfoCptDwr.ifExistTheUserId(userId,function(msg){

if(msg===false){

Ext.getCmp('userId').markInvalid("此使用者ID已經被占用！");

}

});

}

}

},{

inputType:'password',

fieldLabel: '密碼',

name: 'password',

allowBlank:false

},{

fieldLabel: '使用者昵稱',

id:'username',

name: 'username',//元素名

allowBlank:false , //不允許為空

listeners:{'blur':function(){

var username=$("username").value;

//判斷該使用者昵稱是否存在

UserInfoCptDwr.ifExistTheUserName(username,function(msg){

if(msg===false){

Ext.getCmp('username').markInvalid("此昵稱已經被占用！");

}

});

}

}

},{

fieldLabel: '使用者年齡',

name: 'age',

regex :new RegExp('^[0-9]+$'),

regexText :'你輸入的年齡不正确'

},{

fieldLabel: '手機号',

name: 'mobile',

regex :new RegExp('^[0-9]{11}$'),

regexText :'你輸入的手機号不正确'

},{

fieldLabel: '位址',

name: 'address'

}

],

buttons: [{

text: '執行',

type: 'submit',

handler:function(){

if(simple.form.isValid()){

var cpt={userId:null,username:null,password:null,age:null,mobile:null,address:null};

DWRUtil.getValues(cpt);

//儲存或更新表單

UserInfoCptDwr.saveOrUpdate(cpt,function(msg){

if(msg===true){

Ext.Msg.alert("系統提示！","執行成功！");

simple.form.reset();

store.reload();

}else{

Ext.Msg.alert("警告！","無法執行該操作！");

}

});

}

}

},{

text: '重置',

handler:function(){

simple.form.reset(); //重置表單

}

}]

});

//建立視窗

new Ext.Window({

id:"win",

x:500,

closeAction:'hide',

plain: true,

height:220,

width :320,

autoScroll :true,

draggable :true,

items:Ext.getCmp('form'),

listeners:{'hide':function(){

Ext.getCmp('form').form.reset();

Ext.getCmp('form').getComponent('userId').enable();

}

}

});

});