[SOLVED] Menu Problem when mouseout

[mimmo.rossi73]

Hi All,
when i move out a mouse from a menu, this not disappear; it do it only if i click outside the menu or if i open another menu.
I try to use onmouseout event on menu, but it is invoked for all items child and not when the mouse exit from the menu (that is container of all items) such as is write in Menu.js:
/**
* @event mouseout
* Fires when the mouse exits this menu
* @param {Ext.menu.Menu} this
* @param {Ext.EventObject} e
* @param {Ext.menu.Item} menuItem The menu item that was clicked
*/
Can someone help me?
Thanks in advance

[mimmo.rossi73]

Hi,
i solved in this way:
i define this function
function hideMenu(menu){
try{
if (!menu.activeItem){
menu.hide();
}
} catch (e){}
}
and then i isnert this event on my menu
,listeners:{
mouseout : function (_this, eventObject, menuItem){
setTimeout(function(){hideMenu(_this)},10);
}
}
and work fine.

[mimmo.rossi73]

The solution that i indicated doesn't work when in a menu there is a separator becouse the activeItem ther isn't, so i worked around the problem in this way:
function hideMenu(menu){
try{
if(menu.hideM){
menu.hide();
}
} catch (e){}
}
Ext.override(Ext.menu.Menu, {
hideM:false,
onMouseOver : function(e){
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.hideM=false;
this.fireEvent("mouseover", this, e, t);
}
,onMouseOut : function(e){
var t;
if(t = this.findTargetItem(e)){
if(t == this.activeItem && t.shouldDeactivate(e)){
this.activeItem.deactivate();
delete this.activeItem;
}
}
this.hideM=true;
this.fireEvent("mouseout", this, e, t);
}
}
)

in this way work fine also with a separator.

[mimmo.rossi73]

Hi,
the previously solution doesn't work when there is more than 2 level, so i modified it in this way:
function hideMenu(menu,menuItem){
try{
if(menu.hideM){
menu.hide();
if(menuItem!=undefined && menuItem!=null && menuItem.parentMenu!=undefined && menuItem.parentMenu!=null && menuItem.parentMenu.parentMenu!=undefined && menuItem.parentMenu.parentMenu!=null) {
hideMenu(menuItem.parentMenu.parentMenu,menuItem.parentMenu.parentMenu.tempActiveItem);
}
}
} catch (e){}
}
Ext.override(
Ext.menu.Menu,
{
delayTime:300,
hideM:false,
tempActiveItem:null,
onMouseOver : function(e){
this.hideM=false;
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
try{
if(this.activeItem!=undefined && this.activeItem!=null && this.activeItem.parentMenu!=undefined && this.activeItem.parentMenu!=null && this.activeItem.parentMenu.parentMenu!=undefined && this.activeItem.parentMenu.parentMenu!=null) {
this.activeItem.parentMenu.parentMenu.hideM=false;
}
} catch(e){}
this.fireEvent("mouseover", this, e, t);
},
onMouseOut : function(e){
this.hideM=true;
var t;
if(t = this.findTargetItem(e)){
if(t == this.activeItem && t.shouldDeactivate(e)){
this.tempActiveItem= this.activeItem;
this.activeItem.deactivate();
delete this.activeItem;
}
}
try{
if(this.tempActiveItem!=undefined && this.tempActiveItem!=null && this.tempActiveItem.parentMenu!=undefined && this.tempActiveItem.parentMenu!=null && this.tempActiveItem.parentMenu.parentMenu!=undefined && this.tempActiveItem.parentMenu.parentMenu!=null) {
this.tempActiveItem.parentMenu.parentMenu.hideM=true;
}
} catch(e){}
this.fireEvent("mouseout", this, e, t);
}
}
)
and the use is this:

var menuClass = new Ext.menu.Menu({
id: 'menuClass',
items: [
{
id:"idClass1",
text: "Class 1",
handler: onItemClassClick
}, {
id:"idClass2",
text: "Class 2",
handler: onItemClassClick
}, {
id:"idClass3",
text: "Class 3",
handler: onItemClassClick
}
]
,listeners:{
mouseout : function (_this, eventObject, menuItem){
setTimeout(function(){hideMenu(_this,menuItem)},_this.delayTime);
}
}
});

var otherActionMenu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
{
id:"selectAllModel",
text: "Select All",
handler: onItemOtherActionClick
},
{
id:"deselectAllModel",
text: "Deselect All",
handler: onItemOtherActionClick
},
"-"
,{
id:'deleteAllSelectedModel',
text: 'Delete',
handler: onItemOtherActionClick
},
{
id:'moveAllSelectedModel',
text: 'Move',
menu: menuClass
}
]
,listeners:{
mouseout : function (_this, eventObject, menuItem){
setTimeout(function(){hideMenu(_this,menuItem)},_this.delayTime);
}
}
});

Hi