Combobox inside grid doesn't show data after rendering

498 Views Asked by At

I have a grid that has combobox on one column. Data loads fine on the grid. But when I double click on one row to enable edit, the combobox doesn't show the data. (Please see the screenshot below) The highlighted part should show '1st Label'. But when I start to edit, it shows up like in the 2nd row with '2nd Label'.

I tried my code on 4.1 and it works fine. It seems 4.2.2 doesn't like combobox inside grid. Any help is really appreciated

enter image description here

This is my sample code. Please try it on Sencha's Code Editor to see both on 4.2.2 and 4.1.0

        Ext.define('GridModel', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'Id',
            type: 'int'
        }, {
            name: 'Value',
            type: 'int'
        }]
    });

    Ext.define('ComboModel', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'ComboId',
            type: 'int'
        }, {
            name: 'Label',
            type: 'string'
        }],
        idProperty: 'Order'
    });

    Ext.create('Ext.data.Store', {
        storeId: 'comboStore',
        model: 'ComboModel',
        data: [{
            ComboId: 1,
            Label: '1st Label'
        }, {
            ComboId: 2,
            Label: '2nd Label'
        }]
    });

    Ext.create('Ext.data.Store', {
        storeId: 'gridStore',
        model: 'GridModel',
        data: [{
            Id: 1,
            Value: 1
        }, {
            Id: 2,
            Value: 2
        }, {
            Id: 3,
            Value: 1
        }, {
            Id: 4,
            Value: 2
        }]
    });

    Ext.create('Ext.grid.Panel', {
        width: 400,
        height: 200,
        renderTo: 'ct',
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit: 2,
                listeners: {
                    edit: function(editor, e) {
                        console.log(gridStore.getModifiedRecords());
                    }
                }
            })
        ],
        store: Ext.data.StoreManager.lookup('gridStore'),
        forceFit: true,
        columns: [{
            dataIndex: 'Id',
            header: 'ID'
        }, {
            dataIndex: 'Value',
            header: 'Label',
            editor: {
                xtype: 'combobox',
                displayField: 'Label',
                valueField: 'ComboId',
                queryMode: 'local',
                store: Ext.data.StoreManager.lookup('comboStore'),
                allowBlank: true
            },
            renderer: function(value) {
                var rec = comboStore.getById(value);
                return rec ? rec.get('Label') : value;
            }
        }],
        renderTo: Ext.getBody()
    });
0

There are 0 best solutions below