Page 1 of 3 123 LastLast
Results 1 to 10 of 24

Thread: Button menu show on mouseover and hide on mouseout?

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Location
    Germany
    Posts
    17

    Default Button menu show on mouseover and hide on mouseout?

    I want to create a menu on a button, which is shown on mouseover and hidden on mouseout. I tried this one:

    Code:
     myButton.getEl().on({
                            mouseover: function(){
                                        if(!this.hasVisibleMenu())
                                        {
                                            this.showMenu();
                                        }
                            },
                            mouseout: function(){
                                        if (this.hasVisibleMenu())
                                        {
                                            this.hideMenu();
                                        }
                            },
                            scope: myButton
                        });
    But it does not work correctly, because if I want to select a element of the menu the menu disappears. I have no chance to select an menu element, because the button mouseout event is triggered before I can click on a menu element.

    What can I do? Is there another possibility?

    I'm using ExtJs 2.3

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    It's a bit more work:
    Code:
    var btn = new Ext.Button({
        text: 'Button',
        menu: new Ext.menu.Menu({
            items: [{
                text: 'Menu'
            }],
            listeners: {
                mouseover: function(){
                    hideTask.cancel();
                },
                mouseout: function(){
                    hideTask.delay(250);
                }
            }
        }),
        listeners: {
            mouseover: function(){
                hideTask.cancel();
                if(!this.hasVisibleMenu()){
                    this.showMenu();
                }
            },
            mouseout: function(){
                hideTask.delay(250);
            }
        },
        renderTo: Ext.getBody()
    });
    var hideTask = new Ext.util.DelayedTask(btn.hideMenu, btn);

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Location
    Germany
    Posts
    17

    Default

    Thanks, it works really good!

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Location
    Germany
    Posts
    17

    Default

    I have a problem with submenus:

    If my menu has a submenu the main/parent menu disappears if I make a mouseover on an element in the submenu.

    I tried the same listeners as in the main menu but it doesn't work.
    Which listeners must I set to the submenu?

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    What have you tried so far (post your code)?

  6. #6
    Sencha User
    Join Date
    Jul 2009
    Location
    Germany
    Posts
    17

    Default

    I tried simply:

    Code:
    mySubMenu.addListener('mouseover', function () { this.parentMenu.show(); this.show(); });
    I don't know how to invoke the HideTask.cancel(); inside of the submenu, because I generate many submenus in a loop and assign them to buttons.

    Edit: I also tried to invoke the HideTask.cancel() by defining the HideTask variable in the global scope to execute this:

    Code:
    mySubMenu.addListener('mouseover', function () { HideTask.cancel(); });
    But it also doesn't work.

  7. #7
    Sencha User
    Join Date
    Jul 2009
    Location
    Germany
    Posts
    17

    Default

    Has no one an idea?

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    You just have to replicate the same concept for the submenu:
    Code:
    var btn = new Ext.Button({
        text: 'Button',
        menu: new Ext.menu.Menu({
            items: [{
                text: 'Menu',
                menu: new Ext.menu.Menu({
                    items: [{
                        text: 'Submenu'
                    }],
                    listeners: {
                        mouseover: function(){
                            hideTask.cancel();
                        },
                        mouseout: function(){
                            hideTask.delay(250);
                        }
                    }
                })
            }],
            listeners: {
                mouseover: function(){
                    hideTask.cancel();
                },
                mouseout: function(){
                    hideTask.delay(250);
                }
            }
        }),
        listeners: {
            mouseover: function(){
                hideTask.cancel();
                if(!this.hasVisibleMenu()){
                    this.showMenu();
                }
            },
            mouseout: function(){
                hideTask.delay(250);
            }
        },
        renderTo: Ext.getBody()
    });
    var hideTask = new Ext.util.DelayedTask(btn.hideMenu, btn);

  9. #9
    Sencha User
    Join Date
    Jul 2009
    Location
    Germany
    Posts
    17

    Default

    Thanks Condor, but why doesn't work this one:
    I want to create a function, which automatically adds the events (because I have many menus).
    I tried to use Menu.getEl() to add the listener to the sub menu, but it doesn't work

    Code:
    function addButtonMenuListener(Button, Menu)
    {
        var Delay = 250;
        Menu.addListener('mouseover', function () { HideTask.cancel();     });
        Menu.addListener('mouseout',  function () { HideTask.delay(Delay); });
        
        Menu.getEl().addListener('mouseover', function () { HideTask.cancel();     });
        Menu.getEl().addListener('mouseout',  function () { HideTask.delay(Delay); });
        
        Button.addListener('mouseover', function ()
                                        {
                                            HideTask.cancel();
                                            if (!this.hasVisibleMenu())
                                            {
                                                this.showMenu();
                                            }
                                        });
        Button.addListener('mouseout', function () { HideTask.delay(Delay); });
        var HideTask = new Ext.util.DelayedTask(Button.hideMenu, Button);
        return HideTask;
    }

  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Try:
    Code:
    var addButtonMouseOver = function(button){
        var hideTask = new Ext.util.DelayedTask(button.hideMenu, button);
        button.on({
            mouseover: function(){
                hideTask.cancel();
                if(!this.hasVisibleMenu()){
                    this.showMenu();
                }
            },
            mouseout: function(){
                hideTask.delay(250);
            }
        });
        var addMenuMouseOver = function(menu){
            menu.on({
                mouseover: function(){
                    hideTask.cancel();
                },
                mouseout: function(){
                    hideTask.delay(250);
                }
            });
            menu.items.each(function(item){
                if(item.menu){
                    addMenuMouseOver(item.menu);
                }
            });
        };
        addMenuMouseOver(button.menu);
    };

Page 1 of 3 123 LastLast

Posting Permissions

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