extjs 3.4 可编辑网格：如何在列中分离 displayField 和 ValueField答案

【问题标题】：extjs 3.4 editable grid: how to separate displayField and ValueField in columnextjs 3.4 可编辑网格：如何在列中分离 displayField 和 ValueField
【发布时间】：2011-10-14 16:30:00
【问题描述】：

我正在尝试制作类似于：http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/edit-grid.html

但我想更改 Light 列：

我希望它包含 id 而不是实际值。

我可以强制组合框将值与表示分离，但不能将实际的列值分开（实际上我不知道在哪里存储列的 id 值映射（不仅仅是编辑器））：

new Ext.grid.EditorGridPanel({
    ...
    store: new Ext.data.Store ({
            ...
            fields: [
                       'MagicId',
                       ...
                    ]
        })
    columns: [
                {
                    header: 'Magic',
                    dataIndex: 'MagicId',
                    editor: new Ext.form.ComboBox({
                        store: new Ext.data.Store({
                            ...
                            fields: ['id', 'title']}),
                        valueField: 'id',
                        displayField: 'title',
                        editable: 'false'
                    })
                },
                ...
             ]

当我在组合框中选择“魔术标题”时，无论如何我都会在我的网格中得到 MagicId。我明白为什么会这样，但不能让它按照我需要的方式工作......

我尝试将所有不必要的代码替换为 ... 以帮助您阅读。

感谢您的关注。

【问题讨论】：

标签： extjs grid

【解决方案1】：

将 ID 字段保留在您的网格/存储中，然后使用“renderer”属性显示其他内容。 ID-文本映射可以存储在数组或对象中：

{
    header: 'Magic',
    dataIndex: 'MagicId',
    renderer: function(value) {
        return magicIdValueArray[value];
    }
    ...
}

编辑：由于您已经在组合存储中拥有 ID 值映射，因此我将使用该存储来获取值（它需要在组合框之外声明）。

renderer: function(value) {
    var record = comboStore.findRecord('id', value);
    return record.title;
}

【讨论】：