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();
}
}
});
});