在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' })) }] });
我们要显示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; } }