extjs 3.4 editable grid: how to separate displayField and ValueField in column

I'm trying to make something that looks like: http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/edit-grid.html

But I want to change Light column:

I want it to contain ids instead of actual values.

I can force combobox to separate values from presentation but not the actual column value (in fact I don't know where to store id-value mapping for column (not just for the editor)):

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

When I select "Magic title" in combobox I get MagicId in my grid anyway. I understand why it's happening but can't make it work the way I need it to work...

I tried to replace all unnecessary code with ... to help you reading.

Thank you for your attention.

Keep the ID field in your grid/store, then use the "renderer" property to display something else. ID-text mapping could be stored in an array or an object:

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

EDIT: Since you already have the ID-value mapping in the combo store, I would use that store to fetch the value (it needs to be declared outside the combobox).

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