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

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

我有一个包含组合框的网格列作为其编辑器，并且正在使用 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: '[e-mail]',phone: '555-111-1224'
            },{
                name: 'Bart',email: '[e-mail]',phone: '555-222-1234'
            },{
                name: 'Homer',email: '[e-mail]',phone: '555-222-1244'
            },{
                name: 'Marge',email: '[e-mail]',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()
        });
    }
});

解决方法

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

const inputScreen = $('<select class="selectpicker"><option>test</option></select>').appendTo(conScreen);
inputScreen.selectpicker();