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