MenuButton.js

/**
 * @class Ext.MenuButton
 * @extends Ext.Button
 * Simple Button class
 * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
 * @cfg {String} arrowTooltip The title attribute of the arrow
 * @constructor
 * Create a new menu button
 * @param {String/HTMLElement/Element} renderTo The element to append the button to
 * @param {Object} config The config object
 */
Ext.MenuButton = function(renderTo, config){
    Ext.MenuButton.superclass.constructor.call(this, renderTo, config);
    /**
     * @event arrowclick
     * Fires when this arrow is clicked
     * @param {Button} this
     * @param {EventObject} e The click event
     */
    this.events['arrowclick'] = true;
};

Ext.extend(Ext.MenuButton, Ext.Button, {
    render : function(renderTo){
        // this is one sweet looking template!
        var tpl = new Ext.Template(
            '<table cellspacing="0" class="x-btn-menu-wrap"><tr><td>',
            '<a href="#" class="x-btn-focus x-btn-menu-text-focus" title="{1:htmlEncode}">',
            '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
            '<tr><td class="x-btn-left">&#160;</td><td class="x-btn-center"><span class="x-btn-text" unselectable="on">{0}</span></td></tr>',
            '</tbody></table></a></td><td>',
            '<a href="#" class="x-btn-focus x-btn-menu-arrow-focus" title="{2:htmlEncode}">',
            '<table cellspacing="0" class="x-btn-wrap  x-btn-menu-arrow-wrap"><tbody>',
            '<tr><td class="x-btn-center" unselectable="on"><span>&#160;</span></td><td class="x-btn-right">&#160;</td></tr>',
            '</tbody></table></a></td></tr></table>'
        );
        var btn = tpl.append(renderTo, [this.text, this.tooltip || '', this.arrowTooltip || ''], true);
        if(this.cls){
            btn.addClass(this.cls);
        }
        this.el = btn;
        this.autoWidth();
        btn.addClass('x-btn');
        btn.on('click', this.onClick, this);
        btn.on('mouseover', this.onMouseOver, this);
        btn.on('mouseout', this.onMouseOut, this);
        btn.on('mousedown', this.onMouseDown, this);
        btn.on('mouseup', this.onMouseUp, this);
        if(this.hidden){
            this.hide();
        }
        if(this.disabled){
            this.disable();
        }
        if(this.menu){
            this.menu.on('show', this.onMenuShow, this);
            this.menu.on('hide', this.onMenuHide, this);
        }
    },
    
    autoWidth : function(){
        if(this.el){
            var tbl = this.el.child('table:first');
            var tbl2 = this.el.child('table:last');
            this.el.setWidth('auto');
            tbl.setWidth('auto');
            if(this.minWidth){
                if(this.hidden){
                    this.el.beginMeasure();
                }
                if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
                    tbl.setWidth(this.minWidth-tbl2.getWidth());
                }
                if(this.hidden){
                    this.el.endMeasure();
                }
            }
            this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
        } 
    },
    /**
     * Sets this button's click handler
     * @param {Function} handler The function to call when the button is clicked
     * @param {Object} scope (optional) Scope for the function passed above
     */
    setHandler : function(handler, scope){
        this.handler = handler;
        this.scope = scope;  
    },
    
    /**
     * Sets this button's arrow click handler
     * @param {Function} handler The function to call when the arrow is clicked
     * @param {Object} scope (optional) Scope for the function passed above
     */
    setArrowHandler : function(handler, scope){
        this.arrowHandler = handler;
        this.scope = scope;  
    },
    
    /**
     * Focus the button
     */
    focus : function(){
        this.el.child('a:first').focus();    
    },
    
    onClick : function(e){
        e.preventDefault();
        if(!this.disabled){
            if(e.getTarget('.x-btn-menu-arrow-wrap') || e.getTarget('.x-btn-menu-arrow-focus')){
                if(this.menu && !this.menu.isVisible()){
                    this.menu.show(this.el, this.menuAlign);
                }
                this.fireEvent('arrowclick', this, e);
                if(this.arrowHandler){
                    this.arrowHandler.call(this.scope || this, this, e);
                }
            }else{
                this.fireEvent('click', this, e);
                if(this.handler){
                    this.handler.call(this.scope || this, this, e);
                }
            }
        }
    },
    onMouseDown : function(e){
        if(!this.disabled){
            Ext.fly(e.getTarget('table')).addClass('x-btn-click');
        }
    },
    onMouseUp : function(e){
        Ext.fly(e.getTarget('table')).removeClass('x-btn-click');
    }   
});

yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.