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



























你可能感兴趣的:(EditorGridPanel)