ExtJS 4 - how to hide context menu when left clicking the Ext.panel.Panel?

Question

I have context menu on a panel (geoext 2 map panel) This is how I init it :

 var ctxMenu;

   Ext.get("mapPanel-body").on("contextmenu", function (event, element) {
        event.stopEvent();
        if (!ctxMenu) {
            ctxMenu = Ext.create('Ext.menu.Menu', {
            width:100,
            height:100,
            margin: '0 0 10 0',        
            items: [{ text: 'test', action: 'test'}]
    });
        }
        ctxMenu.showAt(event.getXY());
        return false;
    });

What happens is that right click on the map opens the context menu ... but it stays open till I choose an item from the menu (left click outside it doesnt close it)

I'm using ExtJS 4.2.1

Why it behaves like this ?

Srinivas B Srinivas B · Accepted Answer · 2014-03-21T07:18:03

May be the reason is , panel doesnot contain a default contextMenu event.

But you are defining a contextMenu by using the on on the panel.

For this issue you can define a click event for the panel by using the same on config and check whether the object contextMenu is present or not.

If it is present , then hide the contextMenu by using contextMenuObject.hide().

ExtJS 4 - how to hide context menu when left clicking the Ext.panel.Panel?

1 Answers