ExtJS 7.7网格cellediting插件：点击Combo触发器无法展开下拉[EXTJS-29966]

在使用Ext.grid.Panel结合cellediting插件时，点击包含combo或tagfield的单元格进入编辑状态后，点击组件右侧的触发器三角图标，下拉选项无法展开，只有按下键盘向下箭头才能正常触发展开逻辑。

解决方案1：自定义CellEditing插件重写startEdit方法 #

重写cellediting的startEdit方法，确保编辑器激活后，触发器的点击事件能正常响应：

Ext.define('Custom.grid.plugin.CellEditing', {
    extend: 'Ext.grid.plugin.CellEditing',
    alias: 'plugin.customcellediting',

    startEdit: function(record, column) {
        var editResult = this.callParent(arguments);
        var editor = this.getEditor();

        if (editResult && (editor.isXType('combo') || editor.isXType('tagfield'))) {
            // 延迟确保编辑器完全渲染后绑定触发器点击事件
            Ext.defer(() => {
                editor.triggerEl.on('click', () => {
                    editor.isExpanded() ? editor.collapse() : editor.expand();
                }, null, {single: true});
            }, 10);
        }

        return editResult;
    }
});

在你的Grid配置中替换原插件为自定义版本：

plugins: [{
    ptype: 'customcellediting',
    clicksToEdit: 1
}]

解决方案2：直接给编辑器绑定触发器点击事件 #

在列的编辑器配置中，通过afterrender事件手动绑定触发器的点击逻辑：

{
    xtype: 'gridcolumn',
    dataIndex: 'yourField',
    text: '目标列',
    editor: {
        xtype: 'combo', // 或tagfield
        store: yourStore,
        queryMode: 'local',
        displayField: 'text',
        valueField: 'value',
        listeners: {
            afterrender: function(editor) {
                editor.triggerEl.on('click', () => {
                    editor.toggle(); // 直接切换展开/收起状态
                });
            }
        }
    }
}

问题原因说明 #

这个问题本质是cellediting插件在激活编辑器时的焦点管理逻辑，导致触发器的点击事件被网格的事件拦截，或者编辑器未完全获得焦点，无法响应触发器的点击动作。通过手动绑定触发器的点击事件，或者延迟确保编辑器状态稳定后处理，就能绕过这个焦点问题。

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