javascript - ExtJS xtype 菜单在 Chrome 中超时

Question

我有一个 ExtJS 应用程序，它使用 xtype 菜单创建一个带有两个选项的下拉菜单。其中一个选项在鼠标悬停时会弹出两个额外的子选项。当尝试将鼠标悬停在其中一个子选项上时，菜单会立即超时并消失。

这只发生在 Chrome 中。 Safari 很好。此外，如果我使用键盘箭头进行选择，它也可以正常工作。

Ext.define('App.view.deposit.ReportButton', {
extend: 'Ext.button.Button',
alias: 'widget.depositreporbutton',
requires: [
    'Ext.menu.Menu',
    'Ext.menu.Separator'
],
text: 'Reports',
initComponent: function() {
    var me = this;
    Ext.applyIf(me, {
        menu: {
            xtype: 'menu',
            minWidth: 200,
            items: [
                {
                    text: 'Deposit Report',
                    menu: {
                        items: [
                            {
                                xtype: 'menuitem',
                                itemId: 'deposit-report-media-button',
                                text: 'By Media Type'
                            },
                            {
                                xtype: 'menuitem',
                                itemId: 'deposit-report-fund-button',
                                text: 'By Income Fund'
                            }
                        ]
                    }
                },
                {
                    xtype: 'menuitem',
                    itemId: 'receipt-report-button',
                    text: 'Contribution Receipts'
                }
            ]
        }
    });
    me.callParent(arguments);
}
});

Answer 1

如果您使用的是 extjs 4.x，则 Chrome 43 更新和 4.x 系列存在问题。

这是错误线程:https://www.sencha.com/forum/showthread.php?301116-Submenus-disappear-in-Chrome-43-beta

这是一个带有修复的公告:https://www.sencha.com/forum/announcement.php?a=58

这是官方修复:

Ext.define('Override.menu.Menu', {
    override: 'Ext.menu.Menu',

    compatibility : '4',

    onMouseLeave: function(e) {
        var me = this;

        // If the mouseleave was into the active submenu, do not dismiss
        if (me.activeChild) {
            if (e.within(me.activeChild.el, true)) {
                return;
            }
        }
        me.deactivateActiveItem();
        if (me.disabled) {
            return;
        }
        me.fireEvent('mouseleave', me, e);
    }
});

您可以在这里试用:https://fiddle.sencha.com/#fiddle/ndn

在您的应用程序中使用覆盖:

1. 将覆盖文件放在根文件夹的 overrides 目录中

2. 将此添加到 app.js 文件:

   Ext.Loader.setConfig({
       paths: {
           'Overrides': 'overrides'
       }
   });
   

3. 在 Ext.Define 部分下的 Application.js 文件中添加 requires 语句:

   Ext.define('Your.Application', {
       name: 'App',
       extend: 'Ext.app.Application',
       ...
       requires: [
           'overrides.Menu'
       ]
   });