在某列指定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:2,
name:'小李',
email:'xiaoli@easyjf.com',
sex:'男',
bornDate:'1992-5-6'
},
{
id:3,
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.Field()
},{
header:'性别',
dataIndex:'sex',
editor:new Ext.form.ComboBox(
{
transform:'sexList',
triggerAction:'all',
lazyRender:true
}
)
},
{
header:'出生日期',
dataIndex:'bornDate',
120,
editor:new Ext.form.DateField(),
sortable:true,
renderTo: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,
600,
cm:colM,
store:store,
autoExpandColumn:3,
clicksToEdit:1
}
);
});
html文件中需添加如下代码：
1 <body> 2 <div id="hello"></div> 3 <select id="sexList"> 4 <option>男</opion> 5 <option>女</option> 6 </select> 7 </body>
