docs/source/Button.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-button-Button'>/**
  19 </span> * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
  20  *
  21  * Create simple buttons with this component. Customisations include {@link #iconAlign aligned}
  22  * {@link #iconCls icons}, {@link #menu dropdown menus}, {@link #tooltip tooltips}
  23  * and {@link #scale sizing options}. Specify a {@link #handler handler} to run code when
  24  * a user clicks the button, or use {@link #listeners listeners} for other events such as
  25  * {@link #mouseover mouseover}. Example usage:
  26  *
  27  *     @example
  28  *     Ext.create('Ext.Button', {
  29  *         text: 'Click me',
  30  *         renderTo: Ext.getBody(),
  31  *         handler: function() {
  32  *             alert('You clicked the button!')
  33  *         }
  34  *     });
  35  *
  36  * The {@link #handler} configuration can also be updated dynamically using the {@link #setHandler}
  37  * method.  Example usage:
  38  *
  39  *     @example
  40  *     Ext.create('Ext.Button', {
  41  *         text    : 'Dynamic Handler Button',
  42  *         renderTo: Ext.getBody(),
  43  *         handler : function() {
  44  *             // this button will spit out a different number every time you click it.
  45  *             // so firstly we must check if that number is already set:
  46  *             if (this.clickCount) {
  47  *                 // looks like the property is already set, so lets just add 1 to that number and alert the user
  48  *                 this.clickCount++;
  49  *                 alert('You have clicked the button &quot;' + this.clickCount + '&quot; times.\n\nTry clicking it again..');
  50  *             } else {
  51  *                 // if the clickCount property is not set, we will set it and alert the user
  52  *                 this.clickCount = 1;
  53  *                 alert('You just clicked the button for the first time!\n\nTry pressing it again..');
  54  *             }
  55  *         }
  56  *     });
  57  *
  58  * A button within a container:
  59  *
  60  *     @example
  61  *     Ext.create('Ext.Container', {
  62  *         renderTo: Ext.getBody(),
  63  *         items   : [
  64  *             {
  65  *                 xtype: 'button',
  66  *                 text : 'My Button'
  67  *             }
  68  *         ]
  69  *     });
  70  *
  71  * A useful option of Button is the {@link #scale} configuration. This configuration has three different options:
  72  *
  73  * - `'small'`
  74  * - `'medium'`
  75  * - `'large'`
  76  *
  77  * Example usage:
  78  *
  79  *     @example
  80  *     Ext.create('Ext.Button', {
  81  *         renderTo: document.body,
  82  *         text    : 'Click me',
  83  *         scale   : 'large'
  84  *     });
  85  *
  86  * Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`.
  87  * Example usage:
  88  *
  89  *     @example
  90  *     Ext.create('Ext.Button', {
  91  *         renderTo: Ext.getBody(),
  92  *         text: 'Click Me',
  93  *         enableToggle: true
  94  *     });
  95  *
  96  * You can assign a menu to a button by using the {@link #menu} configuration. This standard configuration
  97  * can either be a reference to a {@link Ext.menu.Menu menu} object, a {@link Ext.menu.Menu menu} id or a
  98  * {@link Ext.menu.Menu menu} config blob. When assigning a menu to a button, an arrow is automatically
  99  * added to the button.  You can change the alignment of the arrow using the {@link #arrowAlign} configuration
 100  * on button.  Example usage:
 101  *
 102  *     @example
 103  *     Ext.create('Ext.Button', {
 104  *         text      : 'Menu button',
 105  *         renderTo  : Ext.getBody(),
 106  *         arrowAlign: 'bottom',
 107  *         menu      : [
 108  *             {text: 'Item 1'},
 109  *             {text: 'Item 2'},
 110  *             {text: 'Item 3'},
 111  *             {text: 'Item 4'}
 112  *         ]
 113  *     });
 114  *
 115  * Using listeners, you can easily listen to events fired by any component, using the {@link #listeners}
 116  * configuration or using the {@link #addListener} method.  Button has a variety of different listeners:
 117  *
 118  * - `click`
 119  * - `toggle`
 120  * - `mouseover`
 121  * - `mouseout`
 122  * - `mouseshow`
 123  * - `menuhide`
 124  * - `menutriggerover`
 125  * - `menutriggerout`
 126  *
 127  * Example usage:
 128  *
 129  *     @example
 130  *     Ext.create('Ext.Button', {
 131  *         text     : 'Button',
 132  *         renderTo : Ext.getBody(),
 133  *         listeners: {
 134  *             click: function() {
 135  *                 // this == the button, as we are in the local scope
 136  *                 this.setText('I was clicked!');
 137  *             },
 138  *             mouseover: function() {
 139  *                 // set a new config which says we moused over, if not already set
 140  *                 if (!this.mousedOver) {
 141  *                     this.mousedOver = true;
 142  *                     alert('You moused over a button!\n\nI wont do this again.');
 143  *                 }
 144  *             }
 145  *         }
 146  *     });
 147  */
 148 Ext.define('Ext.button.Button', {
 149
 150     /* Begin Definitions */
 151     alias: 'widget.button',
 152     extend: 'Ext.Component',
 153
 154     requires: [
 155         'Ext.menu.Manager',
 156         'Ext.util.ClickRepeater',
 157         'Ext.layout.component.Button',
 158         'Ext.util.TextMetrics',
 159         'Ext.util.KeyMap'
 160     ],
 161
 162     alternateClassName: 'Ext.Button',
 163     /* End Definitions */
 164
 165     isButton: true,
 166     componentLayout: 'button',
 167
 168 <span id='Ext-button-Button-property-hidden'>    /**
 169 </span>     * @property {Boolean} hidden
 170      * True if this button is hidden. Read-only.
 171      */
 172     hidden: false,
 173
 174 <span id='Ext-button-Button-property-disabled'>    /**
 175 </span>     * @property {Boolean} disabled
 176      * True if this button is disabled. Read-only.
 177      */
 178     disabled: false,
 179
 180 <span id='Ext-button-Button-property-pressed'>    /**
 181 </span>     * @property {Boolean} pressed
 182      * True if this button is pressed (only if enableToggle = true). Read-only.
 183      */
 184     pressed: false,
 185
 186 <span id='Ext-button-Button-cfg-text'>    /**
 187 </span>     * @cfg {String} text
 188      * The button text to be used as innerHTML (html tags are accepted).
 189      */
 190
 191 <span id='Ext-button-Button-cfg-icon'>    /**
 192 </span>     * @cfg {String} icon
 193      * The path to an image to display in the button (the image will be set as the background-image CSS property of the
 194      * button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
 195      */
 196
 197 <span id='Ext-button-Button-cfg-handler'>    /**
 198 </span>     * @cfg {Function} handler
 199      * A function called when the button is clicked (can be used instead of click event).
 200      * @cfg {Ext.button.Button} handler.button This button.
 201      * @cfg {Ext.EventObject} handler.e The click event.
 202      */
 203
 204 <span id='Ext-button-Button-cfg-minWidth'>    /**
 205 </span>     * @cfg {Number} minWidth
 206      * The minimum width for this button (used to give a set of buttons a common width).
 207      * See also {@link Ext.panel.Panel}.{@link Ext.panel.Panel#minButtonWidth minButtonWidth}.
 208      */
 209
 210 <span id='Ext-button-Button-cfg-tooltip'>    /**
 211 </span>     * @cfg {String/Object} tooltip
 212      * The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or
 213      * QuickTips config object.
 214      */
 215
 216 <span id='Ext-button-Button-cfg-hidden'>    /**
 217 </span>     * @cfg {Boolean} [hidden=false]
 218      * True to start hidden.
 219      */
 220
 221 <span id='Ext-button-Button-cfg-disabled'>    /**
 222 </span>     * @cfg {Boolean} [disabled=true]
 223      * True to start disabled.
 224      */
 225
 226 <span id='Ext-button-Button-cfg-pressed'>    /**
 227 </span>     * @cfg {Boolean} [pressed=false]
 228      * True to start pressed (only if enableToggle = true)
 229      */
 230
 231 <span id='Ext-button-Button-cfg-toggleGroup'>    /**
 232 </span>     * @cfg {String} toggleGroup
 233      * The group this toggle button is a member of (only 1 per group can be pressed)
 234      */
 235
 236 <span id='Ext-button-Button-cfg-repeat'>    /**
 237 </span>     * @cfg {Boolean/Object} [repeat=false]
 238      * True to repeat fire the click event while the mouse is down. This can also be a
 239      * {@link Ext.util.ClickRepeater ClickRepeater} config object.
 240      */
 241
 242 <span id='Ext-button-Button-cfg-tabIndex'>    /**
 243 </span>     * @cfg {Number} tabIndex
 244      * Set a DOM tabIndex for this button.
 245      */
 246
 247 <span id='Ext-button-Button-cfg-allowDepress'>    /**
 248 </span>     * @cfg {Boolean} [allowDepress=true]
 249      * False to not allow a pressed Button to be depressed. Only valid when {@link #enableToggle} is true.
 250      */
 251
 252 <span id='Ext-button-Button-cfg-enableToggle'>    /**
 253 </span>     * @cfg {Boolean} [enableToggle=false]
 254      * True to enable pressed/not pressed toggling.
 255      */
 256     enableToggle: false,
 257
 258 <span id='Ext-button-Button-cfg-toggleHandler'>    /**
 259 </span>     * @cfg {Function} toggleHandler
 260      * Function called when a Button with {@link #enableToggle} set to true is clicked.
 261      * @cfg {Ext.button.Button} toggleHandler.button This button.
 262      * @cfg {Boolean} toggleHandler.state The next state of the Button, true means pressed.
 263      */
 264
 265 <span id='Ext-button-Button-cfg-menu'>    /**
 266 </span>     * @cfg {Ext.menu.Menu/String/Object} menu
 267      * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob.
 268      */
 269
 270 <span id='Ext-button-Button-cfg-menuAlign'>    /**
 271 </span>     * @cfg {String} menuAlign
 272      * The position to align the menu to (see {@link Ext.Element#alignTo} for more details).
 273      */
 274     menuAlign: 'tl-bl?',
 275
 276 <span id='Ext-button-Button-cfg-textAlign'>    /**
 277 </span>     * @cfg {String} textAlign
 278      * The text alignment for this button (center, left, right).
 279      */
 280     textAlign: 'center',
 281
 282 <span id='Ext-button-Button-cfg-overflowText'>    /**
 283 </span>     * @cfg {String} overflowText
 284      * If used in a {@link Ext.toolbar.Toolbar Toolbar}, the text to be used if this item is shown in the overflow menu.
 285      * See also {@link Ext.toolbar.Item}.`{@link Ext.toolbar.Item#overflowText overflowText}`.
 286      */
 287
 288 <span id='Ext-button-Button-cfg-iconCls'>    /**
 289 </span>     * @cfg {String} iconCls
 290      * A css class which sets a background image to be used as the icon for this button.
 291      */
 292
 293 <span id='Ext-button-Button-cfg-type'>    /**
 294 </span>     * @cfg {String} type
 295      * The type of `&lt;input&gt;` to create: submit, reset or button.
 296      */
 297     type: 'button',
 298
 299 <span id='Ext-button-Button-cfg-clickEvent'>    /**
 300 </span>     * @cfg {String} clickEvent
 301      * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
 302      */
 303     clickEvent: 'click',
 304
 305 <span id='Ext-button-Button-cfg-preventDefault'>    /**
 306 </span>     * @cfg {Boolean} preventDefault
 307      * True to prevent the default action when the {@link #clickEvent} is processed.
 308      */
 309     preventDefault: true,
 310
 311 <span id='Ext-button-Button-cfg-handleMouseEvents'>    /**
 312 </span>     * @cfg {Boolean} handleMouseEvents
 313      * False to disable visual cues on mouseover, mouseout and mousedown.
 314      */
 315     handleMouseEvents: true,
 316
 317 <span id='Ext-button-Button-cfg-tooltipType'>    /**
 318 </span>     * @cfg {String} tooltipType
 319      * The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.
 320      */
 321     tooltipType: 'qtip',
 322
 323 <span id='Ext-button-Button-cfg-baseCls'>    /**
 324 </span>     * @cfg {String} [baseCls='x-btn']
 325      * The base CSS class to add to all buttons.
 326      */
 327     baseCls: Ext.baseCSSPrefix + 'btn',
 328
 329 <span id='Ext-button-Button-cfg-pressedCls'>    /**
 330 </span>     * @cfg {String} pressedCls
 331      * The CSS class to add to a button when it is in the pressed state.
 332      */
 333     pressedCls: 'pressed',
 334
 335 <span id='Ext-button-Button-cfg-overCls'>    /**
 336 </span>     * @cfg {String} overCls
 337      * The CSS class to add to a button when it is in the over (hovered) state.
 338      */
 339     overCls: 'over',
 340
 341 <span id='Ext-button-Button-cfg-focusCls'>    /**
 342 </span>     * @cfg {String} focusCls
 343      * The CSS class to add to a button when it is in the focussed state.
 344      */
 345     focusCls: 'focus',
 346
 347 <span id='Ext-button-Button-cfg-menuActiveCls'>    /**
 348 </span>     * @cfg {String} menuActiveCls
 349      * The CSS class to add to a button when it's menu is active.
 350      */
 351     menuActiveCls: 'menu-active',
 352
 353 <span id='Ext-button-Button-cfg-href'>    /**
 354 </span>     * @cfg {String} href
 355      * The URL to visit when the button is clicked. Specifying this config is equivalent to specifying:
 356      *
 357      *     handler: function() { window.location = &quot;http://www.sencha.com&quot; }
 358      */
 359
 360 <span id='Ext-button-Button-cfg-baseParams'>    /**
 361 </span>     * @cfg {Object} baseParams
 362      * An object literal of parameters to pass to the url when the {@link #href} property is specified.
 363      */
 364
 365 <span id='Ext-button-Button-cfg-params'>    /**
 366 </span>     * @cfg {Object} params
 367      * An object literal of parameters to pass to the url when the {@link #href} property is specified. Any params
 368      * override {@link #baseParams}. New params can be set using the {@link #setParams} method.
 369      */
 370
 371     ariaRole: 'button',
 372
 373     // inherited
 374     renderTpl:
 375         '&lt;em id=&quot;{id}-btnWrap&quot; class=&quot;{splitCls}&quot;&gt;' +
 376             '&lt;tpl if=&quot;href&quot;&gt;' +
 377                 '&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;' +
 378                     '&lt;span id=&quot;{id}-btnInnerEl&quot; class=&quot;{baseCls}-inner&quot;&gt;' +
 379                         '{text}' +
 380                     '&lt;/span&gt;' +
 381                         '&lt;span id=&quot;{id}-btnIconEl&quot; class=&quot;{baseCls}-icon&quot;&gt;&lt;/span&gt;' +
 382                 '&lt;/a&gt;' +
 383             '&lt;/tpl&gt;' +
 384             '&lt;tpl if=&quot;!href&quot;&gt;' +
 385                 '&lt;button id=&quot;{id}-btnEl&quot; type=&quot;{type}&quot; hidefocus=&quot;true&quot;' +
 386                     // the autocomplete=&quot;off&quot; is required to prevent Firefox from remembering
 387                     // the button's disabled state between page reloads.
 388                     '&lt;tpl if=&quot;tabIndex&quot;&gt; tabIndex=&quot;{tabIndex}&quot;&lt;/tpl&gt; role=&quot;button&quot; autocomplete=&quot;off&quot;&gt;' +
 389                     '&lt;span id=&quot;{id}-btnInnerEl&quot; class=&quot;{baseCls}-inner&quot; style=&quot;{innerSpanStyle}&quot;&gt;' +
 390                         '{text}' +
 391                     '&lt;/span&gt;' +
 392                     '&lt;span id=&quot;{id}-btnIconEl&quot; class=&quot;{baseCls}-icon {iconCls}&quot;&gt;&amp;#160;&lt;/span&gt;' +
 393                 '&lt;/button&gt;' +
 394             '&lt;/tpl&gt;' +
 395         '&lt;/em&gt;' ,
 396
 397 <span id='Ext-button-Button-cfg-scale'>    /**
 398 </span>     * @cfg {String} scale
 399      * The size of the Button. Three values are allowed:
 400      *
 401      * - 'small' - Results in the button element being 16px high.
 402      * - 'medium' - Results in the button element being 24px high.
 403      * - 'large' - Results in the button element being 32px high.
 404      */
 405     scale: 'small',
 406
 407 <span id='Ext-button-Button-property-allowedScales'>    /**
 408 </span>     * @private
 409      * An array of allowed scales.
 410      */
 411     allowedScales: ['small', 'medium', 'large'],
 412
 413 <span id='Ext-button-Button-cfg-scope'>    /**
 414 </span>     * @cfg {Object} scope
 415      * The scope (**this** reference) in which the `{@link #handler}` and `{@link #toggleHandler}` is executed.
 416      * Defaults to this Button.
 417      */
 418
 419 <span id='Ext-button-Button-cfg-iconAlign'>    /**
 420 </span>     * @cfg {String} iconAlign
 421      * The side of the Button box to render the icon. Four values are allowed:
 422      *
 423      * - 'top'
 424      * - 'right'
 425      * - 'bottom'
 426      * - 'left'
 427      */
 428     iconAlign: 'left',
 429
 430 <span id='Ext-button-Button-cfg-arrowAlign'>    /**
 431 </span>     * @cfg {String} arrowAlign
 432      * The side of the Button box to render the arrow if the button has an associated {@link #menu}. Two
 433      * values are allowed:
 434      *
 435      * - 'right'
 436      * - 'bottom'
 437      */
 438     arrowAlign: 'right',
 439
 440 <span id='Ext-button-Button-cfg-arrowCls'>    /**
 441 </span>     * @cfg {String} arrowCls
 442      * The className used for the inner arrow element if the button has a menu.
 443      */
 444     arrowCls: 'arrow',
 445
 446 <span id='Ext-button-Button-property-template'>    /**
 447 </span>     * @property {Ext.Template} template
 448      * A {@link Ext.Template Template} used to create the Button's DOM structure.
 449      *
 450      * Instances, or subclasses which need a different DOM structure may provide a different template layout in
 451      * conjunction with an implementation of {@link #getTemplateArgs}.
 452      */
 453
 454 <span id='Ext-button-Button-cfg-cls'>    /**
 455 </span>     * @cfg {String} cls
 456      * A CSS class string to apply to the button's main element.
 457      */
 458
 459 <span id='Ext-button-Button-property-menu'>    /**
 460 </span>     * @property {Ext.menu.Menu} menu
 461      * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config
 462      * option.
 463      */
 464
 465 <span id='Ext-button-Button-cfg-autoWidth'>    /**
 466 </span>     * @cfg {Boolean} autoWidth
 467      * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content. If
 468      * the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent the button
 469      * from doing this automatic sizing.
 470      */
 471
 472     maskOnDisable: false,
 473
 474     // inherit docs
 475     initComponent: function() {
 476         var me = this;
 477         me.callParent(arguments);
 478
 479         me.addEvents(
 480 <span id='Ext-button-Button-event-click'>            /**
 481 </span>             * @event click
 482              * Fires when this button is clicked
 483              * @param {Ext.button.Button} this
 484              * @param {Event} e The click event
 485              */
 486             'click',
 487
 488 <span id='Ext-button-Button-event-toggle'>            /**
 489 </span>             * @event toggle
 490              * Fires when the 'pressed' state of this button changes (only if enableToggle = true)
 491              * @param {Ext.button.Button} this
 492              * @param {Boolean} pressed
 493              */
 494             'toggle',
 495
 496 <span id='Ext-button-Button-event-mouseover'>            /**
 497 </span>             * @event mouseover
 498              * Fires when the mouse hovers over the button
 499              * @param {Ext.button.Button} this
 500              * @param {Event} e The event object
 501              */
 502             'mouseover',
 503
 504 <span id='Ext-button-Button-event-mouseout'>            /**
 505 </span>             * @event mouseout
 506              * Fires when the mouse exits the button
 507              * @param {Ext.button.Button} this
 508              * @param {Event} e The event object
 509              */
 510             'mouseout',
 511
 512 <span id='Ext-button-Button-event-menushow'>            /**
 513 </span>             * @event menushow
 514              * If this button has a menu, this event fires when it is shown
 515              * @param {Ext.button.Button} this
 516              * @param {Ext.menu.Menu} menu
 517              */
 518             'menushow',
 519
 520 <span id='Ext-button-Button-event-menuhide'>            /**
 521 </span>             * @event menuhide
 522              * If this button has a menu, this event fires when it is hidden
 523              * @param {Ext.button.Button} this
 524              * @param {Ext.menu.Menu} menu
 525              */
 526             'menuhide',
 527
 528 <span id='Ext-button-Button-event-menutriggerover'>            /**
 529 </span>             * @event menutriggerover
 530              * If this button has a menu, this event fires when the mouse enters the menu triggering element
 531              * @param {Ext.button.Button} this
 532              * @param {Ext.menu.Menu} menu
 533              * @param {Event} e
 534              */
 535             'menutriggerover',
 536
 537 <span id='Ext-button-Button-event-menutriggerout'>            /**
 538 </span>             * @event menutriggerout
 539              * If this button has a menu, this event fires when the mouse leaves the menu triggering element
 540              * @param {Ext.button.Button} this
 541              * @param {Ext.menu.Menu} menu
 542              * @param {Event} e
 543              */
 544             'menutriggerout'
 545         );
 546
 547         if (me.menu) {
 548             // Flag that we'll have a splitCls
 549             me.split = true;
 550
 551             // retrieve menu by id or instantiate instance if needed
 552             me.menu = Ext.menu.Manager.get(me.menu);
 553             me.menu.ownerCt = me;
 554         }
 555
 556         // Accept url as a synonym for href
 557         if (me.url) {
 558             me.href = me.url;
 559         }
 560
 561         // preventDefault defaults to false for links
 562         if (me.href &amp;&amp; !me.hasOwnProperty('preventDefault')) {
 563             me.preventDefault = false;
 564         }
 565
 566         if (Ext.isString(me.toggleGroup)) {
 567             me.enableToggle = true;
 568         }
 569
 570     },
 571
 572     // private
 573     initAria: function() {
 574         this.callParent();
 575         var actionEl = this.getActionEl();
 576         if (this.menu) {
 577             actionEl.dom.setAttribute('aria-haspopup', true);
 578         }
 579     },
 580
 581     // inherit docs
 582     getActionEl: function() {
 583         return this.btnEl;
 584     },
 585
 586     // inherit docs
 587     getFocusEl: function() {
 588         return this.btnEl;
 589     },
 590
 591     // private
 592     setButtonCls: function() {
 593         var me = this,
 594             cls = [],
 595             btnIconEl = me.btnIconEl,
 596             hide = 'x-hide-display';
 597
 598         if (me.useSetClass) {
 599             if (!Ext.isEmpty(me.oldCls)) {
 600                 me.removeClsWithUI(me.oldCls);
 601                 me.removeClsWithUI(me.pressedCls);
 602             }
 603
 604             // Check whether the button has an icon or not, and if it has an icon, what is th alignment
 605             if (me.iconCls || me.icon) {
 606                 if (me.text) {
 607                     cls.push('icon-text-' + me.iconAlign);
 608                 } else {
 609                     cls.push('icon');
 610                 }
 611                 if (btnIconEl) {
 612                     btnIconEl.removeCls(hide);
 613                 }
 614             } else {
 615                 if (me.text) {
 616                     cls.push('noicon');
 617                 }
 618                 if (btnIconEl) {
 619                     btnIconEl.addCls(hide);
 620                 }
 621             }
 622
 623             me.oldCls = cls;
 624             me.addClsWithUI(cls);
 625             me.addClsWithUI(me.pressed ? me.pressedCls : null);
 626         }
 627     },
 628
 629     // private
 630     onRender: function(ct, position) {
 631         // classNames for the button
 632         var me = this,
 633             repeater, btn;
 634
 635         // Apply the renderData to the template args
 636         Ext.applyIf(me.renderData, me.getTemplateArgs());
 637
 638         me.addChildEls('btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl');
 639
 640         if (me.scale) {
 641             me.ui = me.ui + '-' + me.scale;
 642         }
 643
 644         // Render internal structure
 645         me.callParent(arguments);
 646
 647         // If it is a split button + has a toolip for the arrow
 648         if (me.split &amp;&amp; me.arrowTooltip) {
 649             me.arrowEl.dom.setAttribute(me.getTipAttr(), me.arrowTooltip);
 650         }
 651
 652         // Add listeners to the focus and blur events on the element
 653         me.mon(me.btnEl, {
 654             scope: me,
 655             focus: me.onFocus,
 656             blur : me.onBlur
 657         });
 658
 659         // Set btn as a local variable for easy access
 660         btn = me.el;
 661
 662         if (me.icon) {
 663             me.setIcon(me.icon);
 664         }
 665
 666         if (me.iconCls) {
 667             me.setIconCls(me.iconCls);
 668         }
 669
 670         if (me.tooltip) {
 671             me.setTooltip(me.tooltip, true);
 672         }
 673
 674         if (me.textAlign) {
 675             me.setTextAlign(me.textAlign);
 676         }
 677
 678         // Add the mouse events to the button
 679         if (me.handleMouseEvents) {
 680             me.mon(btn, {
 681                 scope: me,
 682                 mouseover: me.onMouseOver,
 683                 mouseout: me.onMouseOut,
 684                 mousedown: me.onMouseDown
 685             });
 686
 687             if (me.split) {
 688                 me.mon(btn, {
 689                     mousemove: me.onMouseMove,
 690                     scope: me
 691                 });
 692             }
 693         }
 694
 695         // Check if the button has a menu
 696         if (me.menu) {
 697             me.mon(me.menu, {
 698                 scope: me,
 699                 show: me.onMenuShow,
 700                 hide: me.onMenuHide
 701             });
 702
 703             me.keyMap = Ext.create('Ext.util.KeyMap', me.el, {
 704                 key: Ext.EventObject.DOWN,
 705                 handler: me.onDownKey,
 706                 scope: me
 707             });
 708         }
 709
 710         // Check if it is a repeat button
 711         if (me.repeat) {
 712             repeater = Ext.create('Ext.util.ClickRepeater', btn, Ext.isObject(me.repeat) ? me.repeat: {});
 713             me.mon(repeater, 'click', me.onRepeatClick, me);
 714         } else {
 715             me.mon(btn, me.clickEvent, me.onClick, me);
 716         }
 717
 718         // Register the button in the toggle manager
 719         Ext.ButtonToggleManager.register(me);
 720     },
 721
 722 <span id='Ext-button-Button-method-getTemplateArgs'>    /**
 723 </span>     * This method returns an object which provides substitution parameters for the {@link #renderTpl XTemplate} used to
 724      * create this Button's DOM structure.
 725      *
 726      * Instances or subclasses which use a different Template to create a different DOM structure may need to provide
 727      * their own implementation of this method.
 728      *
 729      * @return {Object} Substitution data for a Template. The default implementation which provides data for the default
 730      * {@link #template} returns an Object containing the following properties:
 731      * @return {String} return.type The `&lt;button&gt;`'s {@link #type}
 732      * @return {String} return.splitCls A CSS class to determine the presence and position of an arrow icon.
 733      * (`'x-btn-arrow'` or `'x-btn-arrow-bottom'` or `''`)
 734      * @return {String} return.cls A CSS class name applied to the Button's main `&lt;tbody&gt;` element which determines the
 735      * button's scale and icon alignment.
 736      * @return {String} return.text The {@link #text} to display ion the Button.
 737      * @return {Number} return.tabIndex The tab index within the input flow.
 738      */
 739     getTemplateArgs: function() {
 740         var me = this,
 741             persistentPadding = me.getPersistentBtnPadding(),
 742             innerSpanStyle = '';
 743
 744         // Create negative margin offsets to counteract persistent button padding if needed
 745         if (Math.max.apply(Math, persistentPadding) &gt; 0) {
 746             innerSpanStyle = 'margin:' + Ext.Array.map(persistentPadding, function(pad) {
 747                 return -pad + 'px';
 748             }).join(' ');
 749         }
 750
 751         return {
 752             href     : me.getHref(),
 753             target   : me.target || '_blank',
 754             type     : me.type,
 755             splitCls : me.getSplitCls(),
 756             cls      : me.cls,
 757             iconCls  : me.iconCls || '',
 758             text     : me.text || '&amp;#160;',
 759             tabIndex : me.tabIndex,
 760             innerSpanStyle: innerSpanStyle
 761         };
 762     },
 763
 764 <span id='Ext-button-Button-method-getHref'>    /**
 765 </span>     * @private
 766      * If there is a configured href for this Button, returns the href with parameters appended.
 767      * @returns The href string with parameters appended.
 768      */
 769     getHref: function() {
 770         var me = this,
 771             params = Ext.apply({}, me.baseParams);
 772
 773         // write baseParams first, then write any params
 774         params = Ext.apply(params, me.params);
 775         return me.href ? Ext.urlAppend(me.href, Ext.Object.toQueryString(params)) : false;
 776     },
 777
 778 <span id='Ext-button-Button-method-setParams'>    /**
 779 </span>     * Sets the href of the link dynamically according to the params passed, and any {@link #baseParams} configured.
 780      *
 781      * **Only valid if the Button was originally configured with a {@link #href}**
 782      *
 783      * @param {Object} params Parameters to use in the href URL.
 784      */
 785     setParams: function(params) {
 786         this.params = params;
 787         this.btnEl.dom.href = this.getHref();
 788     },
 789
 790     getSplitCls: function() {
 791         var me = this;
 792         return me.split ? (me.baseCls + '-' + me.arrowCls) + ' ' + (me.baseCls + '-' + me.arrowCls + '-' + me.arrowAlign) : '';
 793     },
 794
 795     // private
 796     afterRender: function() {
 797         var me = this;
 798         me.useSetClass = true;
 799         me.setButtonCls();
 800         me.doc = Ext.getDoc();
 801         this.callParent(arguments);
 802     },
 803
 804 <span id='Ext-button-Button-method-setIconCls'>    /**
 805 </span>     * Sets the CSS class that provides a background image to use as the button's icon. This method also changes the
 806      * value of the {@link #iconCls} config internally.
 807      * @param {String} cls The CSS class providing the icon image
 808      * @return {Ext.button.Button} this
 809      */
 810     setIconCls: function(cls) {
 811         var me = this,
 812             btnIconEl = me.btnIconEl,
 813             oldCls = me.iconCls;
 814
 815         me.iconCls = cls;
 816         if (btnIconEl) {
 817             // Remove the previous iconCls from the button
 818             btnIconEl.removeCls(oldCls);
 819             btnIconEl.addCls(cls || '');
 820             me.setButtonCls();
 821         }
 822         return me;
 823     },
 824
 825 <span id='Ext-button-Button-method-setTooltip'>    /**
 826 </span>     * Sets the tooltip for this Button.
 827      *
 828      * @param {String/Object} tooltip This may be:
 829      *
 830      *   - **String** : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
 831      *   - **Object** : A configuration object for {@link Ext.tip.QuickTipManager#register}.
 832      *
 833      * @return {Ext.button.Button} this
 834      */
 835     setTooltip: function(tooltip, initial) {
 836         var me = this;
 837
 838         if (me.rendered) {
 839             if (!initial) {
 840                 me.clearTip();
 841             }
 842             if (Ext.isObject(tooltip)) {
 843                 Ext.tip.QuickTipManager.register(Ext.apply({
 844                     target: me.btnEl.id
 845                 },
 846                 tooltip));
 847                 me.tooltip = tooltip;
 848             } else {
 849                 me.btnEl.dom.setAttribute(me.getTipAttr(), tooltip);
 850             }
 851         } else {
 852             me.tooltip = tooltip;
 853         }
 854         return me;
 855     },
 856
 857 <span id='Ext-button-Button-method-setTextAlign'>    /**
 858 </span>     * Sets the text alignment for this button.
 859      * @param {String} align The new alignment of the button text. See {@link #textAlign}.
 860      */
 861     setTextAlign: function(align) {
 862         var me = this,
 863             btnEl = me.btnEl;
 864
 865         if (btnEl) {
 866             btnEl.removeCls(me.baseCls + '-' + me.textAlign);
 867             btnEl.addCls(me.baseCls + '-' + align);
 868         }
 869         me.textAlign = align;
 870         return me;
 871     },
 872
 873     getTipAttr: function(){
 874         return this.tooltipType == 'qtip' ? 'data-qtip' : 'title';
 875     },
 876
 877     // private
 878     getRefItems: function(deep){
 879         var menu = this.menu,
 880             items;
 881
 882         if (menu) {
 883             items = menu.getRefItems(deep);
 884             items.unshift(menu);
 885         }
 886         return items || [];
 887     },
 888
 889     // private
 890     clearTip: function() {
 891         if (Ext.isObject(this.tooltip)) {
 892             Ext.tip.QuickTipManager.unregister(this.btnEl);
 893         }
 894     },
 895
 896     // private
 897     beforeDestroy: function() {
 898         var me = this;
 899         if (me.rendered) {
 900             me.clearTip();
 901         }
 902         if (me.menu &amp;&amp; me.destroyMenu !== false) {
 903             Ext.destroy(me.menu);
 904         }
 905         Ext.destroy(me.btnInnerEl, me.repeater);
 906         me.callParent();
 907     },
 908
 909     // private
 910     onDestroy: function() {
 911         var me = this;
 912         if (me.rendered) {
 913             me.doc.un('mouseover', me.monitorMouseOver, me);
 914             me.doc.un('mouseup', me.onMouseUp, me);
 915             delete me.doc;
 916             Ext.ButtonToggleManager.unregister(me);
 917
 918             Ext.destroy(me.keyMap);
 919             delete me.keyMap;
 920         }
 921         me.callParent();
 922     },
 923
 924 <span id='Ext-button-Button-method-setHandler'>    /**
 925 </span>     * Assigns this Button's click handler
 926      * @param {Function} handler The function to call when the button is clicked
 927      * @param {Object} [scope] The scope (`this` reference) in which the handler function is executed.
 928      * Defaults to this Button.
 929      * @return {Ext.button.Button} this
 930      */
 931     setHandler: function(handler, scope) {
 932         this.handler = handler;
 933         this.scope = scope;
 934         return this;
 935     },
 936
 937 <span id='Ext-button-Button-method-setText'>    /**
 938 </span>     * Sets this Button's text
 939      * @param {String} text The button text
 940      * @return {Ext.button.Button} this
 941      */
 942     setText: function(text) {
 943         var me = this;
 944         me.text = text;
 945         if (me.el) {
 946             me.btnInnerEl.update(text || '&amp;#160;');
 947             me.setButtonCls();
 948         }
 949         me.doComponentLayout();
 950         return me;
 951     },
 952
 953 <span id='Ext-button-Button-method-setIcon'>    /**
 954 </span>     * Sets the background image (inline style) of the button. This method also changes the value of the {@link #icon}
 955      * config internally.
 956      * @param {String} icon The path to an image to display in the button
 957      * @return {Ext.button.Button} this
 958      */
 959     setIcon: function(icon) {
 960         var me = this,
 961             iconEl = me.btnIconEl;
 962
 963         me.icon = icon;
 964         if (iconEl) {
 965             iconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
 966             me.setButtonCls();
 967         }
 968         return me;
 969     },
 970
 971 <span id='Ext-button-Button-method-getText'>    /**
 972 </span>     * Gets the text for this Button
 973      * @return {String} The button text
 974      */
 975     getText: function() {
 976         return this.text;
 977     },
 978
 979 <span id='Ext-button-Button-method-toggle'>    /**
 980 </span>     * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
 981      * @param {Boolean} [state] Force a particular state
 982      * @param {Boolean} [suppressEvent=false] True to stop events being fired when calling this method.
 983      * @return {Ext.button.Button} this
 984      */
 985     toggle: function(state, suppressEvent) {
 986         var me = this;
 987         state = state === undefined ? !me.pressed : !!state;
 988         if (state !== me.pressed) {
 989             if (me.rendered) {
 990                 me[state ? 'addClsWithUI': 'removeClsWithUI'](me.pressedCls);
 991             }
 992             me.btnEl.dom.setAttribute('aria-pressed', state);
 993             me.pressed = state;
 994             if (!suppressEvent) {
 995                 me.fireEvent('toggle', me, state);
 996                 Ext.callback(me.toggleHandler, me.scope || me, [me, state]);
 997             }
 998         }
 999         return me;
1000     },
1001
1002     maybeShowMenu: function(){
1003         var me = this;
1004         if (me.menu &amp;&amp; !me.hasVisibleMenu() &amp;&amp; !me.ignoreNextClick) {
1005             me.showMenu();
1006         }
1007     },
1008
1009 <span id='Ext-button-Button-method-showMenu'>    /**
1010 </span>     * Shows this button's menu (if it has one)
1011      */
1012     showMenu: function() {
1013         var me = this;
1014         if (me.rendered &amp;&amp; me.menu) {
1015             if (me.tooltip &amp;&amp; me.getTipAttr() != 'title') {
1016                 Ext.tip.QuickTipManager.getQuickTip().cancelShow(me.btnEl);
1017             }
1018             if (me.menu.isVisible()) {
1019                 me.menu.hide();
1020             }
1021
1022             me.menu.showBy(me.el, me.menuAlign);
1023         }
1024         return me;
1025     },
1026
1027 <span id='Ext-button-Button-method-hideMenu'>    /**
1028 </span>     * Hides this button's menu (if it has one)
1029      */
1030     hideMenu: function() {
1031         if (this.hasVisibleMenu()) {
1032             this.menu.hide();
1033         }
1034         return this;
1035     },
1036
1037 <span id='Ext-button-Button-method-hasVisibleMenu'>    /**
1038 </span>     * Returns true if the button has a menu and it is visible
1039      * @return {Boolean}
1040      */
1041     hasVisibleMenu: function() {
1042         var menu = this.menu;
1043         return menu &amp;&amp; menu.rendered &amp;&amp; menu.isVisible();
1044     },
1045
1046     // private
1047     onRepeatClick: function(repeat, e) {
1048         this.onClick(e);
1049     },
1050
1051     // private
1052     onClick: function(e) {
1053         var me = this;
1054         if (me.preventDefault || (me.disabled &amp;&amp; me.getHref()) &amp;&amp; e) {
1055             e.preventDefault();
1056         }
1057         if (e.button !== 0) {
1058             return;
1059         }
1060         if (!me.disabled) {
1061             me.doToggle();
1062             me.maybeShowMenu();
1063             me.fireHandler(e);
1064         }
1065     },
1066
1067     fireHandler: function(e){
1068         var me = this,
1069             handler = me.handler;
1070
1071         me.fireEvent('click', me, e);
1072         if (handler) {
1073             handler.call(me.scope || me, me, e);
1074         }
1075         me.onBlur();
1076     },
1077
1078     doToggle: function(){
1079         var me = this;
1080         if (me.enableToggle &amp;&amp; (me.allowDepress !== false || !me.pressed)) {
1081             me.toggle();
1082         }
1083     },
1084
1085 <span id='Ext-button-Button-method-onMouseOver'>    /**
1086 </span>     * @private mouseover handler called when a mouseover event occurs anywhere within the encapsulating element.
1087      * The targets are interrogated to see what is being entered from where.
1088      * @param e
1089      */
1090     onMouseOver: function(e) {
1091         var me = this;
1092         if (!me.disabled &amp;&amp; !e.within(me.el, true, true)) {
1093             me.onMouseEnter(e);
1094         }
1095     },
1096
1097 <span id='Ext-button-Button-method-onMouseOut'>    /**
1098 </span>     * @private
1099      * mouseout handler called when a mouseout event occurs anywhere within the encapsulating element -
1100      * or the mouse leaves the encapsulating element.
1101      * The targets are interrogated to see what is being exited to where.
1102      * @param e
1103      */
1104     onMouseOut: function(e) {
1105         var me = this;
1106         if (!e.within(me.el, true, true)) {
1107             if (me.overMenuTrigger) {
1108                 me.onMenuTriggerOut(e);
1109             }
1110             me.onMouseLeave(e);
1111         }
1112     },
1113
1114 <span id='Ext-button-Button-method-onMouseMove'>    /**
1115 </span>     * @private
1116      * mousemove handler called when the mouse moves anywhere within the encapsulating element.
1117      * The position is checked to determine if the mouse is entering or leaving the trigger area. Using
1118      * mousemove to check this is more resource intensive than we'd like, but it is necessary because
1119      * the trigger area does not line up exactly with sub-elements so we don't always get mouseover/out
1120      * events when needed. In the future we should consider making the trigger a separate element that
1121      * is absolutely positioned and sized over the trigger area.
1122      */
1123     onMouseMove: function(e) {
1124         var me = this,
1125             el = me.el,
1126             over = me.overMenuTrigger,
1127             overlap, btnSize;
1128
1129         if (me.split) {
1130             if (me.arrowAlign === 'right') {
1131                 overlap = e.getX() - el.getX();
1132                 btnSize = el.getWidth();
1133             } else {
1134                 overlap = e.getY() - el.getY();
1135                 btnSize = el.getHeight();
1136             }
1137
1138             if (overlap &gt; (btnSize - me.getTriggerSize())) {
1139                 if (!over) {
1140                     me.onMenuTriggerOver(e);
1141                 }
1142             } else {
1143                 if (over) {
1144                     me.onMenuTriggerOut(e);
1145                 }
1146             }
1147         }
1148     },
1149
1150 <span id='Ext-button-Button-method-getTriggerSize'>    /**
1151 </span>     * @private
1152      * Measures the size of the trigger area for menu and split buttons. Will be a width for
1153      * a right-aligned trigger and a height for a bottom-aligned trigger. Cached after first measurement.
1154      */
1155     getTriggerSize: function() {
1156         var me = this,
1157             size = me.triggerSize,
1158             side, sideFirstLetter, undef;
1159
1160         if (size === undef) {
1161             side = me.arrowAlign;
1162             sideFirstLetter = side.charAt(0);
1163             size = me.triggerSize = me.el.getFrameWidth(sideFirstLetter) + me.btnWrap.getFrameWidth(sideFirstLetter) + (me.frameSize &amp;&amp; me.frameSize[side] || 0);
1164         }
1165         return size;
1166     },
1167
1168 <span id='Ext-button-Button-method-onMouseEnter'>    /**
1169 </span>     * @private
1170      * virtual mouseenter handler called when it is detected that the mouseout event
1171      * signified the mouse entering the encapsulating element.
1172      * @param e
1173      */
1174     onMouseEnter: function(e) {
1175         var me = this;
1176         me.addClsWithUI(me.overCls);
1177         me.fireEvent('mouseover', me, e);
1178     },
1179
1180 <span id='Ext-button-Button-method-onMouseLeave'>    /**
1181 </span>     * @private
1182      * virtual mouseleave handler called when it is detected that the mouseover event
1183      * signified the mouse entering the encapsulating element.
1184      * @param e
1185      */
1186     onMouseLeave: function(e) {
1187         var me = this;
1188         me.removeClsWithUI(me.overCls);
1189         me.fireEvent('mouseout', me, e);
1190     },
1191
1192 <span id='Ext-button-Button-method-onMenuTriggerOver'>    /**
1193 </span>     * @private
1194      * virtual mouseenter handler called when it is detected that the mouseover event
1195      * signified the mouse entering the arrow area of the button - the &lt;em&gt;.
1196      * @param e
1197      */
1198     onMenuTriggerOver: function(e) {
1199         var me = this;
1200         me.overMenuTrigger = true;
1201         me.fireEvent('menutriggerover', me, me.menu, e);
1202     },
1203
1204 <span id='Ext-button-Button-method-onMenuTriggerOut'>    /**
1205 </span>     * @private
1206      * virtual mouseleave handler called when it is detected that the mouseout event
1207      * signified the mouse leaving the arrow area of the button - the &lt;em&gt;.
1208      * @param e
1209      */
1210     onMenuTriggerOut: function(e) {
1211         var me = this;
1212         delete me.overMenuTrigger;
1213         me.fireEvent('menutriggerout', me, me.menu, e);
1214     },
1215
1216     // inherit docs
1217     enable : function(silent) {
1218         var me = this;
1219
1220         me.callParent(arguments);
1221
1222         me.removeClsWithUI('disabled');
1223
1224         return me;
1225     },
1226
1227     // inherit docs
1228     disable : function(silent) {
1229         var me = this;
1230
1231         me.callParent(arguments);
1232
1233         me.addClsWithUI('disabled');
1234         me.removeClsWithUI(me.overCls);
1235
1236         return me;
1237     },
1238
1239 <span id='Ext-button-Button-method-setScale'>    /**
1240 </span>     * Method to change the scale of the button. See {@link #scale} for allowed configurations.
1241      * @param {String} scale The scale to change to.
1242      */
1243     setScale: function(scale) {
1244         var me = this,
1245             ui = me.ui.replace('-' + me.scale, '');
1246
1247         //check if it is an allowed scale
1248         if (!Ext.Array.contains(me.allowedScales, scale)) {
1249             throw('#setScale: scale must be an allowed scale (' + me.allowedScales.join(', ') + ')');
1250         }
1251
1252         me.scale = scale;
1253         me.setUI(ui);
1254     },
1255
1256     // inherit docs
1257     setUI: function(ui) {
1258         var me = this;
1259
1260         //we need to append the scale to the UI, if not already done
1261         if (me.scale &amp;&amp; !ui.match(me.scale)) {
1262             ui = ui + '-' + me.scale;
1263         }
1264
1265         me.callParent([ui]);
1266
1267         // Set all the state classNames, as they need to include the UI
1268         // me.disabledCls += ' ' + me.baseCls + '-' + me.ui + '-disabled';
1269     },
1270
1271     // private
1272     onFocus: function(e) {
1273         var me = this;
1274         if (!me.disabled) {
1275             me.addClsWithUI(me.focusCls);
1276         }
1277     },
1278
1279     // private
1280     onBlur: function(e) {
1281         var me = this;
1282         me.removeClsWithUI(me.focusCls);
1283     },
1284
1285     // private
1286     onMouseDown: function(e) {
1287         var me = this;
1288         if (!me.disabled &amp;&amp; e.button === 0) {
1289             me.addClsWithUI(me.pressedCls);
1290             me.doc.on('mouseup', me.onMouseUp, me);
1291         }
1292     },
1293     // private
1294     onMouseUp: function(e) {
1295         var me = this;
1296         if (e.button === 0) {
1297             if (!me.pressed) {
1298                 me.removeClsWithUI(me.pressedCls);
1299             }
1300             me.doc.un('mouseup', me.onMouseUp, me);
1301         }
1302     },
1303     // private
1304     onMenuShow: function(e) {
1305         var me = this;
1306         me.ignoreNextClick = 0;
1307         me.addClsWithUI(me.menuActiveCls);
1308         me.fireEvent('menushow', me, me.menu);
1309     },
1310
1311     // private
1312     onMenuHide: function(e) {
1313         var me = this;
1314         me.removeClsWithUI(me.menuActiveCls);
1315         me.ignoreNextClick = Ext.defer(me.restoreClick, 250, me);
1316         me.fireEvent('menuhide', me, me.menu);
1317     },
1318
1319     // private
1320     restoreClick: function() {
1321         this.ignoreNextClick = 0;
1322     },
1323
1324     // private
1325     onDownKey: function() {
1326         var me = this;
1327
1328         if (!me.disabled) {
1329             if (me.menu) {
1330                 me.showMenu();
1331             }
1332         }
1333     },
1334
1335 <span id='Ext-button-Button-method-getPersistentBtnPadding'>    /**
1336 </span>     * @private
1337      * Some browsers (notably Safari and older Chromes on Windows) add extra &quot;padding&quot; inside the button
1338      * element that cannot be removed. This method returns the size of that padding with a one-time detection.
1339      * @return {Number[]} [top, right, bottom, left]
1340      */
1341     getPersistentBtnPadding: function() {
1342         var cls = Ext.button.Button,
1343             padding = cls.persistentPadding,
1344             btn, leftTop, btnEl, btnInnerEl;
1345
1346         if (!padding) {
1347             padding = cls.persistentPadding = [0, 0, 0, 0]; //set early to prevent recursion
1348
1349             if (!Ext.isIE) { //short-circuit IE as it sometimes gives false positive for padding
1350                 // Create auto-size button offscreen and measure its insides
1351                 btn = Ext.create('Ext.button.Button', {
1352                     renderTo: Ext.getBody(),
1353                     text: 'test',
1354                     style: 'position:absolute;top:-999px;'
1355                 });
1356                 btnEl = btn.btnEl;
1357                 btnInnerEl = btn.btnInnerEl;
1358                 btnEl.setSize(null, null); //clear any hard dimensions on the button el to see what it does naturally
1359
1360                 leftTop = btnInnerEl.getOffsetsTo(btnEl);
1361                 padding[0] = leftTop[1];
1362                 padding[1] = btnEl.getWidth() - btnInnerEl.getWidth() - leftTop[0];
1363                 padding[2] = btnEl.getHeight() - btnInnerEl.getHeight() - leftTop[1];
1364                 padding[3] = leftTop[0];
1365
1366                 btn.destroy();
1367             }
1368         }
1369
1370         return padding;
1371     }
1372
1373 }, function() {
1374     var groups = {};
1375
1376     function toggleGroup(btn, state) {
1377         var g, i, l;
1378         if (state) {
1379             g = groups[btn.toggleGroup];
1380             for (i = 0, l = g.length; i &lt; l; i++) {
1381                 if (g[i] !== btn) {
1382                     g[i].toggle(false);
1383                 }
1384             }
1385         }
1386     }
1387
1388 <span id='Ext-ButtonToggleManager'>    /**
1389 </span>     * Private utility class used by Button
1390      * @hide
1391      */
1392     Ext.ButtonToggleManager = {
1393         register: function(btn) {
1394             if (!btn.toggleGroup) {
1395                 return;
1396             }
1397             var group = groups[btn.toggleGroup];
1398             if (!group) {
1399                 group = groups[btn.toggleGroup] = [];
1400             }
1401             group.push(btn);
1402             btn.on('toggle', toggleGroup);
1403         },
1404
1405         unregister: function(btn) {
1406             if (!btn.toggleGroup) {
1407                 return;
1408             }
1409             var group = groups[btn.toggleGroup];
1410             if (group) {
1411                 Ext.Array.remove(group, btn);
1412                 btn.un('toggle', toggleGroup);
1413             }
1414         },
1415
1416 <span id='Ext-ButtonToggleManager-method-getPressed'>        /**
1417 </span>         * Gets the pressed button in the passed group or null
1418          * @param {String} group
1419          * @return {Ext.button.Button}
1420          */
1421         getPressed: function(group) {
1422             var g = groups[group],
1423                 i = 0,
1424                 len;
1425             if (g) {
1426                 for (len = g.length; i &lt; len; i++) {
1427                     if (g[i].pressed === true) {
1428                         return g[i];
1429                     }
1430                 }
1431             }
1432             return null;
1433         }
1434     };
1435 });
1436 </pre>
1437 </body>
1438 </html>