How i can create context menu for extjs panel

Question

i have context menu like

var ctxMenu = Ext.create('Ext.menu.Menu', {
    items: [{ text: 'Edit', action: 'edit'}]
});

how i can add this to extjs panel? I am not seeing any suitable event in panel, like itemcontextmenu in treepanel?

Advance Thanks.

Answer 1

There are itemcontextmenu and containercontextmenu events in Ext.tree.Panel.

Update: same events exist for Ext.grid.Panel. You probably want to subscribe for both of them and do something like that:

showContextMenu: function(e) {
    var me = this;

    if (me.contextMenu === undefined)
        return;

    e.stopEvent();
    me.contextMenu.showAt(e.getXY());
},

// Show context menu from the grid
gridContextMenu: function(view, rec, node, index, e) {
    this.showContextMenu(e);
},

// Show context menu from the empty area below grid records
containerContextMenu: function(view, e) {
    this.showContextMenu(e);
},

Answer 2

This works for me on Sencha ExtJS 7.4 on a Ext.panel.Panel:

listeners: {
    el: {
        contextmenu: function(e) {
            e.preventDefault();
            let contextMenu = new Ext.menu.Menu({
                items: [{
                    text: 'Cut',
                    iconCls: 'cut',
                    handler: 'onCut'
                },{
                    text: 'Delete',
                    iconCls: 'delete',
                    handler: 'onDelete'
                }]
            });
            contextMenu.showBy(Ext.getCmp(blockId+'-panel'));
        }
    }
}