Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Button.html
index 3c1bda4..9b2f052 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
 </head>
 <body onload="prettyPrint(); highlight();">
   <pre class="prettyprint lang-js"><span id='Ext-button-Button'>/**
-</span> * @class Ext.button.Button
- * @extends Ext.Component
-
-Create simple buttons with this component. Customisations include {@link #iconAlign aligned}
-{@link #iconCls icons}, {@link #menu dropdown menus}, {@link #tooltip tooltips}
-and {@link #scale sizing options}. Specify a {@link #handler handler} to run code when
-a user clicks the button, or use {@link #listeners listeners} for other events such as
-{@link #mouseover mouseover}.
-
-{@img Ext.button.Button/Ext.button.Button1.png Ext.button.Button component}
-Example usage:
-
   Ext.create('Ext.Button', {
-        text: 'Click me',
-        renderTo: Ext.getBody(),        
-        handler: function() {
-            alert('You clicked the button!')
       }
-    });
-
-The {@link #handler} configuration can also be updated dynamically using the {@link #setHandler} method.
-Example usage:
-
-    Ext.create('Ext.Button', {
-        text    : 'Dyanmic Handler Button',
-        renderTo: Ext.getBody(),
-        handler : function() {
-            //this button will spit out a different number every time you click it.
-            //so firstly we must check if that number is already set:
-            if (this.clickCount) {
-                //looks like the property is already set, so lets just add 1 to that number and alert the user
-                this.clickCount++;
-                alert('You have clicked the button &quot;' + this.clickCount + '&quot; times.\n\nTry clicking it again..');
-            } else {
-                //if the clickCount property is not set, we will set it and alert the user
-                this.clickCount = 1;
-                alert('You just clicked the button for the first time!\n\nTry pressing it again..');
-            }
-        }
-    });
-
-A button within a container:
-
-    Ext.create('Ext.Container', {
-        renderTo: Ext.getBody(),
-        items   : [
-            {
-                xtype: 'button',
-                text : 'My Button'
-            }
-        ]
-    });
-
-A useful option of Button is the {@link #scale} configuration. This configuration has three different options:
-* `'small'`
-* `'medium'`
-* `'large'`
-
-{@img Ext.button.Button/Ext.button.Button2.png Ext.button.Button component}
-Example usage:
-
-    Ext.create('Ext.Button', {
-        renderTo: document.body,
-        text    : 'Click me',
-        scale   : 'large'
-    });
-
-Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`.
-{@img Ext.button.Button/Ext.button.Button3.png Ext.button.Button component}
-Example usage:
-
-    Ext.create('Ext.Button', {
-        renderTo: Ext.getBody(),
-        text: 'Click Me',
-        enableToggle: true
-    });
-
-You can assign a menu to a button by using the {@link #menu} configuration. This standard configuration can either be a reference to a {@link Ext.menu.Menu menu}
-object, a {@link Ext.menu.Menu menu} id or a {@link Ext.menu.Menu menu} config blob. When assigning a menu to a button, an arrow is automatically added to the button.
-You can change the alignment of the arrow using the {@link #arrowAlign} configuration on button.
-{@img Ext.button.Button/Ext.button.Button4.png Ext.button.Button component}
-Example usage:
-
-    Ext.create('Ext.Button', {
-        text      : 'Menu button',
-        renderTo  : Ext.getBody(),        
       arrowAlign: 'bottom',
-        menu      : [
-            {text: 'Item 1'},
           {text: 'Item 2'},
           {text: 'Item 3'},
-            {text: 'Item 4'}
-        ]
-    });
-
-Using listeners, you can easily listen to events fired by any component, using the {@link #listeners} configuration or using the {@link #addListener} method.
-Button has a variety of different listeners:
-* `click`
-* `toggle`
-* `mouseover`
-* `mouseout`
-* `mouseshow`
-* `menuhide`
-* `menutriggerover`
-* `menutriggerout`
-
-Example usage:
-
-    Ext.create('Ext.Button', {
-        text     : 'Button',
-        renderTo : Ext.getBody(),
       listeners: {
-            click: function() {
-                //this == the button, as we are in the local scope
-                this.setText('I was clicked!');
-            },
-            mouseover: function() {
-                //set a new config which says we moused over, if not already set
-                if (!this.mousedOver) {
-                    this.mousedOver = true;
-                    alert('You moused over a button!\n\nI wont do this again.');
-                }
-            }
-        }
-    });
-
- * @markdown
- * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
+</span> * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
+ *
+ * Create simple buttons with this component. Customisations include {@link #iconAlign aligned}
+ * {@link #iconCls icons}, {@link #menu dropdown menus}, {@link #tooltip tooltips}
+ * and {@link #scale sizing options}. Specify a {@link #handler handler} to run code when
+ * a user clicks the button, or use {@link #listeners listeners} for other events such as
+ * {@link #mouseover mouseover}. Example usage:
+ *
+ *     @example
+ *     Ext.create('Ext.Button', {
+ *         text: 'Click me',
+ *         renderTo: Ext.getBody(),
*         handler: function() {
+ *             alert('You clicked the button!')
+ *         }
+ *     });
+ *
* The {@link #handler} configuration can also be updated dynamically using the {@link #setHandler}
+ * method.  Example usage:
+ *
+ *     @example
+ *     Ext.create('Ext.Button', {
+ *         text    : 'Dynamic Handler Button',
+ *         renderTo: Ext.getBody(),
+ *         handler : function() {
+ *             // this button will spit out a different number every time you click it.
+ *             // so firstly we must check if that number is already set:
+ *             if (this.clickCount) {
+ *                 // looks like the property is already set, so lets just add 1 to that number and alert the user
+ *                 this.clickCount++;
+ *                 alert('You have clicked the button &quot;' + this.clickCount + '&quot; times.\n\nTry clicking it again..');
+ *             } else {
+ *                 // if the clickCount property is not set, we will set it and alert the user
+ *                 this.clickCount = 1;
+ *                 alert('You just clicked the button for the first time!\n\nTry pressing it again..');
+ *             }
+ *         }
+ *     });
+ *
+ * A button within a container:
+ *
+ *     @example
+ *     Ext.create('Ext.Container', {
+ *         renderTo: Ext.getBody(),
+ *         items   : [
+ *             {
+ *                 xtype: 'button',
+ *                 text : 'My Button'
+ *             }
+ *         ]
+ *     });
+ *
+ * A useful option of Button is the {@link #scale} configuration. This configuration has three different options:
+ *
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ *
+ * Example usage:
+ *
+ *     @example
*     Ext.create('Ext.Button', {
*         renderTo: document.body,
*         text    : 'Click me',
*         scale   : 'large'
*     });
+ *
+ * Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`.
+ * Example usage:
+ *
+ *     @example
*     Ext.create('Ext.Button', {
*         renderTo: Ext.getBody(),
*         text: 'Click Me',
*         enableToggle: true
*     });
+ *
+ * You can assign a menu to a button by using the {@link #menu} configuration. This standard configuration
+ * can either be a reference to a {@link Ext.menu.Menu menu} object, a {@link Ext.menu.Menu menu} id or a
+ * {@link Ext.menu.Menu menu} config blob. When assigning a menu to a button, an arrow is automatically
+ * added to the button.  You can change the alignment of the arrow using the {@link #arrowAlign} configuration
+ * on button.  Example usage:
+ *
+ *     @example
+ *     Ext.create('Ext.Button', {
+ *         text      : 'Menu button',
*         renderTo  : Ext.getBody(),
+ *         arrowAlign: 'bottom',
+ *         menu      : [
*             {text: 'Item 1'},
*             {text: 'Item 2'},
+ *             {text: 'Item 3'},
+ *             {text: 'Item 4'}
+ *         ]
+ *     });
+ *
+ * Using listeners, you can easily listen to events fired by any component, using the {@link #listeners}
+ * configuration or using the {@link #addListener} method.  Button has a variety of different listeners:
+ *
+ * - `click`
+ * - `toggle`
+ * - `mouseover`
+ * - `mouseout`
+ * - `mouseshow`
+ * - `menuhide`
+ * - `menutriggerover`
+ * - `menutriggerout`
+ *
+ * Example usage:
+ *
+ *     @example
*     Ext.create('Ext.Button', {
+ *         text     : 'Button',
+ *         renderTo : Ext.getBody(),
+ *         listeners: {
+ *             click: function() {
+ *                 // this == the button, as we are in the local scope
+ *                 this.setText('I was clicked!');
+ *             },
+ *             mouseover: function() {
+ *                 // set a new config which says we moused over, if not already set
+ *                 if (!this.mousedOver) {
+ *                     this.mousedOver = true;
+ *                     alert('You moused over a button!\n\nI wont do this again.');
+ *                 }
+ *             }
+ *         }
+ *     });
  */
 Ext.define('Ext.button.Button', {
 
@@ -166,274 +166,289 @@ Ext.define('Ext.button.Button', {
     componentLayout: 'button',
 
 <span id='Ext-button-Button-property-hidden'>    /**
-</span>     * Read-only. True if this button is hidden
-     * @type Boolean
+</span>     * @property {Boolean} hidden
+     * True if this button is hidden. Read-only.
      */
     hidden: false,
 
 <span id='Ext-button-Button-property-disabled'>    /**
-</span>     * Read-only. True if this button is disabled
-     * @type Boolean
+</span>     * @property {Boolean} disabled
+     * True if this button is disabled. Read-only.
      */
     disabled: false,
 
 <span id='Ext-button-Button-property-pressed'>    /**
-</span>     * Read-only. True if this button is pressed (only if enableToggle = true)
-     * @type Boolean
+</span>     * @property {Boolean} pressed
+     * True if this button is pressed (only if enableToggle = true). Read-only.
      */
     pressed: false,
 
 <span id='Ext-button-Button-cfg-text'>    /**
-</span>     * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
+</span>     * @cfg {String} text
+     * The button text to be used as innerHTML (html tags are accepted).
      */
 
 <span id='Ext-button-Button-cfg-icon'>    /**
-</span>     * @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')
+</span>     * @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')
      */
 
 <span id='Ext-button-Button-cfg-handler'>    /**
-</span>     * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
-     * The handler is passed the following parameters:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
-     * &lt;li&gt;&lt;code&gt;b&lt;/code&gt; : Button&lt;div class=&quot;sub-desc&quot;&gt;This Button.&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;&lt;code&gt;e&lt;/code&gt; : EventObject&lt;div class=&quot;sub-desc&quot;&gt;The click event.&lt;/div&gt;&lt;/li&gt;
-     * &lt;/ul&gt;&lt;/div&gt;
+</span>     * @cfg {Function} handler
+     * A function called when the button is clicked (can be used instead of click event).
+     * @cfg {Ext.button.Button} handler.button This button.
+     * @cfg {Ext.EventObject} handler.e The click event.
      */
 
 <span id='Ext-button-Button-cfg-minWidth'>    /**
-</span>     * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
-     * See also {@link Ext.panel.Panel}.&lt;tt&gt;{@link Ext.panel.Panel#minButtonWidth minButtonWidth}&lt;/tt&gt;.
+</span>     * @cfg {Number} minWidth
+     * The minimum width for this button (used to give a set of buttons a common width).
+     * See also {@link Ext.panel.Panel}.{@link Ext.panel.Panel#minButtonWidth minButtonWidth}.
      */
 
 <span id='Ext-button-Button-cfg-tooltip'>    /**
-</span>     * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
+</span>     * @cfg {String/Object} tooltip
+     * The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or
+     * QuickTips config object.
      */
 
 <span id='Ext-button-Button-cfg-hidden'>    /**
-</span>     * @cfg {Boolean} hidden True to start hidden (defaults to false)
+</span>     * @cfg {Boolean} [hidden=false]
+     * True to start hidden.
      */
 
 <span id='Ext-button-Button-cfg-disabled'>    /**
-</span>     * @cfg {Boolean} disabled True to start disabled (defaults to false)
+</span>     * @cfg {Boolean} [disabled=true]
+     * True to start disabled.
      */
 
 <span id='Ext-button-Button-cfg-pressed'>    /**
-</span>     * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
+</span>     * @cfg {Boolean} [pressed=false]
+     * True to start pressed (only if enableToggle = true)
      */
 
 <span id='Ext-button-Button-cfg-toggleGroup'>    /**
-</span>     * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
+</span>     * @cfg {String} toggleGroup
+     * The group this toggle button is a member of (only 1 per group can be pressed)
      */
 
 <span id='Ext-button-Button-cfg-repeat'>    /**
-</span>     * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
-     * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
+</span>     * @cfg {Boolean/Object} [repeat=false]
+     * True to repeat fire the click event while the mouse is down. This can also be a
+     * {@link Ext.util.ClickRepeater ClickRepeater} config object.
      */
 
 <span id='Ext-button-Button-cfg-tabIndex'>    /**
-</span>     * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
+</span>     * @cfg {Number} tabIndex
+     * Set a DOM tabIndex for this button.
      */
 
 <span id='Ext-button-Button-cfg-allowDepress'>    /**
-</span>     * @cfg {Boolean} allowDepress
-     * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
+</span>     * @cfg {Boolean} [allowDepress=true]
+     * False to not allow a pressed Button to be depressed. Only valid when {@link #enableToggle} is true.
      */
 
 <span id='Ext-button-Button-cfg-enableToggle'>    /**
-</span>     * @cfg {Boolean} enableToggle
-     * True to enable pressed/not pressed toggling (defaults to false)
+</span>     * @cfg {Boolean} [enableToggle=false]
+     * True to enable pressed/not pressed toggling.
      */
     enableToggle: false,
 
 <span id='Ext-button-Button-cfg-toggleHandler'>    /**
 </span>     * @cfg {Function} toggleHandler
-     * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:&lt;ul class=&quot;mdetail-params&quot;&gt;
-     * &lt;li&gt;&lt;b&gt;button&lt;/b&gt; : Ext.button.Button&lt;div class=&quot;sub-desc&quot;&gt;this Button object&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;&lt;b&gt;state&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;The next state of the Button, true means pressed.&lt;/div&gt;&lt;/li&gt;
-     * &lt;/ul&gt;
+     * Function called when a Button with {@link #enableToggle} set to true is clicked.
+     * @cfg {Ext.button.Button} toggleHandler.button This button.
+     * @cfg {Boolean} toggleHandler.state The next state of the Button, true means pressed.
      */
 
 <span id='Ext-button-Button-cfg-menu'>    /**
-</span>     * @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).
+</span>     * @cfg {Ext.menu.Menu/String/Object} menu
+     * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob.
      */
 
 <span id='Ext-button-Button-cfg-menuAlign'>    /**
 </span>     * @cfg {String} menuAlign
-     * The position to align the menu to (see {@link Ext.core.Element#alignTo} for more details, defaults to 'tl-bl?').
+     * The position to align the menu to (see {@link Ext.Element#alignTo} for more details).
      */
     menuAlign: 'tl-bl?',
 
+<span id='Ext-button-Button-cfg-textAlign'>    /**
+</span>     * @cfg {String} textAlign
+     * The text alignment for this button (center, left, right).
+     */
+    textAlign: 'center',
+
 <span id='Ext-button-Button-cfg-overflowText'>    /**
-</span>     * @cfg {String} overflowText If used in a {@link Ext.toolbar.Toolbar Toolbar}, the
-     * text to be used if this item is shown in the overflow menu. See also
-     * {@link Ext.toolbar.Item}.&lt;code&gt;{@link Ext.toolbar.Item#overflowText overflowText}&lt;/code&gt;.
+</span>     * @cfg {String} overflowText
+     * If used in a {@link Ext.toolbar.Toolbar Toolbar}, the text to be used if this item is shown in the overflow menu.
+     * See also {@link Ext.toolbar.Item}.`{@link Ext.toolbar.Item#overflowText overflowText}`.
      */
 
 <span id='Ext-button-Button-cfg-iconCls'>    /**
 </span>     * @cfg {String} iconCls
-     * A css class which sets a background image to be used as the icon for this button
+     * A css class which sets a background image to be used as the icon for this button.
      */
 
 <span id='Ext-button-Button-cfg-type'>    /**
 </span>     * @cfg {String} type
-     * submit, reset or button - defaults to 'button'
+     * The type of `&lt;input&gt;` to create: submit, reset or button.
      */
     type: 'button',
 
 <span id='Ext-button-Button-cfg-clickEvent'>    /**
 </span>     * @cfg {String} clickEvent
      * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
-     * Defaults to &lt;tt&gt;'click'&lt;/tt&gt;.
      */
     clickEvent: 'click',
-    
+
 <span id='Ext-button-Button-cfg-preventDefault'>    /**
 </span>     * @cfg {Boolean} preventDefault
-     * True to prevent the default action when the {@link #clickEvent} is processed. Defaults to true.
+     * True to prevent the default action when the {@link #clickEvent} is processed.
      */
     preventDefault: true,
 
 <span id='Ext-button-Button-cfg-handleMouseEvents'>    /**
 </span>     * @cfg {Boolean} handleMouseEvents
-     * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
+     * False to disable visual cues on mouseover, mouseout and mousedown.
      */
     handleMouseEvents: true,
 
 <span id='Ext-button-Button-cfg-tooltipType'>    /**
 </span>     * @cfg {String} tooltipType
-     * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
+     * The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.
      */
     tooltipType: 'qtip',
 
 <span id='Ext-button-Button-cfg-baseCls'>    /**
-</span>     * @cfg {String} baseCls
-     * The base CSS class to add to all buttons. (Defaults to 'x-btn')
+</span>     * @cfg {String} [baseCls='x-btn']
+     * The base CSS class to add to all buttons.
      */
     baseCls: Ext.baseCSSPrefix + 'btn',
 
 <span id='Ext-button-Button-cfg-pressedCls'>    /**
 </span>     * @cfg {String} pressedCls
-     * The CSS class to add to a button when it is in the pressed state. (Defaults to 'x-btn-pressed')
+     * The CSS class to add to a button when it is in the pressed state.
      */
     pressedCls: 'pressed',
-    
+
 <span id='Ext-button-Button-cfg-overCls'>    /**
 </span>     * @cfg {String} overCls
-     * The CSS class to add to a button when it is in the over (hovered) state. (Defaults to 'x-btn-over')
+     * The CSS class to add to a button when it is in the over (hovered) state.
      */
     overCls: 'over',
-    
+
 <span id='Ext-button-Button-cfg-focusCls'>    /**
 </span>     * @cfg {String} focusCls
-     * The CSS class to add to a button when it is in the focussed state. (Defaults to 'x-btn-focus')
+     * The CSS class to add to a button when it is in the focussed state.
      */
     focusCls: 'focus',
-    
+
 <span id='Ext-button-Button-cfg-menuActiveCls'>    /**
 </span>     * @cfg {String} menuActiveCls
-     * The CSS class to add to a button when it's menu is active. (Defaults to 'x-btn-menu-active')
+     * The CSS class to add to a button when it's menu is active.
      */
     menuActiveCls: 'menu-active',
-    
+
+<span id='Ext-button-Button-cfg-href'>    /**
+</span>     * @cfg {String} href
+     * The URL to visit when the button is clicked. Specifying this config is equivalent to specifying:
+     *
+     *     handler: function() { window.location = &quot;http://www.sencha.com&quot; }
+     */
+
 <span id='Ext-button-Button-cfg-baseParams'>    /**
 </span>     * @cfg {Object} baseParams
      * An object literal of parameters to pass to the url when the {@link #href} property is specified.
      */
-    
+
 <span id='Ext-button-Button-cfg-params'>    /**
 </span>     * @cfg {Object} params
-     * An object literal of parameters to pass to the url when the {@link #href} property is specified.
-     * Any params override {@link #baseParams}. New params can be set using the {@link #setParams} method.
+     * An object literal of parameters to pass to the url when the {@link #href} property is specified. Any params
+     * override {@link #baseParams}. New params can be set using the {@link #setParams} method.
      */
 
     ariaRole: 'button',
 
     // inherited
     renderTpl:
-        '&lt;em class=&quot;{splitCls}&quot;&gt;' +
+        '&lt;em id=&quot;{id}-btnWrap&quot; class=&quot;{splitCls}&quot;&gt;' +
             '&lt;tpl if=&quot;href&quot;&gt;' +
-                '&lt;a href=&quot;{href}&quot; target=&quot;{target}&quot;&lt;tpl if=&quot;tabIndex&quot;&gt; tabIndex=&quot;{tabIndex}&quot;&lt;/tpl&gt; role=&quot;link&quot;&gt;' +
-                    '&lt;span class=&quot;{baseCls}-inner&quot;&gt;' +
+                '&lt;a id=&quot;{id}-btnEl&quot; href=&quot;{href}&quot; target=&quot;{target}&quot;&lt;tpl if=&quot;tabIndex&quot;&gt; tabIndex=&quot;{tabIndex}&quot;&lt;/tpl&gt; role=&quot;link&quot;&gt;' +
+                    '&lt;span id=&quot;{id}-btnInnerEl&quot; class=&quot;{baseCls}-inner&quot;&gt;' +
                         '{text}' +
                     '&lt;/span&gt;' +
-                        '&lt;span class=&quot;{baseCls}-icon&quot;&gt;&lt;/span&gt;' +
+                        '&lt;span id=&quot;{id}-btnIconEl&quot; class=&quot;{baseCls}-icon&quot;&gt;&lt;/span&gt;' +
                 '&lt;/a&gt;' +
             '&lt;/tpl&gt;' +
             '&lt;tpl if=&quot;!href&quot;&gt;' +
-                '&lt;button type=&quot;{type}&quot; hidefocus=&quot;true&quot;' +
+                '&lt;button id=&quot;{id}-btnEl&quot; type=&quot;{type}&quot; hidefocus=&quot;true&quot;' +
                     // the autocomplete=&quot;off&quot; is required to prevent Firefox from remembering
                     // the button's disabled state between page reloads.
                     '&lt;tpl if=&quot;tabIndex&quot;&gt; tabIndex=&quot;{tabIndex}&quot;&lt;/tpl&gt; role=&quot;button&quot; autocomplete=&quot;off&quot;&gt;' +
-                    '&lt;span class=&quot;{baseCls}-inner&quot; style=&quot;{innerSpanStyle}&quot;&gt;' +
+                    '&lt;span id=&quot;{id}-btnInnerEl&quot; class=&quot;{baseCls}-inner&quot; style=&quot;{innerSpanStyle}&quot;&gt;' +
                         '{text}' +
                     '&lt;/span&gt;' +
-                    '&lt;span class=&quot;{baseCls}-icon&quot;&gt;&lt;/span&gt;' +
+                    '&lt;span id=&quot;{id}-btnIconEl&quot; class=&quot;{baseCls}-icon {iconCls}&quot;&gt;&amp;#160;&lt;/span&gt;' +
                 '&lt;/button&gt;' +
             '&lt;/tpl&gt;' +
         '&lt;/em&gt;' ,
 
 <span id='Ext-button-Button-cfg-scale'>    /**
 </span>     * @cfg {String} scale
-     * &lt;p&gt;(Optional) The size of the Button. Three values are allowed:&lt;/p&gt;
-     * &lt;ul class=&quot;mdetail-params&quot;&gt;
-     * &lt;li&gt;'small'&lt;div class=&quot;sub-desc&quot;&gt;Results in the button element being 16px high.&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;'medium'&lt;div class=&quot;sub-desc&quot;&gt;Results in the button element being 24px high.&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;'large'&lt;div class=&quot;sub-desc&quot;&gt;Results in the button element being 32px high.&lt;/div&gt;&lt;/li&gt;
-     * &lt;/ul&gt;
-     * &lt;p&gt;Defaults to &lt;b&gt;&lt;tt&gt;'small'&lt;/tt&gt;&lt;/b&gt;.&lt;/p&gt;
+     * The size of the Button. Three values are allowed:
+     *
+     * - 'small' - Results in the button element being 16px high.
+     * - 'medium' - Results in the button element being 24px high.
+     * - 'large' - Results in the button element being 32px high.
      */
     scale: 'small',
-    
+
 <span id='Ext-button-Button-property-allowedScales'>    /**
-</span>     * @private An array of allowed scales.
+</span>     * @private
+     * An array of allowed scales.
      */
     allowedScales: ['small', 'medium', 'large'],
-    
+
 <span id='Ext-button-Button-cfg-scope'>    /**
-</span>     * @cfg {Object} scope The scope (&lt;tt&gt;&lt;b&gt;this&lt;/b&gt;&lt;/tt&gt; reference) in which the
-     * &lt;code&gt;{@link #handler}&lt;/code&gt; and &lt;code&gt;{@link #toggleHandler}&lt;/code&gt; is
-     * executed. Defaults to this Button.
+</span>     * @cfg {Object} scope
+     * The scope (**this** reference) in which the `{@link #handler}` and `{@link #toggleHandler}` is executed.
+     * Defaults to this Button.
      */
 
 <span id='Ext-button-Button-cfg-iconAlign'>    /**
 </span>     * @cfg {String} iconAlign
-     * &lt;p&gt;(Optional) The side of the Button box to render the icon. Four values are allowed:&lt;/p&gt;
-     * &lt;ul class=&quot;mdetail-params&quot;&gt;
-     * &lt;li&gt;'top'&lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;'right'&lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;'bottom'&lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;'left'&lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
-     * &lt;/ul&gt;
-     * &lt;p&gt;Defaults to &lt;b&gt;&lt;tt&gt;'left'&lt;/tt&gt;&lt;/b&gt;.&lt;/p&gt;
+     * The side of the Button box to render the icon. Four values are allowed:
+     *
+     * - 'top'
+     * - 'right'
+     * - 'bottom'
+     * - 'left'
      */
     iconAlign: 'left',
 
 <span id='Ext-button-Button-cfg-arrowAlign'>    /**
 </span>     * @cfg {String} arrowAlign
-     * &lt;p&gt;(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}.
-     * Two values are allowed:&lt;/p&gt;
-     * &lt;ul class=&quot;mdetail-params&quot;&gt;
-     * &lt;li&gt;'right'&lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;'bottom'&lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
-     * &lt;/ul&gt;
-     * &lt;p&gt;Defaults to &lt;b&gt;&lt;tt&gt;'right'&lt;/tt&gt;&lt;/b&gt;.&lt;/p&gt;
+     * The side of the Button box to render the arrow if the button has an associated {@link #menu}. Two
+     * values are allowed:
+     *
+     * - 'right'
+     * - 'bottom'
      */
     arrowAlign: 'right',
 
 <span id='Ext-button-Button-cfg-arrowCls'>    /**
 </span>     * @cfg {String} arrowCls
-     * &lt;p&gt;(Optional) The className used for the inner arrow element if the button has a menu.&lt;/p&gt;
+     * The className used for the inner arrow element if the button has a menu.
      */
     arrowCls: 'arrow',
 
 <span id='Ext-button-Button-property-template'>    /**
-</span>     * @cfg {Ext.Template} template (Optional)
-     * &lt;p&gt;A {@link Ext.Template Template} used to create the Button's DOM structure.&lt;/p&gt;
-     * Instances, or subclasses which need a different DOM structure may provide a different
-     * template layout in conjunction with an implementation of {@link #getTemplateArgs}.
-     * @type Ext.Template
-     * @property template
+</span>     * @property {Ext.Template} template
+     * A {@link Ext.Template Template} used to create the Button's DOM structure.
+     *
+     * Instances, or subclasses which need a different DOM structure may provide a different template layout in
+     * conjunction with an implementation of {@link #getTemplateArgs}.
      */
 
 <span id='Ext-button-Button-cfg-cls'>    /**
@@ -442,19 +457,18 @@ Ext.define('Ext.button.Button', {
      */
 
 <span id='Ext-button-Button-property-menu'>    /**
-</span>     * @property menu
-     * @type Menu
-     * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
+</span>     * @property {Ext.menu.Menu} menu
+     * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config
+     * option.
      */
 
 <span id='Ext-button-Button-cfg-autoWidth'>    /**
 </span>     * @cfg {Boolean} autoWidth
-     * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content.
-     * If the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent
-     * the button from doing this automatic sizing.
-     * Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
+     * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content. If
+     * the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent the button
+     * from doing this automatic sizing.
      */
-     
+
     maskOnDisable: false,
 
     // inherit docs
@@ -466,15 +480,15 @@ Ext.define('Ext.button.Button', {
 <span id='Ext-button-Button-event-click'>            /**
 </span>             * @event click
              * Fires when this button is clicked
-             * @param {Button} this
-             * @param {EventObject} e The click event
+             * @param {Ext.button.Button} this
+             * @param {Event} e The click event
              */
             'click',
 
 <span id='Ext-button-Button-event-toggle'>            /**
 </span>             * @event toggle
              * Fires when the 'pressed' state of this button changes (only if enableToggle = true)
-             * @param {Button} this
+             * @param {Ext.button.Button} this
              * @param {Boolean} pressed
              */
             'toggle',
@@ -482,7 +496,7 @@ Ext.define('Ext.button.Button', {
 <span id='Ext-button-Button-event-mouseover'>            /**
 </span>             * @event mouseover
              * Fires when the mouse hovers over the button
-             * @param {Button} this
+             * @param {Ext.button.Button} this
              * @param {Event} e The event object
              */
             'mouseover',
@@ -490,7 +504,7 @@ Ext.define('Ext.button.Button', {
 <span id='Ext-button-Button-event-mouseout'>            /**
 </span>             * @event mouseout
              * Fires when the mouse exits the button
-             * @param {Button} this
+             * @param {Ext.button.Button} this
              * @param {Event} e The event object
              */
             'mouseout',
@@ -498,34 +512,34 @@ Ext.define('Ext.button.Button', {
 <span id='Ext-button-Button-event-menushow'>            /**
 </span>             * @event menushow
              * If this button has a menu, this event fires when it is shown
-             * @param {Button} this
-             * @param {Menu} menu
+             * @param {Ext.button.Button} this
+             * @param {Ext.menu.Menu} menu
              */
             'menushow',
 
 <span id='Ext-button-Button-event-menuhide'>            /**
 </span>             * @event menuhide
              * If this button has a menu, this event fires when it is hidden
-             * @param {Button} this
-             * @param {Menu} menu
+             * @param {Ext.button.Button} this
+             * @param {Ext.menu.Menu} menu
              */
             'menuhide',
 
 <span id='Ext-button-Button-event-menutriggerover'>            /**
 </span>             * @event menutriggerover
              * If this button has a menu, this event fires when the mouse enters the menu triggering element
-             * @param {Button} this
-             * @param {Menu} menu
-             * @param {EventObject} e
+             * @param {Ext.button.Button} this
+             * @param {Ext.menu.Menu} menu
+             * @param {Event} e
              */
             'menutriggerover',
 
 <span id='Ext-button-Button-event-menutriggerout'>            /**
 </span>             * @event menutriggerout
              * If this button has a menu, this event fires when the mouse leaves the menu triggering element
-             * @param {Button} this
-             * @param {Menu} menu
-             * @param {EventObject} e
+             * @param {Ext.button.Button} this
+             * @param {Ext.menu.Menu} menu
+             * @param {Event} e
              */
             'menutriggerout'
         );
@@ -577,15 +591,16 @@ Ext.define('Ext.button.Button', {
     // private
     setButtonCls: function() {
         var me = this,
-            el = me.el,
-            cls = [];
+            cls = [],
+            btnIconEl = me.btnIconEl,
+            hide = 'x-hide-display';
 
         if (me.useSetClass) {
             if (!Ext.isEmpty(me.oldCls)) {
                 me.removeClsWithUI(me.oldCls);
                 me.removeClsWithUI(me.pressedCls);
             }
-            
+
             // Check whether the button has an icon or not, and if it has an icon, what is th alignment
             if (me.iconCls || me.icon) {
                 if (me.text) {
@@ -593,33 +608,35 @@ Ext.define('Ext.button.Button', {
                 } else {
                     cls.push('icon');
                 }
-            } else if (me.text) {
-                cls.push('noicon');
+                if (btnIconEl) {
+                    btnIconEl.removeCls(hide);
+                }
+            } else {
+                if (me.text) {
+                    cls.push('noicon');
+                }
+                if (btnIconEl) {
+                    btnIconEl.addCls(hide);
+                }
             }
-            
+
             me.oldCls = cls;
             me.addClsWithUI(cls);
             me.addClsWithUI(me.pressed ? me.pressedCls : null);
         }
     },
-    
+
     // private
     onRender: function(ct, position) {
         // classNames for the button
         var me = this,
             repeater, btn;
-            
+
         // Apply the renderData to the template args
         Ext.applyIf(me.renderData, me.getTemplateArgs());
 
-        // Extract the button and the button wrapping element
-        Ext.applyIf(me.renderSelectors, {
-            btnEl  : me.href ? 'a' : 'button',
-            btnWrap: 'em',
-            btnInnerEl: '.' + me.baseCls + '-inner',
-            btnIconEl: '.'+ me.baseCls + '-icon'
-        });
-        
+        me.addChildEls('btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl');
+
         if (me.scale) {
             me.ui = me.ui + '-' + me.scale;
         }
@@ -629,7 +646,7 @@ Ext.define('Ext.button.Button', {
 
         // If it is a split button + has a toolip for the arrow
         if (me.split &amp;&amp; me.arrowTooltip) {
-            me.arrowEl.dom[me.tooltipType] = me.arrowTooltip;
+            me.arrowEl.dom.setAttribute(me.getTipAttr(), me.arrowTooltip);
         }
 
         // Add listeners to the focus and blur events on the element
@@ -654,6 +671,10 @@ Ext.define('Ext.button.Button', {
             me.setTooltip(me.tooltip, true);
         }
 
+        if (me.textAlign) {
+            me.setTextAlign(me.textAlign);
+        }
+
         // Add the mouse events to the button
         if (me.handleMouseEvents) {
             me.mon(btn, {
@@ -699,20 +720,22 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-getTemplateArgs'>    /**
-</span>     * &lt;p&gt;This method returns an object which provides substitution parameters for the {@link #renderTpl XTemplate} used
-     * to create this Button's DOM structure.&lt;/p&gt;
-     * &lt;p&gt;Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
-     * own implementation of this method.&lt;/p&gt;
-     * &lt;p&gt;The default implementation which provides data for the default {@link #template} returns an Object containing the
-     * following properties:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
-     * &lt;li&gt;&lt;code&gt;type&lt;/code&gt; : The &amp;lt;button&amp;gt;'s {@link #type}&lt;/li&gt;
-     * &lt;li&gt;&lt;code&gt;splitCls&lt;/code&gt; : A CSS class to determine the presence and position of an arrow icon. (&lt;code&gt;'x-btn-arrow'&lt;/code&gt; or &lt;code&gt;'x-btn-arrow-bottom'&lt;/code&gt; or &lt;code&gt;''&lt;/code&gt;)&lt;/li&gt;
-     * &lt;li&gt;&lt;code&gt;cls&lt;/code&gt; : A CSS class name applied to the Button's main &amp;lt;tbody&amp;gt; element which determines the button's scale and icon alignment.&lt;/li&gt;
-     * &lt;li&gt;&lt;code&gt;text&lt;/code&gt; : The {@link #text} to display ion the Button.&lt;/li&gt;
-     * &lt;li&gt;&lt;code&gt;tabIndex&lt;/code&gt; : The tab index within the input flow.&lt;/li&gt;
-     * &lt;/ul&gt;&lt;/div&gt;
-     * @return {Array} Substitution data for a Template.
-    */
+</span>     * This method returns an object which provides substitution parameters for the {@link #renderTpl XTemplate} used to
+     * create this Button's DOM structure.
+     *
+     * Instances or subclasses which use a different Template to create a different DOM structure may need to provide
+     * their own implementation of this method.
+     *
+     * @return {Object} Substitution data for a Template. The default implementation which provides data for the default
+     * {@link #template} returns an Object containing the following properties:
+     * @return {String} return.type The `&lt;button&gt;`'s {@link #type}
+     * @return {String} return.splitCls A CSS class to determine the presence and position of an arrow icon.
+     * (`'x-btn-arrow'` or `'x-btn-arrow-bottom'` or `''`)
+     * @return {String} return.cls A CSS class name applied to the Button's main `&lt;tbody&gt;` element which determines the
+     * button's scale and icon alignment.
+     * @return {String} return.text The {@link #text} to display ion the Button.
+     * @return {Number} return.tabIndex The tab index within the input flow.
+     */
     getTemplateArgs: function() {
         var me = this,
             persistentPadding = me.getPersistentBtnPadding(),
@@ -731,6 +754,7 @@ Ext.define('Ext.button.Button', {
             type     : me.type,
             splitCls : me.getSplitCls(),
             cls      : me.cls,
+            iconCls  : me.iconCls || '',
             text     : me.text || '&amp;#160;',
             tabIndex : me.tabIndex,
             innerSpanStyle: innerSpanStyle
@@ -745,15 +769,17 @@ Ext.define('Ext.button.Button', {
     getHref: function() {
         var me = this,
             params = Ext.apply({}, me.baseParams);
-            
+
         // write baseParams first, then write any params
         params = Ext.apply(params, me.params);
         return me.href ? Ext.urlAppend(me.href, Ext.Object.toQueryString(params)) : false;
     },
 
 <span id='Ext-button-Button-method-setParams'>    /**
-</span>     * &lt;p&gt;&lt;b&gt;Only valid if the Button was originally configured with a {@link #url}&lt;/b&gt;&lt;/p&gt;
-     * &lt;p&gt;Sets the href of the link dynamically according to the params passed, and any {@link #baseParams} configured.&lt;/p&gt;
+</span>     * Sets the href of the link dynamically according to the params passed, and any {@link #baseParams} configured.
+     *
+     * **Only valid if the Button was originally configured with a {@link #href}**
+     *
      * @param {Object} params Parameters to use in the href URL.
      */
     setParams: function(params) {
@@ -776,30 +802,34 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-setIconCls'>    /**
-</span>     * Sets the CSS class that provides a background image to use as the button's icon.  This method also changes
-     * the value of the {@link #iconCls} config internally.
+</span>     * Sets the CSS class that provides a background image to use as the button's icon. This method also changes the
+     * value of the {@link #iconCls} config internally.
      * @param {String} cls The CSS class providing the icon image
      * @return {Ext.button.Button} this
      */
     setIconCls: function(cls) {
         var me = this,
-            btnIconEl = me.btnIconEl;
+            btnIconEl = me.btnIconEl,
+            oldCls = me.iconCls;
+            
+        me.iconCls = cls;
         if (btnIconEl) {
             // Remove the previous iconCls from the button
-            btnIconEl.removeCls(me.iconCls);
+            btnIconEl.removeCls(oldCls);
             btnIconEl.addCls(cls || '');
             me.setButtonCls();
         }
-        me.iconCls = cls;
         return me;
     },
 
 <span id='Ext-button-Button-method-setTooltip'>    /**
 </span>     * Sets the tooltip for this Button.
-     * @param {String/Object} tooltip. This may be:&lt;div class=&quot;mdesc-details&quot;&gt;&lt;ul&gt;
-     * &lt;li&gt;&lt;b&gt;String&lt;/b&gt; : A string to be used as innerHTML (html tags are accepted) to show in a tooltip&lt;/li&gt;
-     * &lt;li&gt;&lt;b&gt;Object&lt;/b&gt; : A configuration object for {@link Ext.tip.QuickTipManager#register}.&lt;/li&gt;
-     * &lt;/ul&gt;&lt;/div&gt;
+     *
+     * @param {String/Object} tooltip This may be:
+     *
+     *   - **String** : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
+     *   - **Object** : A configuration object for {@link Ext.tip.QuickTipManager#register}.
+     *
      * @return {Ext.button.Button} this
      */
     setTooltip: function(tooltip, initial) {
@@ -816,7 +846,7 @@ Ext.define('Ext.button.Button', {
                 tooltip));
                 me.tooltip = tooltip;
             } else {
-                me.btnEl.dom.setAttribute('data-' + this.tooltipType, tooltip);
+                me.btnEl.dom.setAttribute(me.getTipAttr(), tooltip);
             }
         } else {
             me.tooltip = tooltip;
@@ -824,11 +854,31 @@ Ext.define('Ext.button.Button', {
         return me;
     },
 
+<span id='Ext-button-Button-method-setTextAlign'>    /**
+</span>     * Sets the text alignment for this button.
+     * @param {String} align The new alignment of the button text. See {@link #textAlign}.
+     */
+    setTextAlign: function(align) {
+        var me = this,
+            btnEl = me.btnEl;
+
+        if (btnEl) {
+            btnEl.removeCls(me.baseCls + '-' + me.textAlign);
+            btnEl.addCls(me.baseCls + '-' + align);
+        }
+        me.textAlign = align;
+        return me;
+    },
+
+    getTipAttr: function(){
+        return this.tooltipType == 'qtip' ? 'data-qtip' : 'title';
+    },
+
     // private
     getRefItems: function(deep){
         var menu = this.menu,
             items;
-
+        
         if (menu) {
             items = menu.getRefItems(deep);
             items.unshift(menu);
@@ -850,9 +900,10 @@ Ext.define('Ext.button.Button', {
             me.clearTip();
         }
         if (me.menu &amp;&amp; me.destroyMenu !== false) {
-            Ext.destroy(me.btnEl, me.btnInnerEl, me.menu);
+            Ext.destroy(me.menu);
         }
-        Ext.destroy(me.repeater);
+        Ext.destroy(me.btnInnerEl, me.repeater);
+        me.callParent();
     },
 
     // private
@@ -862,10 +913,8 @@ Ext.define('Ext.button.Button', {
             me.doc.un('mouseover', me.monitorMouseOver, me);
             me.doc.un('mouseup', me.onMouseUp, me);
             delete me.doc;
-            delete me.btnEl;
-            delete me.btnInnerEl;
             Ext.ButtonToggleManager.unregister(me);
-            
+
             Ext.destroy(me.keyMap);
             delete me.keyMap;
         }
@@ -875,7 +924,7 @@ Ext.define('Ext.button.Button', {
 <span id='Ext-button-Button-method-setHandler'>    /**
 </span>     * Assigns this Button's click handler
      * @param {Function} handler The function to call when the button is clicked
-     * @param {Object} scope (optional) The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the handler function is executed.
+     * @param {Object} [scope] The scope (`this` reference) in which the handler function is executed.
      * Defaults to this Button.
      * @return {Ext.button.Button} this
      */
@@ -902,17 +951,18 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-setIcon'>    /**
-</span>     * Sets the background image (inline style) of the button.  This method also changes
-     * the value of the {@link #icon} config internally.
+</span>     * Sets the background image (inline style) of the button. This method also changes the value of the {@link #icon}
+     * config internally.
      * @param {String} icon The path to an image to display in the button
      * @return {Ext.button.Button} this
      */
     setIcon: function(icon) {
         var me = this,
-            btnInnerEl = me.btnInnerEl;
+            iconEl = me.btnIconEl;
+            
         me.icon = icon;
-        if (btnInnerEl) {
-            btnInnerEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
+        if (iconEl) {
+            iconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
             me.setButtonCls();
         }
         return me;
@@ -928,13 +978,13 @@ Ext.define('Ext.button.Button', {
 
 <span id='Ext-button-Button-method-toggle'>    /**
 </span>     * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
-     * @param {Boolean} state (optional) Force a particular state
-     * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.
+     * @param {Boolean} [state] Force a particular state
+     * @param {Boolean} [suppressEvent=false] True to stop events being fired when calling this method.
      * @return {Ext.button.Button} this
      */
     toggle: function(state, suppressEvent) {
         var me = this;
-        state = state === undefined ? !me.pressed: !!state;
+        state = state === undefined ? !me.pressed : !!state;
         if (state !== me.pressed) {
             if (me.rendered) {
                 me[state ? 'addClsWithUI': 'removeClsWithUI'](me.pressedCls);
@@ -948,14 +998,21 @@ Ext.define('Ext.button.Button', {
         }
         return me;
     },
+    
+    maybeShowMenu: function(){
+        var me = this;
+        if (me.menu &amp;&amp; !me.hasVisibleMenu() &amp;&amp; !me.ignoreNextClick) {
+            me.showMenu();
+        }
+    },
 
 <span id='Ext-button-Button-method-showMenu'>    /**
-</span>     * Show this button's menu (if it has one)
+</span>     * Shows this button's menu (if it has one)
      */
     showMenu: function() {
         var me = this;
         if (me.rendered &amp;&amp; me.menu) {
-            if (me.tooltip) {
+            if (me.tooltip &amp;&amp; me.getTipAttr() != 'title') {
                 Ext.tip.QuickTipManager.getQuickTip().cancelShow(me.btnEl);
             }
             if (me.menu.isVisible()) {
@@ -968,7 +1025,7 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-hideMenu'>    /**
-</span>     * Hide this button's menu (if it has one)
+</span>     * Hides this button's menu (if it has one)
      */
     hideMenu: function() {
         if (this.hasVisibleMenu()) {
@@ -1001,17 +1058,27 @@ Ext.define('Ext.button.Button', {
             return;
         }
         if (!me.disabled) {
-            if (me.enableToggle &amp;&amp; (me.allowDepress !== false || !me.pressed)) {
-                me.toggle();
-            }
-            if (me.menu &amp;&amp; !me.hasVisibleMenu() &amp;&amp; !me.ignoreNextClick) {
-                me.showMenu();
-            }
-            me.fireEvent('click', me, e);
-            if (me.handler) {
-                me.handler.call(me.scope || me, me, e);
-            }
-            me.onBlur();
+            me.doToggle();
+            me.maybeShowMenu();
+            me.fireHandler(e);
+        }
+    },
+    
+    fireHandler: function(e){
+        var me = this,
+            handler = me.handler;
+            
+        me.fireEvent('click', me, e);
+        if (handler) {
+            handler.call(me.scope || me, me, e);
+        }
+        me.onBlur();
+    },
+    
+    doToggle: function(){
+        var me = this;
+        if (me.enableToggle &amp;&amp; (me.allowDepress !== false || !me.pressed)) {
+            me.toggle();
         }
     },
 
@@ -1028,7 +1095,8 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-onMouseOut'>    /**
-</span>     * @private mouseout handler called when a mouseout event occurs anywhere within the encapsulating element -
+</span>     * @private
+     * mouseout handler called when a mouseout event occurs anywhere within the encapsulating element -
      * or the mouse leaves the encapsulating element.
      * The targets are interrogated to see what is being exited to where.
      * @param e
@@ -1044,7 +1112,8 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-onMouseMove'>    /**
-</span>     * @private mousemove handler called when the mouse moves anywhere within the encapsulating element.
+</span>     * @private
+     * mousemove handler called when the mouse moves anywhere within the encapsulating element.
      * The position is checked to determine if the mouse is entering or leaving the trigger area. Using
      * mousemove to check this is more resource intensive than we'd like, but it is necessary because
      * the trigger area does not line up exactly with sub-elements so we don't always get mouseover/out
@@ -1079,14 +1148,15 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-getTriggerSize'>    /**
-</span>     * @private Measures the size of the trigger area for menu and split buttons. Will be a width for
+</span>     * @private
+     * Measures the size of the trigger area for menu and split buttons. Will be a width for
      * a right-aligned trigger and a height for a bottom-aligned trigger. Cached after first measurement.
      */
     getTriggerSize: function() {
         var me = this,
             size = me.triggerSize,
             side, sideFirstLetter, undef;
-            
+
         if (size === undef) {
             side = me.arrowAlign;
             sideFirstLetter = side.charAt(0);
@@ -1096,7 +1166,8 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-onMouseEnter'>    /**
-</span>     * @private virtual mouseenter handler called when it is detected that the mouseout event
+</span>     * @private
+     * virtual mouseenter handler called when it is detected that the mouseout event
      * signified the mouse entering the encapsulating element.
      * @param e
      */
@@ -1107,7 +1178,8 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-onMouseLeave'>    /**
-</span>     * @private virtual mouseleave handler called when it is detected that the mouseover event
+</span>     * @private
+     * virtual mouseleave handler called when it is detected that the mouseover event
      * signified the mouse entering the encapsulating element.
      * @param e
      */
@@ -1118,7 +1190,8 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-onMenuTriggerOver'>    /**
-</span>     * @private virtual mouseenter handler called when it is detected that the mouseover event
+</span>     * @private
+     * virtual mouseenter handler called when it is detected that the mouseover event
      * signified the mouse entering the arrow area of the button - the &lt;em&gt;.
      * @param e
      */
@@ -1129,7 +1202,8 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-onMenuTriggerOut'>    /**
-</span>     * @private virtual mouseleave handler called when it is detected that the mouseout event
+</span>     * @private
+     * virtual mouseleave handler called when it is detected that the mouseout event
      * signified the mouse leaving the arrow area of the button - the &lt;em&gt;.
      * @param e
      */
@@ -1138,13 +1212,13 @@ Ext.define('Ext.button.Button', {
         delete me.overMenuTrigger;
         me.fireEvent('menutriggerout', me, me.menu, e);
     },
-    
+
     // inherit docs
     enable : function(silent) {
         var me = this;
 
         me.callParent(arguments);
-        
+
         me.removeClsWithUI('disabled');
 
         return me;
@@ -1153,14 +1227,15 @@ Ext.define('Ext.button.Button', {
     // inherit docs
     disable : function(silent) {
         var me = this;
-        
+
         me.callParent(arguments);
-        
+
         me.addClsWithUI('disabled');
+        me.removeClsWithUI(me.overCls);
 
         return me;
     },
-    
+
 <span id='Ext-button-Button-method-setScale'>    /**
 </span>     * Method to change the scale of the button. See {@link #scale} for allowed configurations.
      * @param {String} scale The scale to change to.
@@ -1168,31 +1243,31 @@ Ext.define('Ext.button.Button', {
     setScale: function(scale) {
         var me = this,
             ui = me.ui.replace('-' + me.scale, '');
-        
+
         //check if it is an allowed scale
         if (!Ext.Array.contains(me.allowedScales, scale)) {
             throw('#setScale: scale must be an allowed scale (' + me.allowedScales.join(', ') + ')');
         }
-        
+
         me.scale = scale;
         me.setUI(ui);
     },
-    
+
     // inherit docs
     setUI: function(ui) {
         var me = this;
-        
+
         //we need to append the scale to the UI, if not already done
         if (me.scale &amp;&amp; !ui.match(me.scale)) {
             ui = ui + '-' + me.scale;
         }
-        
+
         me.callParent([ui]);
-        
+
         // Set all the state classNames, as they need to include the UI
         // me.disabledCls += ' ' + me.baseCls + '-' + me.ui + '-disabled';
     },
-    
+
     // private
     onFocus: function(e) {
         var me = this;
@@ -1258,9 +1333,10 @@ Ext.define('Ext.button.Button', {
     },
 
 <span id='Ext-button-Button-method-getPersistentBtnPadding'>    /**
-</span>     * @private Some browsers (notably Safari and older Chromes on Windows) add extra &quot;padding&quot; inside the button
+</span>     * @private
+     * Some browsers (notably Safari and older Chromes on Windows) add extra &quot;padding&quot; inside the button
      * element that cannot be removed. This method returns the size of that padding with a one-time detection.
-     * @return Array [top, right, bottom, left]
+     * @return {Number[]} [top, right, bottom, left]
      */
     getPersistentBtnPadding: function() {
         var cls = Ext.button.Button,
@@ -1295,10 +1371,10 @@ Ext.define('Ext.button.Button', {
     }
 
 }, function() {
-    var groups = {},
-        g, i, l;
+    var groups = {};
 
     function toggleGroup(btn, state) {
+        var g, i, l;
         if (state) {
             g = groups[btn.toggleGroup];
             for (i = 0, l = g.length; i &lt; l; i++) {
@@ -1308,7 +1384,11 @@ Ext.define('Ext.button.Button', {
             }
         }
     }
-    // Private utility class used by Button
+
+<span id='Ext-ButtonToggleManager'>    /**
+</span>     * Private utility class used by Button
+     * @hide
+     */
     Ext.ButtonToggleManager = {
         register: function(btn) {
             if (!btn.toggleGroup) {
@@ -1333,11 +1413,11 @@ Ext.define('Ext.button.Button', {
             }
         },
 
-<span id='Ext-button-Button-method-getPressed'>        /**
-</span>        * Gets the pressed button in the passed group or null
-        * @param {String} group
-        * @return Button
-        */
+<span id='Ext-ButtonToggleManager-method-getPressed'>        /**
+</span>         * Gets the pressed button in the passed group or null
+         * @param {String} group
+         * @return {Ext.button.Button}
+         */
         getPressed: function(group) {
             var g = groups[group],
                 i = 0,