Extjs zone de liste déroulante à l'intérieur de la grille

J'ai une grille avec quelques données (liste des utilisateurs). Pour chaque ligne, j'ai de nombreuses actions telles que la mise à jour, supprimer, activer, suspendre, voir les commandes que vous voulez.

Au lieu de placer ainsi beaucoup de boutons qui remplira plus de 400-500 pixels je veux placer une zone de liste déroulante avec une action appliquée à chaque champ.

Le problème est que je ne peux pas simplement rendre un combobox dans une colonne de la rangée juste comme ça, ou je suis en manque de quelque chose? Quelqu'un peut-il faire la lumière sur cette s'il vous plaît?

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

OriginalL'auteur Roy Rodgers | 2010-12-27