ExtJS Grid分组与单元格编辑插件冲突：TagField编辑器点击分组未关闭

使用带有cellediting插件和grouping特性的Ext.grid.Panel，编辑器采用TagField组件。当编辑字段时未关闭选择列表（boundlist），点击分组表头触发blur事件会出现两种异常：

• 点击当前行所属分组：Tag输入框隐藏，但boundlist仍停留在页面上
• 点击上方分组：Tag输入框会偏移至页面顶部

针对这两个UI异常，可通过以下几种方式处理：

方式1：监听分组表头点击，强制关闭选择列表 #

在网格渲染完成后，给分组表头元素添加点击监听，检测到活跃的TagField编辑器时，主动关闭其选择列表并完成编辑：

Ext.create('Ext.grid.Panel', {
    // 网格基础配置
    plugins: {
        cellediting: {
            clicksToEdit: 1
        }
    },
    features: [{
        ftype: 'grouping'
        // 分组相关配置
    }],
    columns: [{
        text: '标签',
        dataIndex: 'tags',
        editor: {
            xtype: 'tagfield',
            store: tagStore,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'id'
        }
    }],
    listeners: {
        afterrender: function(grid) {
            grid.getView().getEl().on('click', function(e) {
                var cellEditor = grid.getPlugin('cellediting');
                if (cellEditor && cellEditor.getActiveEditor()) {
                    var editorField = cellEditor.getActiveEditor().field;
                    if (editorField.isXType('tagfield') && editorField.isExpanded()) {
                        editorField.collapse();
                        cellEditor.completeEdit();
                    }
                }
            }, this, {
                delegate: '.x-grid-group-hd'
            });
        }
    }
});

方式2：重写TagField的blur事件逻辑 #

自定义TagField组件，重写onBlur方法，确保失去焦点时先关闭选择列表再执行原逻辑：

Ext.define('CustomTagField', {
    extend: 'Ext.form.field.Tag',
    alias: 'widget.customtagfield',
    
    onBlur: function() {
        if (this.isExpanded()) {
            this.collapse();
        }
        this.callParent(arguments);
    }
});

之后在网格列编辑器中使用这个自定义组件：

columns: [{
    text: '标签',
    dataIndex: 'tags',
    editor: {
        xtype: 'customtagfield',
        store: tagStore,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'id'
    }
}]

方式3：修正输入框偏移问题 #

点击上方分组时的输入框偏移，是因为分组折叠/展开触发视图重绘，编辑器元素未正确清理。可在单元格编辑的完成/取消事件中手动处理编辑器元素：

plugins: {
    cellediting: {
        clicksToEdit: 1,
        listeners: {
            completeedit: function(editor) {
                var activeEditor = editor.getActiveEditor();
                if (activeEditor && activeEditor.field.isXType('tagfield')) {
                    if (activeEditor.field.rendered) {
                        activeEditor.field.el.remove();
                    }
                }
            },
            canceledit: function(editor) {
                var activeEditor = editor.getActiveEditor();
                if (activeEditor && activeEditor.field.isXType('tagfield')) {
                    if (activeEditor.field.isExpanded()) {
                        activeEditor.field.collapse();
                    }
                    if (activeEditor.field.rendered) {
                        activeEditor.field.el.remove();
                    }
                }
            }
        }
    }
}

以上方式可单独使用，也可组合搭配，核心是确保分组表头点击时，TagField的选择列表被正确关闭，同时避免编辑器元素因视图重绘出现位置偏移。

内容的提问来源于stack exchange，提问作者matei.nick