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