ExtJs 与后台交互实例

继前连天的列子，丰富了一下，加上与后台Struts2的交互

Ext.namespace("Ext.qiuji")
/*模块化*/
/**
 * 人员信息展示panel
 */
//人员信息初始化的 Action访问后台数据
PERSONDATA_URL = "findAllInfo";
Ext.qiuji.PersonViewGridPanel = Ext.extend(Ext.grid.GridPanel,{
 inserPersonInfoWin:null,
 updatePersonInfoWin:null,
 constructor:function(){
  this.inserPersonInfoWin = new Ext.qiuji.InsertPersonInfoWinow();
  this.updatePersonInfoWin = new Ext.qiuji.UpdatePersonInfoWindow();
  Ext.qiuji.PersonViewGridPanel.superclass.constructor.call(this,{
    title:"人员信息",
    darggble:true,
    width:350,
    autoHeight:true,
    tbar:[{
      text:"添加人员",
      handler:function(){
       this.inserPersonInfoWin.show();
      },
      scope:this
     },"-",{
      text:"修改人员",
      handler:function(){
       this.updatePersonInfoWin.show();
       try{
        this.updatePersonInfoWin.loadInfo(this.getSelected());
       }
       catch(_error){
        Ext.Msg.alert("系统提示",_error.description);
        this.updatePersonInfoWin.close();
       }
      },
      scope:this
     },"-",{
      text:"删除人员",
      handler:function(){
       Ext.Msg.confirm("删除提示","确定要删除该条记录吗？",this.removePersonInfo,this);
      },
      scope:this
     }],
    renderTo:Ext.getBody(),
    colModel:new Ext.grid.ColumnModel([
            {
             header:"姓名",
             align:"center",
             dataIndex:"name",
             sortable:true
            },
            {
             header:"年龄",
             dataIndex:"age",
             menuDisabled:true,
             sortable:true
            },
            {
             dataIndex:"sex",
             header:"性别"
            }
    ]),
    enableColumnMove:true,
    selModel:new Ext.grid.RowSelectionModel(
      {
       singleSelect:true,
       listeners:{
        //将选中事件传递给gridPanel
        "rowselect":function(_sel,_index,_record){
         this.fireEvent("rowselect",_record);
        },/*{
         fn:function(_sel,_index,_record){
          //引发gridPanel的 rowselect事件
          this.fireEvent("rowselect",_record);
         },
         scope:this
        }*/
        scope:this
       }
       
      }),
    store: new Ext.data.Store({
     autoLoad:true,
     //数据代理，访问extStore Action 获得数据
     proxy:new Ext.data.HttpProxy({url:PERSONDATA_URL}),
     //数据解析器，使用XMLReader解析
     reader:new Ext.data.JsonReader({},new Ext.data.Record.create(["id","name",{name:"age",type:"int"},"sex"]))
    })
  });
  this.addEvents("rowselect");
  //添加人员form中自定义 submit事件
  this.inserPersonInfoWin.on("submit",this.insertPersonInfoWinSubmit,this);
  this.updatePersonInfoWin.on("submit",this.updatePersionInfoWinSubmit,this);
 },
 //插入记录
 insertRecord:function(_record){
  this.getStore().add(_record);
 },
 //修改记录
 updateRecord:function(_record){
  try{
   var  _sm = this.getSelected();
   var _data = _sm.data;
   for(var _i in _data){
    //此行记录的id不用被修改，保持不变
    if(_i!="id"){
     _sm.set(_i,_record.get(_i));
    }
   }
   _sm.commit();
  }catch(_error){
   Ext.Msg.alert("系统提示",_error);
  }
 },
 //添加人员提交方法
 insertPersonInfoWinSubmit:function(_win,_record){
  this.insertRecord(_record);
 },
 //修改人员信息提交方法
 updatePersionInfoWinSubmit:function(_win,_record){
  this.updateRecord(_record);
 },
 //移除一条记录
 removeRecord:function(){
  try{
   Ext.Ajax.request({
    url:"deleteInfo",
    params:{id:this.getSelected().get("id")}
   });
   this.getStore().remove(this.getSelected());
  }catch(_error){
   Ext.Msg.alert("系统提示",_error.description);
  }
 },
 //得到选中的record
 getSelected:function(){
  var _recordOfSelected = this.getSelectionModel().getSelected();
  if(_recordOfSelected == null){
   throw Error("未选择记录，请选择！");
  }
  return _recordOfSelected;
 },
 //“删除人员”菜单调用的方法
 removePersonInfo:function(_btn){
  if(_btn == "yes"){
   this.removeRecord();
  }
 }
});
/**
*添加 或修改人员 弹出层
*/
Ext.qiuji.PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel,{
 //构造参数
   constructor:function(){
    //调用父类构造参数
    Ext.qiuji.PersonInfoFormPanel.superclass.constructor.call(this,{
     frame:true,
     baseCls:"x-plain",
     labelWidth:45,
     defaultType:"textfield",
     defaults:{anchor:"98%"},
     items:[
      {
       fieldLabel:"姓名",
       name:"name"
      },{
       xtype:"combo",
       fieldLabel:"性别",
       displayField:"sex",
       editable:false,
       hiddenName:"sex",
       value:"男",
       mode:"local",
       triggerAction:"all",
       store:new Ext.data.ArrayStore({
        fields:["sex"],
        data:[["男"],["女"]]
       })
      },{
       fieldLabel:"年龄",
       name:"age",
       //此文本框的内容格式
       vtype:"age"
      }
     ]
    });
   },
   //提供对外的方法 获取表单信息
 getValues:function(){
  if(this.getForm().isValid()){
   return new Ext.data.Record(this.getForm().getValues());
  }
  else{
   throw Error("年龄格式填写不正确");
  }
 },
 //设置表单信息
 setValues:function(_record){
  this.getForm().loadRecord(_record);
 },
 //重置表单
 reset:function(){
  this.getForm().reset();
 }
 });
 /**
  *  formPanel的载体  window
  */
Ext.qiuji.PersonInfoWinow = Ext.extend(Ext.Window,{
 form:null,
 url:null,
 params:null,
 //构造参数
 constructor:function(){
  this.form = new Ext.qiuji.PersonInfoFormPanel();
  Ext.qiuji.PersonInfoWinow.superclass.constructor.call(this,{
   plain:true,
   modal:true,
   items:this.form,
   width:300,
   closeAction:"hide",
   buttons:[{
    text:"确定",
    handler:this.onsubmit,
    scope:this
   },{
    text:"取消",
    handler:this.onCancelClick,
    scope:this
   }]
  });
  //添加自定义事件
  this.addEvents("submit");
 },
 //重写close方法
 close:function(){
  this.form.reset();
  this.hide();
 },
 onFormSubmit:function(_form,_action){
  //错误的捕捉
  try{
   this.fireEvent("submit",this,new Ext.data.Record(_form.getValues()));
  }
  catch(_err){
   return;
  }
  this.close();
 },
 onCancelClick:function(){
  this.close();
 },
 //点击确定时执行的方法
 onsubmit:function(){
  //form提交，将会引发form中的submit事件
  this.form.getForm().submit({url:this.url,params:this.params, success:this.onFormSubmit,waitTitle:"提交",waitMsg:"提交数据中，请稍等......",scope:this});
 }
});
/**
 * 添加人员window 继承于 公共window
 */
Ext.qiuji.InsertPersonInfoWinow = Ext.extend(Ext.qiuji.PersonInfoWinow,{
 title:"添加人员",
 url:"insertInfo",
 //重写方法
  onFormSubmit:function(_form,_action){
  //错误的捕捉
  try{
   var record = new Ext.data.Record(_form.getValues());
   record.data["id"] = _action.result.id;//等效于  var _data = record.data; _Ext.apply(_data,{id:_action.result.id});
   this.fireEvent("submit",this,record);
  }catch(_err){
   return;
  }
  this.close();
 }
});
/**
 * 修改人员window 同样继承于公共window
 *  
 */
Ext.qiuji.UpdatePersonInfoWindow = Ext.extend(Ext.qiuji.PersonInfoWinow,{
 title:"修改人员",
 url:"updateInfo",
 loadInfo:function(_record){
  this.form.setValues(_record);
  var _id = _record.get("id");
  this.params = {id:_id};
 }
});