extjs组建化编程（EditorGridPanel）

// JavaScript Document
//EditorGridPanel实现单元格选中
MoneyGrildPanel=Ext.extend(Ext.grid.EditorGridPanel,{
   typeCnb:null,
  
   inserted:[],
   //定义conn对象
   conn:new Ext.data.Connection(),
  
      constructor:function(){
    this.typeCnb= new Ext.form.ComboBox({
                                 triggerAction:'all',
               mode:"local",
         value:"全部",
               displayField:"type",
         listeners:{
          select:{
               fn:this.onViewTypeSelect,
            scope:this
          }
         },
               store:new Ext.data.SimpleStore({
                    data:["收入","支出","全部"],
                 expandData:true,
                          fields:["type"]
                    })
                                 });
   
  MoneyGrildPanel.superclass.constructor.call(this,{
       renderTo:Ext.getBody(),
    width:300,
    //给表格设置行选中
    sm:new Ext.grid.RowSelectionModel({
      //确定单选
      singleSelect:true 
    }),
    height:400,
    tbar:[{text:"保存",
          handler:this.onSaveButtonClick,
       scope:this
       },"-",{
      text:"添加",
          handler:this.onInsertButtonClick,
       scope:this 
       },"-",{
       text:"删除",
          handler:this.onRemoveButtonClick,
       scope:this  
      },"-","查看方式",this.typeCnb],
    store:new Ext.data.SimpleStore({
       autoLoad:true,
       url:"http://localhost/ExtJSTest/server/app/test/18/list.asp",
       fields:["id","type",{name:"money",type:"int"}]
    }) ,
    columns:[{
       header:"类型",
       dataIndex:"type",
       editor: new Ext.form.ComboBox({
                        triggerAction: 'all',
      mode:"local",
      displayField:"type",
      store:new Ext.data.SimpleStore({
          data:["收入","支出"],
       expandData:true,
                fields:["type"]
      })
                    })
     },{
       header:"金额",
       dataIndex:"money",
       editor:new Ext.form.NumberField({
           maxValue:10000,
        minValue:1
       })
       }]
    });
    /* 测试 conn等同于Ext.Ajax*/
    /*
   Ext.Ajax.on("requestcomplete", function(_conn,_response,_options){
                                          //_response.responseText 获取json数据
            //_response.responseXML.xml 回去xml的数据
                                         alert(_response.responseText);
              });
    */
   },

   //select 的时候触发事件
   onViewTypeSelect:function(_combo){
    var _type=_combo.getValue();
    if(_type == "全部")
      //_type== 全部 就把全部的信息显示给用户
         this.getStore().clearFilter();
   
    else
   // alert('sss');
    //fitler 方法会过滤Store中相同的值显示给用户
    this.getStore().filter("type",_combo.getValue());
      // alert(_combo.getValue());
   },
   onSaveButtonClick:function(){
  //modified 保存了 Store 中被修改的行
  var _n=this.getStore().modified;
  
  var _temp=[];
  
  for(var _i=0 ;_i<_n.length;_i++)
  {
     if(_n.get("id")=="")
     {
      continue;
     }
     var _data={};
    
     var _j="";
    
     for(_j in _n[_i].modified)
        _data[_j]=_n[_i].get(_j);
     //_n[_i].modified（修改过的值）把修改过的值放在_temp里
     //Ext.apply({},_n[_i].modified) 把修改的值复制下
     //{id:_n[_i].get("id")} 获取数据库的id值
     //Ext.apply(Ext.apply({},_n[_i].modified),{id:_n[_i].get("id")}) 早把id也复制进去
     //_temp.push(Ext.apply(Ext.apply({},_n[_i].modified),{id:_n[_i].get("id")}));//获取没该的值
     _temp.push(Ext.apply(_data,{id:_n[_i].get("id")}));
     }
  
  for(var _i=0;I<this.inserted.length;_i++)
  {
   //把添加的值给_temp
     _temp.push(this.inserted[_i].data);
    // alert(Ext.util.JSON.encode(_temp));

    
     }
  /* conn等同于Ext.Ajax*///任何Ajax请求发送之前触发
     conn.on("requestcomplete",this.onSaveInsertData,this);
  //提交到数据库 conn等同于Ext.Ajax
  conn.request({url:"http://localhost/ExtJSTest/server/app/test/18/post.asp",
       params:{content:Ext.util.JSON.encode(_temp)}});
  alert(Ext.util.JSON.encode(_temp));
  //var _store=this.getStore();
  //commitChanges回去把修改过的信息进行保存
  this.getStore().commitChanges(); 
  this.onViewTypeSelect(this.typeCnb);
   },
   //添加行
   onInsertButtonClick:function(){
    //添加行初始值
    var _rs=new Ext.data.Record({
         id:"",
         type:"",
         money:0
          });
   
    this.getStore().add(_rs);
    //添加行的时候提示用户保存
    _rs.set("type","收入");
    _rs.set("money",1);
     //指定输入地方  this.getStore().getCount-1 表示表单最后一行
    this.startEditing(this.getStore().getCount-1,0);
    //把——rs的Record放到inserted中
    this.inserted.push(_rs);
   },
  
   //能确保新添加的行也能修改
   onSaveInsertData:function(_conn,response){
    //添加的_xml信息
    var _xml=_response.responseXML;
    //alert(_xml);
    var _root=_xml.documentElement;
    //alert(_root);
    for(var _i=0;_i<_root.childNodes.length;i++)
    {
    // alert(_root.childNodes[_i].getText());
     this.inserted[_i].set("id",_root.childNodes[_i].text);
    }
    //提交
    this.getStore().commitChanges();
   
    this.inserted[];
   },
   //删除
   onRemoveButtonClick:function()
   {
    //获取选中的行
   var _sm=this.getSelectionModel();
   try{
         if(_sm.getCount() == 0)
         {
         throw Error("尚未选定行");
         }
      Ext.Msg.confirm("系统询问","你是否确认删除此记录？",this.onRemoveQuestion,this)
        
    }catch(_err){
       Ext.msg.alert("系统提示",_err.description)
    }
   },
   //删除
   onRemoveQuestion:function(_btn){
     if(_btn=="yes"){
      var _rs=this.getSelectionModel().getSelected();
      //删除
     this.getStore().remove(_rs);
       if(_rs.get("id") != ""){
          this.conn.request({url:"http://localhost/ExtJSTest/server/app/test/18/delete.asp",params:{id:_rs.get("id")}});
       /* conn等同于Ext.Ajax*///任何Ajax请求发送之前触发
           conn.on("requestcomplete",this.onSaveInsertData,this);
    }
    else{
    //用户在没有点击保存的情况下删除
          this.inserted.remove(_rs);
    this.getStore().modifed.remove(_rs);
    }
     }
   }
});