ComboBox keep visible in Grid editor

Question

I have an editor comboBox in Grid and it only shows when I click row. How to keep it permanent visible in grid? Thanks

Answer 1

How to keep it permanent visible in grid?

If you are using ExtJS version 5.x or higher then you can use widgetcolumn

A widget column is configured with a widget config object which specifies an xtype to indicate which type of Widget or Component belongs in the cells of this column.

I have created an sencha fiddle demo hope this will help you to solve problem or achieve your requirement.

Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone', {
            name: 'checked',
            defaultValue: 'AL'
        }],
        data: [{
            name: 'Lisa',
            email: 'lisa@simpsons.com',
            phone: '555-111-1224'
        }, {
            name: 'Bart',
            email: 'bart@simpsons.com',
            phone: '555-222-1234'
        }, {
            name: 'Homer',
            email: 'homer@simpsons.com',
            phone: '555-222-1244'
        }, {
            name: 'Marge',
            email: 'marge@simpsons.com',
            phone: '555-222-1254'
        }]
    }),
    states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [{
            "abbr": "AL",
            "name": "Alabama"
        }, {
            "abbr": "AK",
            "name": "Alaska"
        }, {
            "abbr": "AZ",
            "name": "Arizona"
        }]
    });
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        text: 'State',
        width: 150,
        xtype: 'widgetcolumn',
        dataIndex: 'checked',
        widget: {
            xtype: 'combobox',
            flex: 1,
            emptyText: 'Select State',
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            store: states,
            listeners: {
                select: function (combo, record) {
                    Ext.Msg.alert('Success', 'Good you have selected <b>' + record.get('name') + '</b>')

                    var grid = combo.up('grid'),
                        index = grid.getView().indexOf(combo.el.up('table')),
                        record = grid.getStore().getAt(index);

                    console.log(record.getData());
                }
            }
        }
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});