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