ExtJS 7.4 creating a right-click contextmenu using Modern - extjs

Question

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?

Answer 1

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: '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()
}
}
})
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?');
});