ExtJS 7.4 使用现代创建右键单击上下文菜单

Question

我需要在 ExtJS 7.4 中创建右键单击上下文菜单，但只有 childtap 仅在左键单击事件时触发。

有没有办法通过右键单击来触发该事件或其他事件？

Answer 1

我添加了两个解决方案。第一个是组件解决方案（此处为 Grid），第二个是全局解决方案。

组件

解决方案是 childcontextmenu 侦听器。

看看下面的例子（Modern toolkit 6+7）

const menu = new Ext.menu.Menu({
          items: [{
              text: 'Menu Item 1'
          }, {
              text: 'Menu Item 2'
          }]
      });

Ext.define('MyApp.MyGrid', {
    extend: 'Ext.grid.Grid',
    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'phone'],
        data: [{
            name: 'Lisa',
            email: 'lisa@simpsons.com',
            phone: '555-111-1224'
        }]
    }),

    columns: [{
        text: 'Name',
        dataIndex: 'name',
        width: 200
    }],
    listeners: {
        childcontextmenu: function (grid, eObj) {
            grid.deselectAll();
            grid.setSelection(eObj.record);
            menu.showAt(eObj.event.getX(), eObj.event.getY());
            eObj.event.stopEvent()
        }
    }
})

全球

我可以向您展示如何触发全局事件，但问题是目标。在下面的示例中，我使用 document，但您也可以使用任何 view.el.on，目标将始终是视图。可能会找到更多答案 here

Ext.getDoc().on(
    'contextmenu',
    function(e){
        Ext.GlobalEvents.fireEvent('contextmenu', e);
    },
    Ext.GlobalEvents
);

Ext.GlobalEvents.on('contextmenu', function(eObj) {
    console.log('Who dares to RightClick me?');
});

ExtJS 7.4 使用现代创建右键单击上下文菜单

ExtJS 7.4 creating a right-click contextmenu using Modern

extjs

contextmenu