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

Question

我正在尝试制作看起来像这样的东西： http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/edit-grid.html

但我想更改 Light 列：

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

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

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'
                    })
                },
                ...
             ]

当我在组合框中选择“Magic title”时无论如何，我在我的网格中得到了 MagicId。我明白为什么会发生这种情况，但无法让它按照我需要的方式工作...

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

感谢您的关注。

Answer 1

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

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

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

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