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