Results 1 to 4 of 4

Thread: [SOLVED] Menu Problem when mouseout

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    35
    Vote Rating
    0
      0  

    Default [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
    35
    Vote Rating
    0
      0  

    Default [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
    35
    Vote Rating
    0
      0  

    Default 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
    35
    Vote Rating
    0
      0  

    Default [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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •