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

要在您的应用程序中使用覆盖：

将覆盖文件放在根文件夹

overrides

将其添加到app.js文件中：

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

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

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

ExtJS xtype菜单在Chrome中超时

1 个答案: