singleton menu panel not working in extjs 5

Question

I was working with extjs 4 where i created the menu panels using singleton pattern for number of toolbars and it work well, but when i moved my application from extjs 4 to extjs 5 it stop to work, means the menu panel get hidden when mouse move over it. I have created one sample example on fiddle please give me some solution over this problem. fiddle link: singleton menu panel example

Thanks, Sandy

Answer 1

In Ext JS 5 menus seem to be linked to their owner components (eg button) and cannot be shared between owners. This is why, in your example, the issue happens on the 1st and 2nd panel only but not the last one (3rd) — its button becomes the "legal" owner of the menu and hence it works fine under there.

There is actually no need to share the menu in your example. Instead of repeating the same code three times, leave just one docked toolbar, use the menu in only one place and make it all smarter. See example: https://fiddle.sencha.com/#fiddle/s1b

UPDATE

If sharing the menu between buttons is a requirement, it can be achieved by using custom button that forcibly makes sure that its menu belongs to itself on each menu show request:

Ext.define('SharingMenuButton', {
    extend: 'Ext.button.Button',
    alias: 'widget.sharingmenubutton',
    showMenu: function() {
        if (this.menu.ownerCmp !== this) {
            this.setMenu(this.menu, false);
        }
        return this.callParent(arguments);
    }
});

See your example working with that in place: https://fiddle.sencha.com/#fiddle/s1g