javascript - 单例菜单面板在 extjs 5 中不起作用

Question

我正在使用 extjs 4，其中我使用单例模式为工具栏数量创建了菜单面板，它运行良好，但是当我将应用程序从 extjs 4 移动到 extjs 5 时，它停止工作，意味着菜单面板被隐藏当鼠标移到它上面时。我在 fiddle 上创建了一个示例，请给我一些解决这个问题的方法。 fiddle 链接:singleton menu panel example

谢谢， 桑迪

Answer 1

在 Ext JS 5 中，菜单似乎链接到其所有者组件(例如按钮)，并且不能在所有者之间共享。这就是为什么在您的示例中，问题仅发生在第一个和第二个面板上，而不是最后一个(第三个)面板上 - 它的按钮成为菜单的“合法”所有者，因此它在此处工作正常。

实际上没有必要在您的示例中共享菜单。不要重复相同的代码三次，只需保留一个停靠工具栏，仅在一个位置使用菜单，让一切变得更加智能。参见示例:https://fiddle.sencha.com/#fiddle/s1b

更新

如果需要在按钮之间共享菜单，可以通过使用自定义按钮来实现，该按钮在每个菜单显示请求上强制确保其菜单属于其自身:

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);
    }
});

查看您使用该示例的示例:https://fiddle.sencha.com/#fiddle/s1g