Open ExtJs Menu on Mouseover

Would you believe there is no way to open an ExtJs toolbar menu when you hover over the corresponding button? This functionality is all over the ExtJs homepage, but not in their framework. Boo! Nope, nothing without pulling the buttons out of the toolbar (see here), which is a no go for existing applications.

So, I present you with the HoverButton. It is just like the standard button, but hides after 250ms of mouseout from the button or the opened menu. Just use the xtype of hoverButton where you used button before. That was easy!

To achieve this, listeners check for mouseover/out of the button and set a Ext.util.DelayedTask, and if the user moves to the menulist, the close is delayed until they leave. Pretty simple. Enjoy.

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

    // 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 : {
                        fn: function(b) {
                            //console.log('menutriggerOver');
                            b.showMenu();
                        },
                        scope:this
                    },
                    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);
    }
});
Ext.reg('hoverButton', Ext.HoverButton );