<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> 注:此例基本代码参考《ExtJS web应用程序开发指南》中代码17-7