редактируемая сетка extjs 3.4: как разделить displayField и ValueField в столбце

Question

Я пытаюсь создать что-то похожее на: http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/edit-grid.html

Но я хочу изменить столбец Light:

Я хочу, чтобы он содержал идентификаторы вместо фактических значений.

Я могу заставить combobox отделить значения от представления, но не от фактического значения столбца (на самом деле я не знаю, где хранить сопоставление значений 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 в своей сетке.Я понимаю, почему это происходит, но не могу заставить его работать так, как мне нужно ...

Я попытался заменить весь ненужный код на ..., чтобы помочь вам в чтении.

Спасибо за внимание.

Answer 1

Сохраните поле идентификатора в вашей сетке / магазине, затем используйте свойство «рендерер», чтобы отобразить что-то еще. Отображение ID-текста может храниться в массиве или объекте:

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

EDIT: Поскольку у вас уже есть сопоставление ID-значения в комбинированном хранилище, я бы использовал это хранилище для извлечения значения (оно должно быть объявлено вне поля со списком).

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