Q:

ExtJS xtype menu times out in Chrome

I have a an ExtJS app that uses xtype menu to create a dropdown menu with two options. One of those options, on mouseover, brings up two additional sub options. When attempting to mouseover one of the sub options, the menu immediately times out and disappears. 
This only happens in Chrome. Safari is fine. Also if I use the keyboard arrows to make the selection it works fine.
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);
}
});

A:

If you're using extjs 4.x there is an issue with the Chrome 43 updates and the 4.x series.
Here's the bug thread: https://www.sencha.com/forum/showthread.php?301116-Submenus-disappear-in-Chrome-43-beta
Here is an announcement with a fix here: https://www.sencha.com/forum/announcement.php?a=58 
Here's the official fix:
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);
    }
});

You can try it out here: https://fiddle.sencha.com/#fiddle/ndn
To use the override in your application:

Put the override file in the overrides directory off the root folder
Add this to the app.js file:

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

Add the requires statement in the Application.js file under the Ext.Define section:

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

