HoverButton

I found a nice hoverbutton extension at :

http://www.lustforge.com/2011/07/06/open-extjs-menu-on-mouseover/

It extends the button class so that a mouseover will cause the menu to expand. I updated for Extjs 4.0. I also found that the expand would only work when mousing over the down-arrow icon so I modified it to use 'mouseover' and 'mouseout' events. This now allows the menu to expand when the mouse is anywhere over the button.

/**
* Add autoShow on mouseover option to buttons with menus
* @copyright LustForge.com 2011
* @author J.Lust
* @version ExtJs 3.3.4
*/
Ext.define('Ext.HoverButton', {
    extend: 'Ext.Button',
    alias: 'widget.hoverButton',


    // hide task properties and helpers
    hideTask: null,
    hideTaskMs: 250, // timeout in ms
    hideTaskFn: function () {
        if (this.hideTask !== null) {
            this.hideTask.cancel();
        }
        this.hideTask = new Ext.util.DelayedTask(this.hideMenu, this);
        this.hideTask.delay(this.hideTaskMs);
    },


    // extend init props
    initComponent: function () {


        // add hide/show, if this is a button with menu
        var config = {}, menuConfig = {};
        if (Ext.isDefined(this.initialConfig.menu)) {
            config = {
                listeners: {
                    //    menutriggerover: {
                    mouseover: {
                        fn: function (b) {
                            // console.log('menutriggerOver');
                            b.showMenu();
                        },
                        scope: this
                    },
                    mouseout: {
                        // menutriggerout: {
                        fn: function (b) {
                            //  console.log('menutriggerOut');
                            this.hideTaskFn();
                        },
                        scope: this
                    }
                }
            };
            // add listeners to see if user is over extended menu list
            menuConfig = {
                listeners: {
                    // if mousing over menu list, disable timeout
                    mouseover: {
                        fn: function (b) {
                            // cancel hide if they went away and came back
                            if (this.hideTask !== null) {
                                //       console.log('menu mouseOver');
                                this.hideTask.cancel();
                                this.hideTask = null;
                            }
                        },
                        scope: this
                    },
                    // on mousing out of menu list, resume timeout
                    mouseout: {
                        fn: function (b) {
                            //    console.log('menu mouseOut');
                            this.hideTaskFn();
                        },
                        scope: this
                    }
                }
            };


            Ext.apply(this.menu, menuConfig);
        }


        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        // call parent
        Ext.HoverButton.superclass.initComponent.apply(this, arguments);
    }
});

I use it as a 'more' dropdown box in my toolbar as follows:

, {
text: 'More',
xtype: 'hoverButton',
menu: {
     xtype: 'menu',
items: {
xtype: 'buttongroup',
columns: 1,
defaults: {
xtype: 'button',
scale: 'large',
iconAlign: 'left'
},
items: [
{
text: 'option1',
cls: 'x-btn-text-icon',
etc......

Buttongroup menu hiding

One unique behaviour of a buttongroup in a menu is that it will not 'hide' or collapse until the user clicks elsewhere. So how do you hide the buttongroup? Easy once you know how. Just do this call:

Ext.menu.Manager.hideAll();

This will hide all open menus.