extjs 3.4 editable grid:如何在列中分隔displayField和ValueField

时间:2011-10-13 09:47:54

标签: extjs grid

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

的内容

但我想改变Light专栏:

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

我可以强制组合框从表示中分离值而不是实际的列值(实际上我不知道在哪里存储列的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'
                    })
                },
                ...
             ]

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

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

感谢您的关注。

1 个答案:

答案 0 :(得分:2)

将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;
}