extjs的EditorGridPanel中的ComboBox列中显示值的问题
有一段时间没写博客了，最近因项目一直在忙，终于抽出空来写点东西，在项目中使用了extjs的editorgridpanel,但是其中的combobox在选择了相应的选项后，grid中显示的是值域(valueField)的值，而非意愿中的显示域(displayField)的值，在网上搜索了一番，结果几乎都是在定义带combobox的列时配置其renderer的属性，下面是网上最常见的2中处理这个问题的代码。
第一种：在渲染时利用Combobox来设置
//这是编辑框
{
text: '改扩建类型',
name:'Upgrading_Type',
align:"center",
flex:1,
dataIndex: 'Upgrading_Type',
editor:combo,
defaultValue:'1',
renderer:Ext.util.Format.comboRenderer(combo)
}
//这是ComboBox
var combo = new Ext.form.ComboBox({
store:typeStore,
istConfig: {
emptyText: "未找到匹配项",
maxHeight: 150
},
id:'cb',
name: "Config_Value",
triggerAction: "all", //单击触发按钮显示全部数据
displayField: "Config_Name",
valueField: "Config_Value",
hiddenName:"Config_Value",
queryMode: "local",
forceSelection: true, //要求输入值必须在列表中存在
typeAhead: true, //允许自动选择匹配的剩余部分文本
value: "1"
});
//下面是处理此问题的方法---Ext.util.Format.comboRenderer(combo)
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField,value);
return record ? record.get(combo.displayField) : '123';
}
}
第二种：通过Store对象来获取record来设置
前面的编辑框的代码和ComboBox如同上面的，下面的是处理的方法
//获取当前id="cb"的comboBox选择的值
var index = typeStore.find(Ext.getCmp('cb').valueField, value);
var record = typeStore.getAt(index);
var displayText = "";
if (record == null) {
displayText = value;
} else {
displayText = record.data.Config_Name;//获取record中的数据集中的Config_Name字段的值
}
return displayText;
}
经过了一番尝试以后结果发现这两种办法都不行，两种办法都执行了else，所以下面是我尝试成功的
一个灰常简单的办法。
renderer:function(value){ return value == '1' ? '扩建' : '工艺提升' }
如图：显示就正常啦