PDA

View Full Version : Hiding menus on mouseout



wembly71
18 Mar 2010, 10:19 AM
Good Afternoon!
I am having an issue with hiding dropdown menus when the mouse is moved off the menu. The mouseover works fine on the first level menu, but when there is a sub menu, the menu hides as soon as the DelayedTask expires even with the mouse over it.
The logic I am using, borrowed from Condor's post here...http://www.extjs.com/forum/showthread.php?t=76885…is slightly different as that person had a button at the top level.
Any Suggestions?
Thanx!
Bill



Ext.onReady(function() {
Ext.QuickTips.init();

var subMenu = new Ext.menu.Menu({
id: 'subMenu',
items: [{
id: 'allItems',
text: 'All Items'
},{
id: 'item1',
text: 'First Item',
menu: {
items: [{
id: 'LetterA',
text: 'Letter A'
},{
id: 'LetterB',
text: 'Letter B'
},{
id: 'LetterC',
text: 'Letter C'
},{
id: 'LetterD',
text: 'Letter D'
}]
}
},{
id: 'item2',
text: 'Second Item',
menu: {
items: [{
id: 'LetterE',
text: 'Letter E'
},{
id: 'LetterF',
text: 'Letter F'
},{
id: 'LetterG',
text: 'Letter G'
},{
id: 'LetterH',
text: 'Letter H'
}]
}
}]
});

var tb = new Ext.Toolbar({
id: 'tb',
height: 27,
items: [{
id: 'topMenu',
text: 'Top Menu Item',
listeners: {
mouseover: function() {
if(!this.hasVisibleMenu()){
this.showMenu();
}
}
}
}]
});

tb.render('toolbar');

var addMenuMouseOver = function(menu) {
var hideTasks = new Ext.util.DelayedTask(menu.hide, menu);

menu.on({
mouseover: function() {
hideTask.cancel();
},
mouseout: function() {
hideTask.delay(250);
}
});

menu.items.each(function(item){
if (item.menu) {
addMenuMouseOver(item.menu);
}
});
}

addMenuMouseOver(Ext.getCmp('subMenu'));
}

wembly71
19 Mar 2010, 10:39 AM
One other observation that I forgot to put in the post yesterday. When doing a console.warn to the logic that attaches the mouseover, I do see that the method was properly added, it just seems the hideTask.cancel() is either ignored or does not actually cancel the task.

As said, the logic seems to work fine when going over the menu that contains 'All Items', 'First Item'...stays open when the mouse is over it, collapses when mouse is moved onto the screen.

As it is a fairly heavily menu driven application, It is fairly important to have logic that will propagate itself well to the submenus contained, which is really nice about Condor's logic on his post. Any insight would be appreciated.

wembly71
25 Mar 2010, 10:15 AM
Appears to be a "duh..." moment on my side. As the high level item is actually part of the toolbar, it is a button, so when I went back and put all of Condor's code from the post back in, the menu behaves as it should on mouseover/mouseout. However, there is an issue, which guessing for the most part, most people are not going to run into. But if you have a huge submenu that requires scrolling, as soon as you mouseover the arrows that scroll the menu, the menu collapses.

It would seem the hideTask.cancel() needs applied to the arrow section on the menu.
Would it be an override on the menu that is necessary to place the hideTask.cancel()?

Thanx!