ExtJS 7.7 Classic Toolkit单元格编辑插件下拉框无法展开求助

问题说明 #

在ExtJS 7.7 Classic Toolkit中，使用cellediting插件时，进入单元格编辑模式后，点击combobox或datefield的下拉触发器无法展开选项。该问题在官方KitchenSink示例中同样存在，ExtJS 7.6无此异常。相关测试代码如下：

Ext.define("KitchenSink.view.grid.CellEditing", {
    extend: "Ext.grid.Panel",
    xtype: "cell-editing",
    controller: "cell-editing",

    requires: [
        "Ext.selection.CellModel"
    ],

    title: "Cell Editing Plants",
    width: 680,
    height: 350,

    autoLoad: true,
    frame: true,
    selModel: {
        type: "cellmodel"
    },

    plugins: {
        cellediting: {
            clicksToEdit: 1
        }
    },

    store: {
        model: "KitchenSink.model.Plant",

        proxy: {
            type: "ajax",
            url: "data/grid/plants.xml",

            reader: {
                type: "xml",    // XmlReader since returned data is in XML
                record: "plant" // records are in 'plant' tags
            }
        },

        sorters: [{
            property: "common",
            direction: "ASC"
        }]
    },

    columns: [{
        header: "Common Name",
        dataIndex: "common",

        flex: 1,
        editor: {
            allowBlank: false,
            selectOnFocus: false
        }
    }, {
        header: "Light",
        dataIndex: "light",

        width: 130,
        editor: {
            xtype: "combo",
            typeAhead: true,
            triggerAction: "all",
            selectOnFocus: false,
            store: [
                ["Shade", "Shade"],
                ["Mostly Shady", "Mostly Shady"],
                ["Sun or Shade", "Sun or Shade"],
                ["Mostly Sunny", "Mostly Sunny"],
                ["Sunny", "Sunny"]
            ]
        }
    }, {
        header: "Price",
        dataIndex: "price",

        width: 70,
        align: "right",
        formatter: "usMoney",
        editor: {
            xtype: "numberfield",
            selectOnFocus: false,
            allowBlank: false,
            minValue: 0,
            maxValue: 100000
        }
    }, {
        xtype: "datecolumn",
        header: "Available",
        dataIndex: "availDate",

        width: 95,
        format: "M d, Y",
        editor: {
            xtype: "datefield",
            selectOnFocus: false,
            format: "m/d/y",
            minValue: "01/01/06",
            disabledDays: [0, 6],
            disabledDaysText: "Plants are not available on the weekends"
        }
    }]
});

临时解决方案 #

方案1：重写CellEditing插件的事件处理逻辑 #

通过重写Ext.grid.plugin.CellEditing的onEditorKey方法，避免阻止下拉组件的事件触发：

Ext.define('Override.grid.plugin.CellEditing', {
    override: 'Ext.grid.plugin.CellEditing',

    onEditorKey: function(e, target) {
        var key = e.getKey();
        // 针对下拉组件，跳过父类的按键阻止逻辑
        if (key !== e.TAB && !e.ALT && !e.CTRL && !e.SHIFT) {
            var activeEditor = this.getActiveEditor();
            if (activeEditor && (activeEditor.field.isXType('combo') || activeEditor.field.isXType('datefield'))) {
                return;
            }
        }
        this.callParent(arguments);
    }
});

将该重写类添加到应用的依赖中，确保在组件加载前执行。

方案2：配置编辑器的可聚焦属性 #

给combobox和datefield编辑器添加focusable: true配置，确保组件能正确获取焦点并触发下拉：

// 示例：Light列的combobox编辑器配置
editor: {
    xtype: "combo",
    typeAhead: true,
    triggerAction: "all",
    selectOnFocus: false,
    focusable: true, // 添加此配置
    store: [
        ["Shade", "Shade"],
        ["Mostly Shady", "Mostly Shady"],
        ["Sun or Shade", "Sun or Shade"],
        ["Mostly Sunny", "Mostly Sunny"],
        ["Sunny", "Sunny"]
    ]
}

对datefield编辑器执行同样的配置修改。

版本修复状态 #

该问题是ExtJS 7.7 Classic的已知bug，Sencha在7.7.1及更高版本中已修复此单元格编辑插件与下拉组件的交互异常。建议升级到对应版本以彻底解决问题。

内容的提问来源于stack exchange，提问作者Hasan