docs/source/Button.html

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