1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    prashant_hembrom is on a distinguished road

      0  

    Default How to hide context menu of a button on mouseout event on menu

    How to hide context menu of a button on mouseout event on menu


    I am trying to use following code to hide the menu associated to a button. I am not sure how to bind it to the menu component. Will appreciate if anybody can help me out.

    Ext.create('Ext.Button', {
    text : 'Menu button',
    renderTo : Ext.getBody(),
    arrowAlign: 'right',
    menu : [
    {text: 'Item 1'},
    {text: 'Item 2'},
    {text: 'Item 3'},
    {text: 'Item 4'}
    ],
    listeners: {
    mouseout: {
    element: 'el',//Which element to use here if i want to bind mouseout to button's menu
    fn: function(){ alert('on mouse out'); } // How to hide menu here
    }
    }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You would need to put the mouseout on the menu correct?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    And it would need to be "mouseleave" because mouseout events bubble up from all levels.

    Code:
    Ext.create('Ext.Button', {
        text : 'Menu button',
        renderTo : Ext.getBody(),
        arrowAlign: 'right',
        menu : {
            items: [
                {text: 'Item 1'},
                {text: 'Item 2'},
                {text: 'Item 3'},
                {text: 'Item 4'}
            ],
            listeners: {
                mouseleave: {
                    element: 'el',
                    fn: function(){
                        this.hide(); // The owning Component is the default scope
                    }
                 }
            }
        }
    });

Thread Participants: 2

Tags for this Thread