ExtJS 4.1 "HoverButton" extension issue - button

Question

I am working on an extension of Ext.Button that enables the showing/hiding of a button's menu on mouseover/mouseout. It is working perfectly for the button's immediate child menu, however I am running into an issue with having it behave properly for any secondary/tertiary/ect menus.
Right now, when the user moves over am item in the top menu that contains a menu, it will open the menu and the user can move the cursor into it with no problems, everything will stay open. If the user then moves the cursor out of the secondary menu into open space, all menus will close which is correct as well. BUT, sometimes if a user moves into a secondary menu, and then back into its parent menu, all the menus will close, which isn't what should happen, at the very least that parent menu that the cursor is now over should remain open.
From my initial debugging it looks to be an issue with how the events are firing, and their timing. It appears that the mouseenter event for a parent menu does not fire when moving from a child menu back into the parent menu. And secondly it looks to me like the the menu mouseover event does not fire reliably enough or often enough for it to cancel the delayed hide task after a mouseleave event on a child menu has fired.
Demo of the issue: http://qs1724.pair.com/users/autod1nx/EMPLOYEE/BDAMI/hoverbutton/index.html
And here's the code, does anything fundamentally wrong with it stand out?
Ext.define('Ext.HoverButton', {
extend: 'Ext.Button',
alias: 'widget.hoverButton',
isOver: false,
hideDelay: 250,
showDelay: 200,
applyListeners: function(menu, cfg) {
Ext.apply(menu, cfg);
Ext.each(menu.items, function(item, idx, allItems) {
if(item.menu) this.applyListeners(item.menu, cfg);
}, this);
},
initComponent: function() {
var config = {},
menuConfig = {},
me = this;
me.delayedShowMenu = new Ext.util.DelayedTask(function() {
if(!me.isOver) return;
me.showMenu();
}, this);
me.delayedHideMenu = new Ext.util.DelayedTask(function() {
if(me.isOver) return;
me.hideMenu();
});
if(Ext.isDefined(this.initialConfig.menu)) {
config = {
listeners: {
mouseover: {
scope: me,
fn: function(b) {
me.isOver = true;
me.delayedShowMenu.delay(me.showDelay);
}
},
mouseout: {
scope: me,
fn: function(b) {
me.isOver = false;
me.delayedHideMenu.delay(me.hideDelay);
}
}
}
};
menuConfig = {
listeners: {
mouseover: {
scope: me,
fn: function(menu, item, e) {
me.delayedHideMenu.cancel();
}
},
mouseenter: {
scope: me,
fn: function(menu, e) {
me.delayedHideMenu.cancel();
}
},
mouseleave: {
scope: me,
fn: function(menu, e) {
me.delayedHideMenu.delay(me.hideDelay);
}
}
}
};
//apply mouseover/leave listeners to all submenus recursively
me.applyListeners(me.menu, menuConfig);
}
Ext.apply(me, Ext.apply(me.initialConfig, config));
Ext.HoverButton.superclass.initComponent.apply(me, arguments);
}
});

Answer 1

I found this one works, and more simple.
Ext.define('Ext.HoverButton', {
extend : 'Ext.Button',
alias : 'widget.hoverButton',
listeners : {
mouseover : function() {
this.showMenu();
},
menushow : function() {
this.mouseLeaveMonitor = this.menu.el.monitorMouseLeave(100, this.hideMenu, this);
},
destroy : function(combo) {
combo.menu.el.un(combo.mouseLeaveMonitor);
}
}
});

Answer 2

I've been doing something a bit similar and I've solved the problem after taking a peek at http://www.quirksmode.org/dom/events/mouseover.html
It seems that DOM's event order should be mouseover -> mouseenter -> mouseout -> mouseleave which means that sometimes the cancel() will be called before the delay() is set. To solve the problem I keep the last entered in a variable:
mouseenter: {
scope: me,
fn: function(menu, e) {
presentlyInside = menu; /* << */
me.delayedHideMenu.cancel();
}
},
mouseleave: {
scope: me,
fn: function(menu, e) {
if(presentlyInside==menu) /* << */
me.delayedHideMenu.delay(me.hideDelay);
}
}
Hope it helps!