Extjs ComboBox inside grid

Question

I have a grid with some data (users list). For each row I have many actions such as update, delete, activate, suspend, view orders you name it.

Instead of placing so many buttons which will fill more than 400-500 pixels I want to place a combobox with an action applied to each field.

The problem is that I can't simply render a combobox in a column row just like that or I'm missing something? Can someone shed some light on this please?

new Ext.grid.GridPanel({
    region: 'center',
    id: 'usersGrid',
    store: store,
    stripeRows: true,
    autoExpandColumn: 'username',
    columns: [{
            // username
        },{
            // email
        },{
            // last seen
        },{
            //  actions combo, it won't show
            header: '',
            width: 220,
            fixed: true,
            hideable: false,
            dataIndex: 'actions',
            renderer: new Ext.form.ComboBox({
                store: new Ext.data.SimpleStore({
                    id: 0,
                    fields: ['abbr', 'action'],
                    data: [
                        ['suspend', 'Suspend'],
                        ['activate', 'Activate'],
                        ['update', 'Update'],
                        ['delete', 'Delete']
                    ]
                }),
                displayField: 'action',
                valueField: 'abbr',
                mode: 'local',
                typeAhead: false,
                triggerAction: 'all',
                lazyRender: true,
                emptyText: 'Select action'
            })
        }
    ]
});

Solution

1. Convert Grid to Editable Grid
2. Add editor config in columns instead of 'renderer'. Find below the altered code.

new Ext.grid.EditorGridPanel({
    region: 'center',
    id: 'usersGrid',
    store: store,
    stripeRows: true,
    autoExpandColumn: 'username',
    columns: [{
        // username
    }, {
        // email
    }, {
        // last seen
    }, {
        //  actions combo, it won't show
        header: '',
        width: 220,
        fixed: true,
        hideable: false,
        dataIndex: 'actions',
        editor: {
            xtype: 'combo',
            store: new Ext.data.ArrayStore({
                fields: ['abbr', 'action'],
                data: [
                    ['suspend', 'Suspend'],
                    ['activate', 'Activate'],
                    ['update', 'Update'],
                    ['delete', 'Delete']
                ]
            }),
            displayField: 'action',
            valueField: 'abbr',
            mode: 'local',
            typeAhead: false,
            triggerAction: 'all',
            lazyRender: true,
            emptyText: 'Select action'
        }
    }]
});

Comments

[Sokmesa Khiev]

Yes .. You are right when we decide to use editor grid. One thing still problem is that editor grid need to click on its cell in order to display combo box and it is not what I want. Currently I met some problem with the one who post this problem. I want my grid to show combo box initially so that the user will understand that they can choose action from the combo box. I am using extjs 3.3.1

[Yoh Suzuki]

You should style the cell to look like a ComboBox. You really only have a singleton ComboBox to edit the cell with EditorGrid, so you will need to make your cells look like ComboBoxes to get the desired effect. (This performs significantly faster than rendering lots of ComboBoxes anyway.)