ExtJS 7.4 Modern版本如何实现右键点击触发contextmenu上下文菜单

ExtJS 7.4 Modern 没有默认提供子项右键触发的对应事件，但可以通过以下两种方式实现需求，无需修改核心源码：

方案1：直接监听原生contextmenu事件（临时使用场景） #

直接在目标组件上绑定原生右键事件，匹配子项后唤起菜单，示例代码如下：

// 以List组件为例，Grid、DataView等组件逻辑一致
Ext.create('Ext.List', {
    store: yourStore,
    itemTpl: '{title}',
    listeners: {
        // 绑定到组件根元素
        element: 'element',
        contextmenu: function(e) {
            // 阻止浏览器默认右键菜单弹出
            e.preventDefault();
            // 匹配子项元素，List默认子项选择器为.x-listitem，Grid对应修改为.x-gridrow
            const targetItem = e.getTarget('.x-listitem', this.element);
            if (targetItem) {
                // 获取当前子项绑定的记录
                const currentRecord = this.getRecord(targetItem);
                // 实例化并显示自定义上下文菜单
                Ext.create('Ext.menu.Menu', {
                    items: [
                        { text: '编辑', handler: () => handleEdit(currentRecord) },
                        { text: '删除', handler: () => handleDelete(currentRecord) }
                    ]
                // 菜单定位在点击子项的左下角，自动适配视口边界
                }).showBy(targetItem, 'tl-bl?');
            }
        }
    },
    renderTo: Ext.getBody()
});

方案2：扩展组件新增自定义子项右键事件（多处复用场景） #

如果项目中多处需要用到子项右键功能，可以通过覆盖组件扩展出统一的childcontextmenu事件，使用方式和childtap完全一致：

// 全局覆盖List组件，Grid等组件修改override目标即可
Ext.define('MyApp.overrides.List', {
    override: 'Ext.List',
    initialize: function() {
        this.callParent(arguments);
        // 绑定右键事件
        this.element.on('contextmenu', function(e) {
            e.preventDefault();
            const targetItem = e.getTarget(this.itemSelector, this.element);
            if (targetItem) {
                const currentRecord = this.getRecord(targetItem);
                // 触发自定义事件，参数规则和childtap对齐
                this.fireEvent('childcontextmenu', this, targetItem, currentRecord, e);
            }
        }, this);
    }
});

// 业务代码中直接监听自定义事件即可
Ext.create('Ext.List', {
    // 其他配置
    listeners: {
        childcontextmenu: function(list, item, record, e) {
            // 直接处理右键逻辑、唤起菜单
        }
    }
});

注意事项 #

• 所有右键逻辑执行前必须调用e.preventDefault()，否则浏览器默认右键菜单会优先弹出
• 不同组件的子项选择器需要对应调整，可通过浏览器调试工具查看子项的class属性确认
• 菜单使用showBy方法定位可以自动处理边界，避免菜单超出可视区域

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