ExtJS 5/6 : Right Click/Context Menu in a Grid/Tree Panel

Recently, I added a “contextmenu” to my tree panel (same stuff form grid panel in fact), especially on item right click.

The implementation is very easy : just add a “itemcontextmenu” listener

Example:

{
    // my panel manages some layers on a map
    xtype: 'treepanel'
    ,region: 'west'
    ,title: 'Layers' // 
[...]

    ,listeners: {
        scope: me
       ,itemcontextmenu: function(tree, record, item, index, e, eOpts ) {
          // Optimize : create menu once
          var menu_grid = new Ext.menu.Menu({ items:
            [
                { text: 'More details', handler: function() {console.log("More details");} },
                { text: 'Delete', handler: function() {console.log("Delete");} }
            ]
            });
          var position = e.getXY();
          e.stopEvent();
          menu_grid.showAt(position);
       }
   }
[...]
}

And… it works. But, there is ONE issue: when used on a “desktop” webapp, the context menu isn’t always hidden when use clicks outside. It happens only when the mouse never hovers the context menu.

To solve this issue very easily, I change the contextmenu show position

{
    // my panel manages some layers on a map
    xtype: 'treepanel'
    ,region: 'west'
    ,title: 'Layers' // 
[...]

    ,listeners: {
        scope: me
       ,itemcontextmenu: function(tree, record, item, index, e, eOpts ) {
          // Optimize : create menu once
          var menu_grid = new Ext.menu.Menu({ items:
            [
                { text: 'More details', handler: function() {console.log("More details");} },
                { text: 'Delete', handler: function() {console.log("Delete");} }
            ]
            });
          // HERE IS THE MAIN CHANGE
          var position = [e.getX()-10, e.getY()-10];
          e.stopEvent();
          menu_grid.showAt(position);
       }
   }
[...]
}