ext_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