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