Question

I have a Menu that contains a TreePanel. The users need to be able to interact with a the TreePanel’s nodes using a context menu. I’m showing the context menu from a function attached to the TreePanel’s contextmenu event.

This works except:

1. Without allowOtherMenus: true, showing the context menu causes the main menu, and therefore the TreePanel, to disappear ;
2. With allowOtherMenus: true on either menu, the context menu doesn’t disappear when the users clicks a blank area of the TreePanel.

I’m looking for a way to have the context menu to work as if the TreePanel were not an item within a menu.

Mockup :

Answer 1

I found this that seems to work on FF3/IE8/Chrome, although it could have side effects that have not shown up yet.

var hide_context_menu = function () { context_menu.hide() };

var context_menu = new Ext.menu.Menu({
    allowOtherMenus: true,
    items: [...],
    listeners: {
        show: function () {
            Ext.getDoc().on('mouseup', hide_context_menu);
        },
        hide: function () {
            Ext.getDoc().un('mouseup', hide_context_menu);
        }
    }
});

allowOtherMenus: true prevents the hiding of the main menu by the MenuMgr when the context menu pops up. Hiding the handler to the mouseup event allows for click events to be processed.