Ext的Grid中使用combobox做为编辑控件时,遇到在combobox中选择了相应的选项时(displayField),在grid中却填入了valueField值的问题,困扰了很久,在Extjs官方网站的Forums中看到了一篇关于此问题的article,问题迎刃而解,在此感谢原文作者durlabh。全文的扼要翻译如下
原文位置:[url]http://extjs.com/forum/showthread.php?t=34691[/url]
[size=medium][b]ComboBox for Grid (combo having local store)[/b][/size]
Many people have been having confusion over how to handle rendering of combo boxes having a separate valueField and displayField. This is how we have been using in our applications:
很多人困惑于怎样处理带有valueField和displayField的ComboBoxes渲染问题。这是我们如何在应用中使用ComboBoxes的:
Then, in grid config you can use the same renderer for combo:
然后,在你的grid配置属性中对于combo可以使用同样的renderer:
Please note that the above combo box assumes that the store for combo will be local. This approach won't work with remote combos. For remote combo, we update a "proxy" field in the grid store that is used for rendering.
请注意关于combo box假设其store为本地的。此文对于远程combo不适用。远程combo,我们为grid的store中所使用的渲染器替换为"proxy"域。
Let me know your suggestions/ improvements.
请给出你的建议或与我们分享你的改进。
原文位置:[url]http://extjs.com/forum/showthread.php?t=34691[/url]
[size=medium][b]ComboBox for Grid (combo having local store)[/b][/size]
Many people have been having confusion over how to handle rendering of combo boxes having a separate valueField and displayField. This is how we have been using in our applications:
很多人困惑于怎样处理带有valueField和displayField的ComboBoxes渲染问题。这是我们如何在应用中使用ComboBoxes的:
Ext.ns("Ext.ux.renderer");
Ext.ux.renderer.ComboRenderer = function(options) {
var value = options.value;
var combo = options.combo;
var returnValue = value;
var valueField = combo.valueField;
var idx = combo.store.findBy(function(record) {
if(record.get(valueField) == value) {
returnValue = record.get(combo.displayField);
return true;
}
});
// This is our application specific and might need to be removed for your apps
// 这是我们应用中所特定的可能需要从你的应用中移除
if(idx < 0 && value == 0) {
returnValue = '';
}
return returnValue;
};
Ext.ux.renderer.Combo = function(combo) {
return function(value, meta, record) {
return Ext.ux.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo});
};
}
Then, in grid config you can use the same renderer for combo:
然后,在你的grid配置属性中对于combo可以使用同样的renderer:
// Your combo definition
// 你的combo定义
var addressTypeCombo = Ext.form.ComboBox();
var cm = new Ext.grid.ColumnModel([
{header: 'Type', dataIndex: 'AddressTypeId', width: 100, renderer: Ext.ux.renderer.Combo(addressTypeCombo), editor: addressTypeCombo},
{header: 'Address', dataIndex: 'Address1', width: 130, editor: new Ext.form.TextField({maxLength:50})},
{header: 'Address 2', dataIndex: 'Address2', width: 110, editor: new Ext.form.TextField({maxLength:50})},
{header: 'Address 3', dataIndex: 'Address3', width: 110, editor: new Ext.form.TextField({maxLength:50})},
{header: 'Zip Code', dataIndex: 'PostalCode', editor: new Ext.form.TextField({maxLength:10}), width: 80},
{header: 'City', dataIndex: 'City', width: 80, editor: new Ext.form.TextField({maxLength:20})}]
])
Please note that the above combo box assumes that the store for combo will be local. This approach won't work with remote combos. For remote combo, we update a "proxy" field in the grid store that is used for rendering.
请注意关于combo box假设其store为本地的。此文对于远程combo不适用。远程combo,我们为grid的store中所使用的渲染器替换为"proxy"域。
Let me know your suggestions/ improvements.
请给出你的建议或与我们分享你的改进。