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