Extjs ComboBox inside grid

4
votes

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'
            })
        }
    ]
});
2
comboboxextjs

2 Answers

9
votes
  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'
        }
    }]
});
0
votes

You are attempt to accomplish this is mostly correct. The way that you are adding the custom editor might need some tweaking.. Have you tried this change?

editor: new Ext.form.ComboBox({
                    store: new Ext.data.SimpleStore({
                        id: 0,

I'm unfortunately unable to determine what your code is doing and not working.

What version of ExtJS are you using? One thing of note that I'm finding is that I don't see any object called Ext.data.SimpleStore in the current ExtJS API docs. Have you tried using a different type of data store instead? You might want to try using different type of store for this combo?