爱华网<HEAD>
<TITLE>可编辑表格面板EditorGridPanel</TITLE>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<linkrel="stylesheet"type="text/css"href="extjs2.0/resources/css/ext-all.css"mce_href="extjs2.0/resources/css/ext-all.css"/>
<mce:scripttype="text/javascript"src="extjs2.0/adapter/ext/ext-base.js"mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script>
<mce:scripttype="text/javascript"src="extjs2.0/ext-all.js"mce_src="extjs2.0/ext-all.js"></mce:script>
<mce:scripttype="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:scripttype="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';
//创建表格数据
vardata=[
[1,'张三','男',newDate(1979,09,13),29,'zhang@abc.com'],
[2,'李四','女',newDate(1978,10,01),30,'li@abc.com'],
[3,'王五','男',newDate(1981,01,01),27,'wang@abc.com']
];
//创建记录类型Person，mapping值为字段值对应数组中数据的索引位置
varPerson=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}
]);
vardataStore=newExt.data.Store({//配置数据集
reader:newExt.data.ArrayReader({id:0},Person),
data:data
});
//创建Grid表格组件
vargrid=newExt.grid.EditorGridPanel({
title:'Ext.grid.EditorGridPanel',
applyTo:'grid-div',
width:430,
height:280,
frame:true,
clicksToEdit:2,
store:dataStore,
//方式一：对所有修改结果集中式提交
tbar:[{
text:'提交修改',
handler:function(){
varmr=dataStore.getModifiedRecords();//获取所有更新过的记录
varrecordCount=dataStore.getCount();//获取数据集中记录的数量
if(mr.length==0){//确认修改记录数量
alert("没有修改数据！");
returnfalse;
}
varrecordModStr="[";//这里以josn方式保存
for(vari=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:newExt.form.TextField({
allowBlank:false
})
},
{header:"性别",width:40,dataIndex:'personSex',
editor:newExt.form.ComboBox({
editable:false,
displayField:'sex',
mode:'local',
triggerAction:'all',
store:newExt.data.SimpleStore({
fields:['sex'],
data:[['男'],['女']]
})
})
},
{header:"生日",width:100,dataIndex:'personBirthday',
editor:newExt.form.DateField(),
renderer:Ext.util.Format.dateRenderer('Y年m月d日')
},
{header:"年龄",width:40,dataIndex:'personAge',
editor:newExt.form.NumberField(),renderer:isEdit
},
{header:"电子邮件",width:120,dataIndex:'personEmail',
editor:newExt.form.TextField({
vtype:'email'
})
}
]
})
//方式二：对修改结果实时提交，这里对年龄实时提交
functionisEdit(value,record){
//向后台提交请求
returnvalue;
}
functionafterEdit(obj){//每次更改后，触发一次该事件
alert("orginalValue:"+obj.originalValue+",value:"+obj.value);
}
grid.on("afteredit",afterEdit,grid);
});
//--></mce:script>
</HEAD>
<BODYmce_>
<divid='grid-div'></div>
</BODY>
</HTML>
注：此例基本代码参考《ExtJS web应用程序开发指南》中代码17-7
