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

[prashant_hembrom]

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
}
}
});

[mitchellsimoens]

You would need to put the mouseout on the menu correct?

[Animal]

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

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
                }
             }
        }
    }
});