In an editable grid, how to make an Ext combo box immediately finish edit mode when selecting an item?

Question

I have configured an Ext JS 4 grid to be editable by utilising the CellEditing plugin. Some cells in the grid have a textfield editor, and a few use a combo box editor. It all works great, but I have a small problem with the default behaviour of combo box editors.

Basically, when editing a cell that has a combo box editor, if you select an item from the dropdown with your mouse, the "edit" mode of that cell doesn't finish. In other words, the cell doesn't immediately go out of edit mode and get marked as dirty. Instead, it will just sit there in edit mode until you go and click somewhere else on the page.

I think it is unusual that Sencha has made this the default behaviour for combo box editors, but I won't complain. I would just like to know how to be able to select a combo box item and immediately take the cell out of edit mode, but I have no idea where to define this custom behaviour.

Here's a small example JS fiddle to play with:

http://jsfiddle.net/FFwkM/

Code copied below for posterity:

var stateStore = Ext.create('Ext.data.Store', {
    fields: ['name'],
    data : [
        {"name":"Alabama"},
        {"name":"Alaska"},
        {"name":"Arizona"}
    ]
});

var gridStore = Ext.create('Ext.data.Store', {
    fields:['firstName', 'state'],
    data:{'items':[
        {"firstName":"Lisa", "state":"Alabama"},
        {"firstName":"Bart", "state":"Alabama"},
        {"firstName":"Homer", "state":"Alabama"},
        {"firstName":"Marge", "state":"Arizona"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: gridStore,
    columns: [{
        header: 'First Name',  dataIndex: 'firstName', flex: 1, editor: 'textfield'
    }, {
        header: 'State', dataIndex: 'state', flex: 1, editor: {
            xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name'
        }
    }],
    selType: 'cellmodel',
    plugins: [{
        ptype: 'cellediting',
        clicksToEdit: 2
    }],
    height: 150,
    width: 200,
    renderTo: Ext.getBody()
});

Answer 1

One way of achieving the desired behaviour is to add a listener for the select event on your combobox, then fire the blur event in the handler. Example:

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: gridStore,
    columns: [{
        header: 'First Name',  dataIndex: 'firstName', flex: 1, editor: 'textfield'
    }, {
        header: 'State', dataIndex: 'state', flex: 1, editor: {
            xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name',
            listeners: {
                select: function(combo, recs, opts){
                    combo.fireEvent('blur'); //<------
                }
            }
        }
    }],
    selType: 'cellmodel',
    plugins: [{
        ptype: 'cellediting',
        clicksToEdit: 2
    }],
    height: 150,
    width: 200,
    renderTo: Ext.getBody()
});

Working fork here: http://jsfiddle.net/Zd5QM/