CODEWITHSUNDEEP
extjscontextmenu
Asken
Asken

Reputation: 8051

ExtJS 7.4 creating a right-click contextmenu using Modern

I need to create a contextmenu in ExtJS 7.4 on right click but there's only childtap which only triggers on left-click event.

Is there a way to trigger that event or another for right-click?

Upvotes: 0

Views: 433

Answers (1)

Dinkheller
Dinkheller

Reputation: 5054

I added two solutions. The first is a component solution (here Grid) and the second a global one.

COMPONENT

The solution would be the childcontextmenu listener.

Have a look at the following example (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: '[email protected]',
            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()
        }
    }
})

GLOBAL

I can show you how to fire global events, but the problem is the target. In the following example I am using document but you can also use any view.el.on and the target will be always the view. More answers might be found 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?');
});

Upvotes: 2

Related Questions