Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法

hehffyy 2011-05-26

展开全文

<HTML>  
 <HEAD>  
  <TITLE>可编辑表格面板EditorGridPanel</TITLE>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <link rel="stylesheet" type="text/css" href="extjs2.0/resources/css/ext-all.css" mce_href="extjs2.0/resources/css/ext-all.css" />  
  <mce:script type="text/javascript" src="extjs2.0/adapter/ext/ext-base.js" mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script>  
  <mce:script type="text/javascript" src="extjs2.0/ext-all.js" mce_src="extjs2.0/ext-all.js"></mce:script>  
  <mce:script type="text/javascript" src="extjs2.0/source/locale/ext-lang-zh_CN.js" mce_src="extjs2.0/source/locale/ext-lang-zh_CN.js"></mce:script>  
  <mce:script type="text/javascript"><!--  
 Ext.onReady(function(){  
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';  
  Ext.QuickTips.init();  
  Ext.form.Field.prototype.msgTarget = 'qtip';  
  //创建表格数据  
  var data = [  
   [1,'张三','男',new Date(1979,09,13),29,'zhang@abc.com'],  
   [2,'李四','女',new Date(1978,10,01),30,'li@abc.com'],  
   [3,'王五','男',new Date(1981,01,01),27,'wang@abc.com']  
  ];  
  //创建记录类型Person，mapping值为字段值对应数组中数据的索引位置  
  var Person = Ext.data.Record.create([  
   {name: 'personId',mapping: 0},  
   {name: 'personName',mapping: 1},  
   {name: 'personSex',mapping: 2},  
   {name: 'personBirthday',mapping: 3},  
   {name: 'personAge',mapping: 4},  
   {name: 'personEmail',mapping: 5}  
  ]);  
  var dataStore=new Ext.data.Store({//配置数据集  
    reader: new Ext.data.ArrayReader({id:0},Person),  
    data: data  
   });  
  //创建Grid表格组件  
  var grid = new Ext.grid.EditorGridPanel({  
   title : 'Ext.grid.EditorGridPanel',  
   applyTo : 'grid-div',  
   width:430,  
   height:280,  
   frame:true,  
   clicksToEdit:2,  
   store: dataStore,  
   //方式一：对所有修改结果集中式提交  
   tbar:[{  
    text:'提交修改',  
    handler:function(){  
     var mr=dataStore.getModifiedRecords();//获取所有更新过的记录  
     var recordCount=dataStore.getCount();//获取数据集中记录的数量  
     if(mr.length==0){  // 确认修改记录数量  
       alert("没有修改数据！");  
       return false;  
     }  
       
     var recordModStr="[";//这里以josn方式保存  
     for(var i=0;i<mr.length;i++){  
      alert("orginValue:"mr[i].modified["personEmail"]+",value:"+mr[i].data["personSex"]);//此处cell是否发生  
                                             //更改可用mr[i].dirty来判断  
      recordModStr+="{personName:"+mr[i].data["personName"]+",personSex:"+mr[i].data["personSex"]+",personBirthday:"  
           +mr[i].data["personBirthday"]+",personAge:"+mr[i].data["personAge"]+",personEmail:"+mr[i].data["personEmail"]+"}";  
       if(i<mr.length-1)  
                recordModStr+=",";  
     }  
     recordModStr+="]";  
     alert(recordModStr);  
     //向后台提交请求 Ext.Ajax.request(requestCofig);//将recordModStr传入  
   }  
   }],  
   columns: [//配置表格列  
    {header: "id", width: 40, dataIndex: 'personId'},  
    {header: "姓名", width: 70, dataIndex: 'personName',  
     editor:new Ext.form.TextField({  
      allowBlank : false  
     })  
    },  
    {header: "性别", width: 40, dataIndex: 'personSex',  
     editor:new Ext.form.ComboBox({  
      editable : false,  
      displayField:'sex',  
      mode: 'local',  
      triggerAction: 'all',  
      store:new Ext.data.SimpleStore({  
       fields: ['sex'],  
       data : [['男'],['女']]  
      })  
     })  
    },  
    {header: "生日", width: 100, dataIndex: 'personBirthday',  
     editor:new Ext.form.DateField(),  
     renderer:Ext.util.Format.dateRenderer('Y年m月d日')  
    },  
    {header: "年龄", width: 40, dataIndex: 'personAge',  
     editor:new Ext.form.NumberField(),renderer:isEdit  
    },  
    {header: "电子邮件", width: 120, dataIndex: 'personEmail',  
     editor:new Ext.form.TextField({  
      vtype:'email'  
     })  
    }  
   ]  
  })  
  //方式二：对修改结果实时提交，这里对年龄实时提交  
  function isEdit(value,record){  
    //向后台提交请求  
   return value;  
  }  
function afterEdit(obj){    //每次更改后，触发一次该事件  
          alert("orginalValue:"+obj.originalValue+",value:"+obj.value);  
      }  
     grid.on("afteredit", afterEdit, grid);  
 });  
    
// --></mce:script>  
 </HEAD>  
 <BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;">  
 <div id='grid-div'></div>  
 </BODY>  
</HTML>  