ExtJs - Remove combobox focus from grid columns editor

Question

I have a grid column containing combobox as its editor and am using celleditor plugin in which I want to write some validation logic. When I try to select something from the combobox cell, it is expected to lose its focus after the value is changed and then it should go to the validateedit listener. I know there is a blur() method on combobox which will resolve this issue. But as per document, it is a private method so am avoiding that. I wanted to know if there is another way to lose the focus on change or picker collapse or any config which will perform validation on change of field. Below is the code and fiddle.

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: '[email protected]',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: '[email protected]',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: '[email protected]',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: '[email protected]',
                phone: '555-222-1254'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                getEditor: function () {
                    return {
                        validateOnChange: false,
                        validateOnBlur: false,
                        xtype: 'combobox',
                        allowBlank: false,
                        displayField: "name",
                        listeners: {
                            blur: function () {
                                console.log("blurred");
                            },
                            change: function () {
                                console.log('change');
                                // this.blur();
                            }
                        },
                        store: {
                            data: [{
                                name: "A"
                            }, {
                                name: "B"
                            }, {
                                name: "C"
                            }, {
                                name: "D"
                            }]
                        }
                    }
                }
            }],
            selModel: 'cellmodel',
            plugins: {
                cellediting: {
                    clicksToEdit: 1,
                    listeners: {
                        validateedit: function () {
                            console.log("validated")
                        }
                    }
                }
            },
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});

Answer 1

You can try completeEdit method as an alternative:

listeners: {
    blur: function () {
        console.log("blurred");
    },
    change: function () {
        console.log('change');
        this.up('grid').getPlugin().completeEdit();
    }
},