ExtJS: How bind context menu action in controller?

Question

Fiddle: https://fiddle.sencha.com/#fiddle/q02

Ext.define('EController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.test',

    control: {
        '#myAction': {
            click: function() {
                alert('My action')
            }
        }
    }
});

  var sellAction = Ext.create('Ext.Action', {
        text: 'My action',
        itemId: 'myAction'
    });
    var contextMenu = Ext.create('Ext.menu.Menu', {
        items: [
            sellAction
        ]
    });

var grid = Ext.create('Ext.grid.Panel', {
        controller:'test',
...................................
        dockedItems: [{
            xtype: 'toolbar',
            items: [
                sellAction
            ]
        }],

Alert fires in toolbar button, but do not work in context menu.

How add same listener for context menu button and toolbar button? (Best way)

Greendrake Greendrake · Accepted Answer · 2015-07-07T12:51:46

You can't. Simply because, unlike the toolbar, the context menu is not a part of the grid — it is just shown by the grid at e.getXY(). Therefore your control directive cannot reach the context menu.

An alternative would be to use action handlers instead of controller's control:

var sellAction = Ext.create('Ext.Action', {
    text: 'My action',
    itemId: 'myAction',
    handler: function() {
        alert('My action')
    }
});

Fiddle fork: https://fiddle.sencha.com/#fiddle/q0d

ExtJS: How bind context menu action in controller?

1 Answers