Geek asks and answers

Extjs field panel instance

I use ext js auto complete combo box with labels and id values, it shows the label in front perfectly and gets id as the value.

But my problem is that after selecting the shortcut in the combo box, the id value is displayed immediately instead of the label value.

I created an 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 at Advance. Rajasekar

+3
source share
1 answer

Your problem arises because you display the value in the grid. You need to create a renderer for this column that uses the correct field from the record.

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

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

. IE, .

+10

More articles:


All Articles