Grid中使用的Combobox

最新推荐文章于 2020-03-23 12:19:01 发布

孤独の程序员

最新推荐文章于 2020-03-23 12:19:01 发布

阅读量409

点赞数

分类专栏： RIA RESTful 文章标签： EXT PHP

RIA 同时被 2 个专栏收录

22 篇文章

订阅专栏

RESTful

22 篇文章

订阅专栏

本文介绍如何解决ExtJS Grid中使用ComboBox作为编辑控件时，选择项显示与实际值不符的问题。通过自定义渲染函数，实现了正确显示对应选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的：

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.
请给出你的建议或与我们分享你的改进。