在可编辑的网格中，如何在选择项目时使Ext组合框立即完成编辑模式？

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/

Answer 2

Listen to the select event and then:

            listeners: {
                select: {
                    fn: function(c, r, eopts) {
                        c.ownerCt.completeEdit();
                    }
                }
            }

http://www.sencha.com/forum/showthread.php?261264-How-to-make-a-grid-cell-immediately-exit-edit-mode-when-a-combo-box-item-is-selected