extjs contextmenu click, pass parent grid as parameter to controller method

Question

Inside my extjs grid, when I right click I call a context menu. When I click on one of the items I want to launch a method in the controller. This all works successfully, problem is I want to pass the parent grid that this is being called from into the controller method. Can someone please show me how to do this?

This is my context menu

Ext.define('Example.ContextMenuTradematch', {
xtype: 'contextMenuTradematch',
extend: 'Ext.menu.Menu',
items: [
    {
        text: 'Match Trade',
        iconCls: 'greenIcon',
        listeners: {
            click: {                    
                fn: 'onMatchTrade',
                params: {
                    param1: this
                }
            }
        }
    },
    {
        text: 'Delete Trade',
        iconCls: 'deleteIcon',
        listeners: {
            click: 'onDeleteTrade'
        }
    }
]

});

then this is my controller method

    onMatchTrade: function (event, target, options) {
    debugger;
    var me = this;

How can I access the grid that the event originated from?

--and this is how I add the context menu to the grid

                    title: 'Tradematch Results: UNMATCHED',
                xtype: 'grid',
                itemId: 'gridUnmatchedId',
                ui: 'featuredpanel-framed',
                cls: 'custom-grid',
                margin: '0px 10px 0px 10px',
                flex: 2,
                width: '100%',
                bind: {
                    store: '{myTM_ResultsStore}'
                },
                listeners: {
                    itemcontextmenu: 'showContextMenuTradematch'
                },

and this is how the controller adds it...

    getContextMenu: function (cMenu) {
    if (!this.contextMenu) {
        debugger;
        this.contextMenu = this.getView().add({ xtype: cMenu });
    }
    return this.contextMenu;
},

showContextMenuTradematch: function (view, rec, node, index, e) {
    e.stopEvent();
    e.stopEvent();
    debugger;
    this.getContextMenu('contextMenuTradematch1').show().setPagePosition(e.getXY());
    return false;
},

How does the grid create to the controller? There's not enough contextual information. — Evan Trimboli

Guilherme Lopes Guilherme Lopes · Accepted Answer · 2017-08-02T23:02:52

The easiest way to do this is when you create your Example.ContextMenuTradematch instance - that I'm assuming you do from a itemcontextmenu listener - then you could pass a reference to the grid.

itemcontextmenu: function (grid, record, item) {
     // code to create your menu
     // probably something like: 
     if (!grid.contextMenu) {
          grid.contextMenu = Ext.create('Example.ContextMenuTradematch', {
              ownerGrid: grid
          });
     }

     grid.contextMenu.showBy(item);
}

If onMatchTrade was fired by clicking on an Ext.menu.Item instance then it's signature will be:

onMatchTrade: function (item, e) {
    var menu = item.up('menu'),
        grid = menu.ownerGrid;

     console.log(grid);
}

There was a lot of guessing here. If this is not how you are creating your menu or calling the methods, adding a fiddle with the issue would help.

Here is a fiddle to use as template: https://fiddle.sencha.com/#view/editor&fiddle/24fc

extjs contextmenu click, pass parent grid as parameter to controller method

1 Answers