extjs grid combo box issue

Question

I am using ext js auto complete combo box with label and id values, It is perfectly showing the label in front and getting id as a value.

But my problem is after selecting the label in combo box it immediately showing the id value instead of label value.

I have created example grid code. Please view the code and image.

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

Thanks in Advance. rajasekar

Answer 1

Your problem occurs because you are displaying the value within a grid. You need to create a renderer for that column which uses the correct field from the record.

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

Look for the section that says 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;
    }
}

Your code was also suffering from lots of extra commas at the end of property lists. That will not even parse in IE, I removed them from the code you posted.