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

Question

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

谢谢，桑迪

Answer 1

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

在你的例子中实际上不需要共享菜单。不要重复相同的代码三次，只保留一个停靠工具栏，只在一个位置使用菜单，并使它更智能。参见示例：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

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

singleton menu panel not working in extjs 5

javascript

extjs

menu

extjs4

extjs5