资源描述：
《ExtJS2.0实用简明教程之可编辑表格EditorGridPanel》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、《ExtJS2.0实用简明教程》之可编辑表格EditorGridPanel可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS中的可编辑表格由类Ext.grid.EditorGridPanel表示，xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样，区别只是在定义列信息的时候，可以指定某一列使用的编辑即可，下面来看一个简单的示例。Ext.onReady(function(){ vardata=[{id:1,name:'小王',email:'xiaowang@easyjf.co
2、m',sex:'男',bornDate:'1991-4-4'},{id:1,name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1992-5-6'},{id:1,name:'小兰',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1993-3-7'} ];varstore=new Ext.data.JsonStore({data:data,fields:["id","name","sex","email",{name:"bornDate",type
3、:"date",dateFormat:"Y-n-j"}]});varcolM=newExt.grid.ColumnModel([{header:"姓名",dataIndex:"name",sortable:true,editor:newExt.form.TextField()}, {header:"性别",dataIndex:"sex"},{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日')},{header:"电
4、子邮件",dataIndex:"email",sortable:true,editor:newExt.form.TextField()}]);vargrid=newExt.grid.EditorGridPanel({renderTo:"hello",title:"学生基本信息管理",height:200,width:600,cm:colM,store:store,autoExpandColumn:3});}); 上面的程序首先定义了一个包含学生信息的对象数组，然后创建了一个JsonStore，在创建这个store的时候，指定bornD
5、ate列的类型为日期date类型，并使用dateFormat来指定日期信息的格式为"Y-n-j"，Y代表年，n代表月,j代表日期。定义表格列模型的时候，对于“姓名”及“电子邮件”列我们使用editor来定义该列使用的编辑器，这里是使用Ext.form.TextField，最后使用newExt.grid.EditorGridPanel(…)来创建一个可编辑的表格。执行上面的程序可以生成一个表格，双击表格中的“姓名”、或“电子邮件”单元格中的信息可以触发单元格的编辑，可以在单元格的文本框中直接编辑表格中的内容，修改过的单元格会有特殊的标记，如下图所示
6、： 为了能编辑“性别”及“出生日期”列，同样只需要在定义该列的时候指定editor即可。由于出生日期是日期类型，因此我们可以使用日期编辑器来编辑，“性别”一列的数据不应该让用户直接输入，而应该是通过下拉框进行选择。日期编辑器可以直接使用Ext.form.DateField组件，下拉选择框编辑器可以使用Ext.form.ComboBox组件，下面是实现对性别及出生日期等列信息编辑的代码：varcolM=newExt.grid.ColumnModel([{header:"姓名",dataIndex:"name",sortable:true
7、,editor:newExt.form.TextField()}, {header:"性别",dataIndex:"sex",editor:newExt.form.ComboBox({transform:"sexList",triggerAction:'all',lazyRender:true})},{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),editor:newExt.form.DateField({f
8、ormat:'Y年m月d日'})},{header:"电子邮件",dataIndex:"email",sortable:true,edi
