在Extjs项目中我们经常用到EditorGridPanel。在相关的列字段中编辑相关的值然后提交到后台。只是在遇到Combobox作为Editor的时候.在更改编辑之后显示的值是ValueField而不是DisplayField这不是我们愿意看到的
1、Gridpanel中的cm声明代码.注意看[所属分店]声名的Editor:
var cm = new Ext.grid.ColumnModel({
defaults : {
sortable : true,
width : (centertabs.getInnerWidth()-10)/10
},
columns : [sm,{
header : '部门ID',
dataIndex : 'deptId',
hidden : true
},{
header : '所属分店ID',
dataIndex : 'branchId',
hidden : true
},{
header : '所属分店',
dataIndex : 'branchName',
width: 100,
editor : branchbox,
id : 'branchcombo',
renderer : Ext.DongWan.comboRenderer(branchbox)
},{
header : '部门名称',
dataIndex : 'deptName',
editor : new Ext.form.TextField({
allowBlank : false
})
}, {
header : '部门备注',
dataIndex : 'deptRemark',
editor : new Ext.form.TextField({
allowBlank : false
})
},{
header:'创建时间',
dataIndex:'createTime',
renderer : function(value){
if(value instanceof Date){
return new Date(value).format("Y-m-d");
}else{
return value;
}
},
editor : new Ext.grid.GridEditor(
new Ext.form.DateField({
format:'Y-m-d',
type:'date'
}))
}]
});
2、在上面的代码中我们声名了Editor为combobox。但是它显示的ValueField的值。
我们要显示DisplayField的值就要用到上面的这个方法:
renderer : Ext.DongWan.comboRenderer(branchbox)
3、renderer : Ext.DongWan.comboRenderer(branchbox)方法
//下拉框格式化
comboRenderer : function(combo) {
return function(value) {
var record = combo.findRecord(combo.valueField, value);
return record
? record.get(combo.displayField)
: value;
}
}