EditorGridPanel
ExtJS 中的可编辑表格由类Ext.grid.EditorGridPanel 表示,xtype 为editorgrid,和gridPanel的区别就是,这个表格中的内容是可编辑的
Ext.onReady(function(){
var data=[
{id:1,name:'小王',email:'xiaowang@easyjf.com',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'}
];
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:'xiaowang@easyjf.com',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'}
];
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