ext2.0中EditorGridPanel （8）

EditorGridPanel

ExtJS 中的可编辑表格由类Ext.grid.EditorGridPanel 表示，xtype 为editorgrid，和gridPanel的区别就是，这个表格中的内容是可编辑的

Ext.onReady(function(){
	var data=[
		{id:1,name:'小王',email:'[email protected]',sex:'男',bornDate:'1991-4-4'},
		{id:1,name:'小李',email:'[email protected]',sex:'男',bornDate:'1992-5-6'},
		{id:1,name:'小兰',email:'[email protected]',sex:'女',bornDate:'1993-3-7'}
	];
	var store=new Ext.data.JsonStore({
		data:data,
		fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
	});
	var colM=new Ext.grid.ColumnModel([
		{header:"姓名",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()},
		{header:"性别",dataIndex:"sex"},
		{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日')},
		{header:"电子邮件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}
	]);
	var grid = new Ext.grid.EditorGridPanel({
		renderTo:"hello",
		title:"学生基本信息管理",
		height:200,
		width:600,
		cm:colM,
		store:store,
		autoExpandColumn:3
	});
});

为了能编辑“性别”及“出生日期”列，同样只需要在定义该列的时候指定editor 即可。由于出生日期是日期类型，因此我们可以使用日期编辑器来编辑，“性别”一列的数据不应该让

用户直接输入，而应该是通过下拉框进行选择。日期编辑器可以直接使用Ext.form.DateField组件，下拉选择框编辑器可以使用Ext.form.ComboBox 组件，下面是实现对性别及

出生日期等列信息编辑的代码：

Ext.onReady(function(){
	var data=[
		{id:1,name:'小王',email:'[email protected]',sex:'男',bornDate:'1991-4-4'},
		{id:1,name:'小李',email:'[email protected]',sex:'男',bornDate:'1992-5-6'},
		{id:1,name:'小兰',email:'[email protected]',sex:'女',bornDate:'1993-3-7'}
	];
	var store=new Ext.data.JsonStore({
		data:data,
		fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
	});
	var colM=new Ext.grid.ColumnModel([
		{header:"姓名",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()},
		{header:"性别",dataIndex:"sex",
			editor:new Ext.form.ComboBox({transform:"sexList",triggerAction: 'all',lazyRender:true})},
		{header:"出生日期",dataIndex:"bornDate",width:120,
			renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
			editor:new Ext.form.DateField({format:'Y年m月d日'})},
		{header:"电子邮件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}
	]);
	var grid = new Ext.grid.EditorGridPanel({
		renderTo:"hello",
		title:"学生基本信息管理",
		height:200,
		width:600,
		cm:colM,
		store:store,
		autoExpandColumn:3,
		clicksToEdit:1
	});	
});

注意在定义EditorGridPanel 的时候，我们增加了一个属性“clicksToEdit:1”，表示点击一次单元格即触发编辑，因为默认情况下该值为2，需要双击单元格才能编辑。为了给
ComboBox 中填充数据，我们使用设置了该组件的transform 配置属性值为sexList，sexList是一个传统的<select>框，我们需要在html 页面中直接定义，代码如下：

 <select id="sexList" name="sexList">
<option>男</option>
<option>女</option>
</select>

ComboBox的其他重要参数

1.valueField:"valuefield"//value值字段
2.displayField："field" //显示文本字段
3.editable：false//false则不可编辑，默认为true
4.triggerAction:"all"//请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name，请一定要注意
6.typeAhead:true,//延时查询，与下面的参数配合
7.typeAheadDelay:3000,//默认250