1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    31
    Vote Rating
    0
    mimmo.rossi73 is on a distinguished road

      0  

    Default [SOLVED] Menu Problem when mouseout

    [SOLVED] Menu Problem when mouseout


    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

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    31
    Vote Rating
    0
    mimmo.rossi73 is on a distinguished road

      0  

    Default [SOLVED]

    [SOLVED]


    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.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    31
    Vote Rating
    0
    mimmo.rossi73 is on a distinguished road

      0  

    Default Best Solution

    Best Solution


    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.

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    31
    Vote Rating
    0
    mimmo.rossi73 is on a distinguished road

      0  

    Default [SOLVED] Best Solution part 2: final

    [SOLVED] Best Solution part 2: final


    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