extjs 网格组合框问题

Question

我正在使用带有标签和 id 值的 ext js 自动完成组合框，它完美地显示了前面的标签并将 id 作为值。

但我的问题是在组合框中选择标签后，它立即显示 id 值而不是标签值。

我已经创建了示例网格代码。请查看代码和图片。

edit-grid.js

/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){


    var sm = new Ext.grid.CheckboxSelectionModel({});

    var lightCombo = new Ext.data.ArrayStore({
        data : [['1','Rambutan'],['2','Jackfruit'],['3','Passion Fruit'],['4','Lychee'],['5','Star fruit'],['6','Mangosteen'],['7','Kumquat'],['8','Mango'],['9','Apple'],['10','Orange']],
        fields: ['id','displayValue'],
        sortInfo: {
            field: 'displayValue',
            direction: 'ASC'
        }
    });

    var fightCombo = new Ext.data.ArrayStore({
        data : [['1','Bison'],['2','Bengal Tiger'],['3','Blackbuck Antelope'],['4','Black Bear'],['5','Black-footed Ferrets'],['6','Bobcat'],['7','Bull Musk Ox'],['8','Caracal'],['9','Caribou'],['10','Cheetah']],
        fields: ['id','displayValue'],
        sortInfo: {
            field: 'displayValue',
            direction: 'ASC'
        }
    });

    var mightCombo = new Ext.data.ArrayStore({
        data : [['1','Banyan Tree'],['2','Peepal Tree'],['3','Neem Tree'],['4','Garden Asparagus'],['5','Arjuna Tree'],['6','Aloe Vera'],['7','Tulsi Plant'],['8','Amla Plant'],['9','Ashwagandha'],['10','Brahmi']],
        fields: ['id','displayValue'],
        sortInfo: {
            field: 'displayValue',
            direction: 'ASC'
        }
    });

    var tightCombo = new Ext.data.ArrayStore({
        data : [['1','PHP'],['2','C#'],['3','AJAX'],['4','JavaScript'],['5','Perl'],['6','C'],['7','Ruby on Rails'],['8','Java'],['9','Python'],['10','VB.Net']],
        fields: ['id','displayValue'],
        sortInfo: {
            field: 'displayValue',
            direction: 'ASC'
        }
    });

    var cm = new Ext.grid.ColumnModel({
        defaults: {
            sortable: true
        },
        columns: [
            {
                id: 'light',
                header: 'Light',
                dataIndex: 'light',
                width: 130,
                editor: new Ext.form.ComboBox({
                    store: lightCombo,
                    displayField:'displayValue',
                    valueField: 'id',
                    mode: 'local',
                    typeAhead: false,
                    triggerAction: 'all',
                    hideTrigger:false,
                    lazyRender: true,
                    emptyText: '',
                    typeAhead: false
                })

            },{
                id:'fight',
                header: 'fight',
                dataIndex: 'fight',
                width: 130,
                editor: new Ext.form.ComboBox({
                    store: fightCombo,
                    displayField:'displayValue',
                    valueField: 'id',
                    mode: 'local',
                    typeAhead: false,
                    triggerAction: 'all',
                    hideTrigger:false,
                    lazyRender: true,
                    emptyText: '',
                    typeAhead: false
                })

            },{
                id:'might',
                header: 'might',
                dataIndex: 'might',
                width: 130,
                editor: new Ext.form.ComboBox({
                    store: mightCombo,
                    displayField:'displayValue',
                    valueField: 'id',
                    mode: 'local',
                    typeAhead: false,
                    triggerAction: 'all',
                    hideTrigger:false,
                    lazyRender: true,
                    emptyText: '',
                    typeAhead: false
                })

            },{
                id:'tight',
                header: 'tight',
                dataIndex: 'tight',
                width: 130,
                editor: new Ext.form.ComboBox({
                    store: tightCombo,
                    displayField:'displayValue',
                    valueField: 'id',
                    mode: 'local',
                    typeAhead: false,
                    triggerAction: 'all',
                    hideTrigger:false,
                    lazyRender: true,
                    emptyText: '',
                    typeAhead: false
                })

            }
        ]
    });

    var store = new Ext.data.Store({
        reader: new Ext.data.JsonReader({
            fields: [
                {name: 'light'},
                {name: 'fight'},
                {name: 'might'},
                {name: 'tight'}
            ]
        })
    });

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,

        renderTo: 'editor-grid',
        width: 700,
        height: 300,
        title: 'Edit Plants?',
        frame: true,
        sm: sm,
        clicksToEdit: 1
    });
    initialRowCreation();
    function initialRowCreation(){
        var Plant = grid.getStore().recordType;

        var p = new Plant({
            light: '',
            fight: '',
            might: '',
            tight: ''
        });
        grid.stopEditing();
        store.insert(0, p);
        grid.getView().refresh();
        grid.startEditing(0, 0);
    }
});

提前致谢。拉贾塞卡

Answer 1

出现问题是因为您在网格中显示值。您需要为使用记录中正确字段的列创建一个渲染器。

http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.form.ComboBox

查找显示 ComboBox in Grid 的部分

如果在编辑器网格中使用组合框，则需要渲染器来在编辑器未激活时显示 displayField。手动设置渲染器，或者实现一个可复用的渲染器，例如:

Ext.util.Format.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.valueField, value);
        return record ? record.get(combo.displayField) : combo.valueNotFoundText;
    }
}

您的代码在属性列表的末尾也有很多额外的逗号。这甚至不会在 IE 中解析，我从您发布的代码中删除了它们。