Extjs二维数组,控制editorgrid动态添加行,批量保存

今天按照设计文档 用extjs做了个页面 看起来很丑，但是功能还是挺全的（比如，动态的添加行，联动grid，批量保存）,由于数据表结构并未出来，所以做得并不完善，但是主要的核心代码已经出来了，日后必定补全，之所以今天写下来 只是为了提醒自己一个困扰多时的问题，

一个二维数组用alert输出来 是一个多个一维数组里的元素连接起来的，看起来是个一维数组，但实际上不是，不要被你的眼睛蒙蔽了

 

一维数组的格式:["1111","1111"]  ==>用alert输出:  1111,1111

二维数组格式：[["1111","1111"],["2222","2222"]  ]===>输出  1111,1111,2222,2222

 

===>实际上是个由两个一维数组组成的二维数组，在firebug 里面也是可以看出二维数组的结构的

 

 

Ext.onReady(function(){
Ext.namespace("car.system.insure");
var oneStore=new Ext.data.JsonStore({
          url : 'qj/qqa.action',
   root : 'data',
   totalProperty : 'totalCount',
   fields : [{
      name : 'ABCID',
      type : 'string'
     },{
      name : 'ABC',
      type : 'string'
     }]
   
  });
oneStore.on("load",function(sto,recd){
     var recd = new Ext.data.Record({ABC:""});//加载完store后，在后面添加一个空行
       sto.add(recd);
       sto.commitChanges();
});
oneStore.load();
car.system.insure.twoStore=new Ext.data.JsonStore({
          url : 'qj/qqa1.action',
   root : 'data',
   totalProperty : 'totalCount',
   fields : [{
      name : 'ABDID',
      type : 'string'
     },{
      name : 'ABDNAME',//参数名称
      type : 'string'
     },{
      name : 'ABDVALUE',//参数值
      type : 'string'
     },{
      name : 'ABDTEXT',//备注
      type : 'string'
     }]
   
  });
//参数设置beforeload
car.system.insure.twoStore.on("beforeload",function(sto,obj){
   sto.baseParams.proc="";//请求的参数，自己设置
   sto.baseParams.id="";

});
//在最后一行加上空行
car.system.insure.twoStore.on("load",function(sto,recd){
   var recd = new Ext.data.Record({ABDID:"",ABDNAME:"",ABDVALUE:"",ABDTEXT:""});//在第二个grid中，加载完store后，在后面添加一个空行
    sto.add(recd);
    sto.commitChanges();
});
 car.system.insure.rd=false;//标记 true:表示最后一行不是空行，需要添加空行，否则不加空行
 var sm=new　Ext.grid.CheckboxSelectionModel({　
   checkOnly:　true,
   singleSelect:true,
   listeners:{
     rowselect:function(obj,rowindex,record){
      car.system.insure.twoStore.load();//选择左边的grid时，加载中间的grid中的store
     
    }
  }
});
// car.system.insure.twoStore.load();
  var windw=new Ext.Window ({
    xtype:"window",
 title:"测试窗口",
 width:700,
 height:400,
 layout:"column",
    items:[{
    xtype:"editorgrid",
    title:"保险到期提醒设置",
    columnWidth:0.25,
    store:oneStore,
    id:"carinsure1",
    autoHeight:true,
    sm:sm,
    clicksToEdit:1,
    loadMask:true,
    //closable:true,
    autoScroll:true,
    columns:[
      sm,
     {
      header:"保险到期提醒",
      sortable:true,
      resizable:true,
      width:160,
         autoHeight:true,
      dataIndex:"ABC",
      editor: new Ext.form.TextField({
        allowBlank: false,
        id:"abcc",
        selectOnFocus: false,
        maxLength: 150,
        enableKeyEvents: false,
        listeners: {
        change: {
         scope:this,
         fn:function(item, newValue, oldValue){
         //alert("change");
         var editor = item.gridEditor;
         var row = editor.row;//当前编辑的行
         var col = editor.col;
         var record = editor.record;
         var store1=Ext.getCmp("carinsure1").getStore();
         var count1=store1.getCount()*1-1;
         if(row==count1&& newValue)//当编辑的当前行等于store的总数，并且当前输入的值不为空，就将rd设为true,以便控制添加空行
         {
           car.system.insure.rd=true;
         }
          }
         },
         blur:function(obj){
           store= Ext.getCmp("carinsure1").getStore();
          var count=store.getCount();//得到总行数
          var j=count*1-1;
          var abc=store.getAt(j).get("ABC");//得到最后一行的的artiid
                                     if(car.system.insure.rd)//当最后一行不是空行时，添加一行，否则不做操作
           {
            var rrd = new Ext.data.Record({ABCID:"",ABC:""});
                store.add(rrd);
                store.commitChanges();
                car.system.insure.rd=false;
                Ext.getCmp("carinsure1").startEditing(count,1);//回车后 获得焦点
           }
         },
         specialkey: function(obj, e){
          if (e.getKey() == e.ENTER) {
          e.keyCode = Ext.EventObject.TAB;//当按住 tab键和Enter时，切换焦点
         }
        // obj.begin
        }
        
        }
      })
     }
    ]},{
    xtype:"tbspacer",
    width:20
   },
            {
    xtype:"editorgrid",
    title:"保险到期提醒参数设置",
    columnWidth:0.6,
    store:car.system.insure.twoStore,
    autoHeight:300,
    clicksToEdit:1,
    loadMask:true,
    autoScroll:true,
    id:"twoStorepanel",
    columns:[
     {
      header:"参数名称",
      sortable:true,
      resizable:true,
      width:150,
      dataIndex:"ABDNAME",
      editor: new Ext.form.TextField({
        allowBlank: false,
        id:"b1",
        selectOnFocus: true,
        maxLength: 150,
        listeners: {
          specialkey: function(obj, e){
         if (e.getKey() == e.ENTER) {
          e.keyCode = Ext.EventObject.TAB;
         }
        },
        change: {
         scope:this,
         fn:function(item, newValue, oldValue){
         var editor = item.gridEditor;
        /* var row = editor.row;
         var col = editor.col;*/
         var record = editor.record;
         record.set("ABDNAME",newValue);
         //record.commit();
                                   // car.system.insure.twoStore.commitChanges();
          }
         }
       }
      })
     },
                {
      header:"参数值",
      sortable:true,
      resizable:true,
      width:80,
      dataIndex:"ABDVALUE",
      editor: new Ext.form.TextField({
        allowBlank: false,
        id:"c1",
        selectOnFocus: true,
        maxLength: 150,
        enableKeyEvents: false,
        listeners: {
          specialkey: function(obj, e){
         if (e.getKey() == e.ENTER) {
          e.keyCode = Ext.EventObject.TAB;
         }
        }
         }
      })
     },
                {
      header:"备注",
      sortable:true,
      resizable:true,
      width:200,
      dataIndex:"ABDTEXT",
      editor: new Ext.form.TextField({
        allowBlank: false,
        id:"d1",
        selectOnFocus: true,
        maxLength: 150,
        enableKeyEvents: false,
        listeners: {
          specialkey: function(obj, e){
         if (e.getKey() == e.ENTER) {
          e.keyCode = Ext.EventObject.TAB;
         }
        var store = Ext.getCmp("twoStorepanel").getStore();
        var count=store.getCount();//得到总行数
        var j=count*1-1;
        var abdname=store.getAt(j).get("ABDNAME");//得到最后一行的的artiid
           if(abdname.length>0)//当最后一行不是空行时，添加一行，否则不做操作
        {
          var record = new Ext.data.Record({ABDID:"",ABDNAME:"",ABDVALUE:"",ABDTEXT:""});
          store.add(record);
         }
        }
       /** ,
        change: {
         scope:this,
         fn:function(item, newValue, oldValue){
         var editor = item.gridEditor;
         var row = editor.row;
         var col = editor.col;
         var record = editor.record;
         
                                    
          }
         }*/
       }
      })
     }          
    ]},
               {
    xtype:"panel",
    title:"操作",
    columnWidth:0.15,
    autoHeight:true,
    layout:"table",
    frame:true,
    defaults: {
           // applied to each contained panel
           bodyStyle:'padding:20px'
       },
       layoutConfig: {
           // The total column count must be specified here
           columns: 1
       },
    items:[
     {
       xtype:"button",
       width:50,
       height:20,
       text:"保存",
       handler:function(){
         //选择的是哪个
         var sels=Ext.getCmp("carinsure1").getSelectionModel();
         var abcid;
         var jsonData = [];
         if(sels.hasSelection())
         {
         
            abcid=sels.getSelections()[0].get("ABCID");//得到编号
            var records=car.system.insure.twoStore.getModifiedRecords();
            //var recordstore=car.system.insure.twoStore;
            for(var i=0;i<records.length;i++)
            {
               var item =new Array();
               item.push(records[i].get("ABDID"));
               item.push(records[i].get("ABDNAME"));
               item.push(records[i].get("ABDVALUE"));
               item.push(records[i].get("ABDTEXT"));
               jsonData.push(item);//将修改的记录保存在二维数组jsonData中
            }
            Ext.Msg.alert("jsonData",jsonData);//输出二维数组，但是结构你会看到是一维数组的格式，实际上不是，不要被双眼蒙蔽了
            //alert("arraydata:"+arraydata.size());
         /*   for(var j=0;j<jsonData.size();j++)//验证jsonData到底是不是二维数组，结果是
            {
               var arr1=jsonData[j];
               for(var i=0;i<arr1.size();i++)
               {
                  alert("arr"+i+":"+arr1[i]);
               }
            }*/
         }
         else
         {
            Ext.Msg.alert("提示","请选择要设置的保险提醒");
            return;
         }
       }
     },
     {
       xtype:"tbspacer",
       height:20
     },
     {
       xtype:"button",
       width:50,
       height:20,
       text:"取消"
     }
    ]}
  ]
  }).show();
});