Question

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

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

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

修改-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);
    }
});

先谢谢。 rajasekar

Answer 1

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

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

查找显示ComboBox in Grid

的部分

If using a ComboBox in an Editor Grid a renderer will be needed to show the displayField when the editor is not active. Set up the renderer manually, or implement a reusable render, for example:

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中解析，我从你发布的代码中删除它们。

extjs网格组合框问题

1 个答案: