# Button.js

    /**
     * @class Ext.Button
     * @extends Ext.util.Observable
     * Simple Button class
     * @cfg {String} text The button text
     * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
     * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
     * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
     * @cfg {Object} scope The scope of the handler
     * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
     * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
     * @cfg {Boolean} hidden True to start hidden (defaults to false)
     * @cfg {Boolean} disabled True to start disabled (defaults to false)
     * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
     * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
     * applies if enableToggle = true)
     * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
      an {@link Ext.util.ClickRepeater} config object (defaults to false).
     * @constructor
     * Create a new button
     * @param {String/HTMLElement/Element} renderTo The element to append the button to
     * @param {Object} config The config object
     */
    Ext.Button = function(renderTo, config){
        Ext.apply(this, config);
        this.addEvents({
            /**
    	     * @event click
    	     * Fires when this button is clicked
    	     * @param {Button} this
    	     * @param {EventObject} e The click event
    	     */
    	    "click" : true,
            /**
    	     * @event toggle
    	     * Fires when the "pressed" state of this button changes (only if enableToggle = true)
    	     * @param {Button} this
    	     * @param {Boolean} pressed
    	     */
    	    "toggle" : true,
            /**
    	     * @event mouseover
    	     * Fires when the mouse hovers over the button
    	     * @param {Button} this
    	     * @param {Event} e The event object
    	     */
            'mouseover' : true,
            /**
    	     * @event mouseout
    	     * Fires when the mouse exits the button
    	     * @param {Button} this
    	     * @param {Event} e The event object
    	     */
            'mouseout': true
        });
        if(this.menu){
            this.menu = Ext.menu.MenuMgr.get(this.menu);
        }
        if(renderTo){
            this.render(renderTo);
        }
        Ext.Button.superclass.constructor.call(this);
    };

    Ext.extend(Ext.Button, Ext.util.Observable, {
        /**
         * Read-only. True if this button is hidden
         * @type Boolean
         */
        hidden : false,
        /**
         * Read-only. True if this button is disabled
         * @type Boolean
         */
        disabled : false,
        /**
         * Read-only. True if this button is pressed (only if enableToggle = true)
         * @type Boolean
         */
        pressed : false,

        /**
         * @cfg {Number} tabIndex
         * The DOM tabIndex for this button (defaults to undefined)
         */
        tabIndex : undefined,

        /**
         * @cfg {Boolean} enableToggle
         * True to enable pressed/not pressed toggling (defaults to false)
         */
        enableToggle: false,
        /**
         * @cfg {Mixed} menu
         * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
         */
        menu : undefined,
        /**
         * @cfg {String} menuAlign
         * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').
         */
        menuAlign : "tl-bl?",

        /**
         * @cfg {String} iconCls
         * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
         */
        iconCls : undefined,
        /**
         * @cfg {String} type
         * The button's type, corresponding to the DOM input element type attribute.  Either "submit," "reset" or "button" (default).
         */
        type : 'button',

        // private
        menuClassTarget: 'tr',

        /**
         * @cfg {String} clickEvent
         * The type of event to map to the button's event handler (defaults to 'click')
         */
        clickEvent : 'click',

        /**
         * @cfg {Boolean} handleMouseEvents
         * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
         */
        handleMouseEvents : true,

        /**
         * @cfg {String} tooltipType
         * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
         */
        tooltipType : 'qtip',

        /**
         * @cfg {String} cls
         * A CSS class to apply to the button's main element.
         */
    // holder
    /***
         * @cfg {Ext.Template} template (Optional)
         * An {@link Ext.Template} with which to create the Button's main element. This Template must
         * contain numeric substitution parameter 0 if it is to display the text property. Changing the template could
         * require code modifications if required elements (e.g. a button) aren't present.
         */

        // private
        render : function(renderTo){
            var btn;
            if(this.hideParent){
                this.parentEl = Ext.get(renderTo);
            }
            if(!this.dhconfig){
                if(!this.template){
                    if(!Ext.Button.buttonTemplate){
                        // hideous table template
                        Ext.Button.buttonTemplate = new Ext.Template(
                            '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
                            '<td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i>&#160;</i></td>',
                            "</tr></tbody></table>");
                    }
                    this.template = Ext.Button.buttonTemplate;
                }
                btn = this.template.append(renderTo, [this.text || '&#160;', this.type], true);
                var btnEl = btn.child("button:first");
                btnEl.on('focus', this.onFocus, this);
                btnEl.on('blur', this.onBlur, this);
                if(this.cls){
                    btn.addClass(this.cls);
                }
                if(this.icon){
                    btnEl.setStyle('background-image', 'url(' +this.icon +')');
                }
                if(this.iconCls){
                    btnEl.addClass(this.iconCls);
                    if(!this.cls){
                        btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
                    }
                }
                if(this.tabIndex !== undefined){
                    btnEl.dom.tabIndex = this.tabIndex;
                }
                if(this.tooltip){
                    if(typeof this.tooltip == 'object'){
                        Ext.QuickTips.tips(Ext.apply({
                              target: btnEl.id
                        }, this.tooltip));
                    } else {
                        btnEl.dom[this.tooltipType] = this.tooltip;
                    }
                }
            }else{
                btn = Ext.DomHelper.append(Ext.get(renderTo).dom, this.dhconfig, true);
            }
            this.el = btn;
            if(this.id){
                this.el.dom.id = this.el.id = this.id;
            }
            if(this.menu){
                this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
                this.menu.on("show", this.onMenuShow, this);
                this.menu.on("hide", this.onMenuHide, this);
            }
            btn.addClass("x-btn");
            if(Ext.isIE && !Ext.isIE7){
                this.autoWidth.defer(1, this);
            }else{
                this.autoWidth();
            }
            if(this.handleMouseEvents){
                btn.on("mouseover", this.onMouseOver, this);
                btn.on("mouseout", this.onMouseOut, this);
                btn.on("mousedown", this.onMouseDown, this);
            }
            btn.on(this.clickEvent, this.onClick, this);
            //btn.on("mouseup", this.onMouseUp, this);
            if(this.hidden){
                this.hide();
            }
            if(this.disabled){
                this.disable();
            }
            Ext.ButtonToggleMgr.register(this);
            if(this.pressed){
                this.el.addClass("x-btn-pressed");
            }
            if(this.repeat){
                var repeater = new Ext.util.ClickRepeater(btn,
                    typeof this.repeat == "object" ? this.repeat : {}
                );
                repeater.on("click", this.onClick,  this);
            }
        },
        /**
         * Returns the button's underlying element
         * @return {Ext.Element} The element
         */
        getEl : function(){
            return this.el;
        },

        /**
         * Destroys this Button and removes any listeners.
         */
        destroy : function(){
            Ext.ButtonToggleMgr.unregister(this);
            this.el.removeAllListeners();
            this.purgeListeners();
            this.el.remove();
        },

        // private
        autoWidth : function(){
            if(this.el){
                this.el.setWidth("auto");
                if(Ext.isIE7 && Ext.isStrict){
                    var ib = this.el.child('button');
                    if(ib && ib.getWidth() > 20){
                        ib.clip();
                        ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
                    }
                }
                if(this.minWidth){
                    if(this.hidden){
                        this.el.beginMeasure();
                    }
                    if(this.el.getWidth() < this.minWidth){
                        this.el.setWidth(this.minWidth);
                    }
                    if(this.hidden){
                        this.el.endMeasure();
                    }
                }
            }
        },

        /**
         * Assigns 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 in
         */
        setHandler : function(handler, scope){
            this.handler = handler;
            this.scope = scope;
        },

        /**
         * Sets this button's text
         * @param {String} text The button text
         */
        setText : function(text){
            this.text = text;
            if(this.el){
                this.el.child("td.x-btn-center button.x-btn-text").update(text);
            }
            this.autoWidth();
        },

        /**
         * Gets the text for this button
         * @return {String} The button text
         */
        getText : function(){
            return this.text;
        },

        /**
         * Show this button
         */
        show: function(){
            this.hidden = false;
            if(this.el){
                this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
            }
        },

        /**
         * Hide this button
         */
        hide: function(){
            this.hidden = true;
            if(this.el){
                this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
            }
        },

        /**
         * Convenience function for boolean show/hide
         * @param {Boolean} visible True to show, false to hide
         */
        setVisible: function(visible){
            if(visible) {
                this.show();
            }else{
                this.hide();
            }
        },

        /**
         * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
         * @param {Boolean} state (optional) Force a particular state
         */
        toggle : function(state){
            state = state === undefined ? !this.pressed : state;
            if(state != this.pressed){
                if(state){
                    this.el.addClass("x-btn-pressed");
                    this.pressed = true;
                    this.fireEvent("toggle", this, true);
                }else{
                    this.el.removeClass("x-btn-pressed");
                    this.pressed = false;
                    this.fireEvent("toggle", this, false);
                }
                if(this.toggleHandler){
                    this.toggleHandler.call(this.scope || this, this, state);
                }
            }
        },

        /**
         * Focus the button
         */
        focus : function(){
            this.el.child('button:first').focus();
        },

        /**
         * Disable this button
         */
        disable : function(){
            if(this.el){
                this.el.addClass("x-btn-disabled");
            }
            this.disabled = true;
        },

        /**
         * Enable this button
         */
        enable : function(){
            if(this.el){
                this.el.removeClass("x-btn-disabled");
            }
            this.disabled = false;
        },

        /**
         * Convenience function for boolean enable/disable
         * @param {Boolean} enabled True to enable, false to disable
         */
        setDisabled : function(v){
            this[v !== true ? "enable" : "disable"]();
        },

        // private
        onClick : function(e){
            if(e){
                e.preventDefault();
            }
            if(e.button != 0){
                return;
            }
            if(!this.disabled){
                if(this.enableToggle){
                    this.toggle();
                }
                if(this.menu && !this.menu.isVisible()){
                    this.menu.show(this.el, this.menuAlign);
                }
                this.fireEvent("click", this, e);
                if(this.handler){
                    this.el.removeClass("x-btn-over");
                    this.handler.call(this.scope || this, this, e);
                }
            }
        },
        // private
        onMouseOver : function(e){
            if(!this.disabled){
                this.el.addClass("x-btn-over");
                this.fireEvent('mouseover', this, e);
            }
        },
        // private
        onMouseOut : function(e){
            if(!e.within(this.el,  true)){
                this.el.removeClass("x-btn-over");
                this.fireEvent('mouseout', this, e);
            }
        },
        // private
        onFocus : function(e){
            if(!this.disabled){
                this.el.addClass("x-btn-focus");
            }
        },
        // private
        onBlur : function(e){
            this.el.removeClass("x-btn-focus");
        },
        // private
        onMouseDown : function(e){
            if(!this.disabled && e.button == 0){
                this.el.addClass("x-btn-click");
                Ext.get(document).on('mouseup', this.onMouseUp, this);
            }
        },
        // private
        onMouseUp : function(e){
            if(e.button == 0){
                this.el.removeClass("x-btn-click");
                Ext.get(document).un('mouseup', this.onMouseUp, this);
            }
        },
        // private
        onMenuShow : function(e){
            this.el.addClass("x-btn-menu-active");
        },
        // private
        onMenuHide : function(e){
            this.el.removeClass("x-btn-menu-active");
        }
    });

    // Private utility class used by Button
    Ext.ButtonToggleMgr = function(){
       var groups = {};

       function toggleGroup(btn, state){
           if(state){
               var g = groups[btn.toggleGroup];
               for(var i = 0, l = g.length; i < l; i++){
                   if(g[i] != btn){
                       g[i].toggle(false);
                   }
               }
           }
       }

       return {
           register : function(btn){
               if(!btn.toggleGroup){
                   return;
               }
               var g = groups[btn.toggleGroup];
               if(!g){
                   g = groups[btn.toggleGroup] = [];
               }
               g.push(btn);
               btn.on("toggle", toggleGroup);
           },

           unregister : function(btn){
               if(!btn.toggleGroup){
                   return;
               }
               var g = groups[btn.toggleGroup];
               if(g){
                   g.remove(btn);
                   btn.un("toggle", toggleGroup);
               }
           }
       };
    }();

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.