ExtJs - 从网格列编辑器中删除组合框焦点

Question

我有一个包含组合框的网格列作为其编辑器，并且正在使用celleditor 插件，我想在其中编写一些验证逻辑。当我尝试从组合框单元格中选择某些内容时，预计在更改值后它会失去焦点，然后它应该转到validateedit 侦听器。我知道组合框上有一个blur() 方法可以解决这个问题。但根据document，这是一种私有方法，所以我要避免这种情况。我想知道是否有另一种方法可以让您不再关注更改或选择器崩溃或任何将对字段更改执行验证的配置。 下面是代码和fiddle。

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                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

您可以尝试使用 completeEdit 方法作为替代方法：

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