4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-button-Button-method-constructor'><span id='Ext-button-Button'>/**
19 </span></span> * @class Ext.button.Button
20 * @extends Ext.Component
22 Create simple buttons with this component. Customisations include {@link #config-iconAlign aligned}
23 {@link #config-iconCls icons}, {@link #config-menu dropdown menus}, {@link #config-tooltip tooltips}
24 and {@link #config-scale sizing options}. Specify a {@link #config-handler handler} to run code when
25 a user clicks the button, or use {@link #config-listeners listeners} for other events such as
26 {@link #events-mouseover mouseover}.
28 {@img Ext.button.Button/Ext.button.Button1.png Ext.button.Button component}
31 Ext.create('Ext.Button', {
33 renderTo: Ext.getBody(),
35 alert('You clicked the button!')
39 The {@link #handler} configuration can also be updated dynamically using the {@link #setHandler} method.
42 Ext.create('Ext.Button', {
43 text : 'Dyanmic Handler Button',
44 renderTo: Ext.getBody(),
45 handler : function() {
46 //this button will spit out a different number every time you click it.
47 //so firstly we must check if that number is already set:
48 if (this.clickCount) {
49 //looks like the property is already set, so lets just add 1 to that number and alert the user
51 alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..');
53 //if the clickCount property is not set, we will set it and alert the user
55 alert('You just clicked the button for the first time!\n\nTry pressing it again..');
60 A button within a container:
62 Ext.create('Ext.Container', {
63 renderTo: Ext.getBody(),
72 A useful option of Button is the {@link #scale} configuration. This configuration has three different options:
77 {@img Ext.button.Button/Ext.button.Button2.png Ext.button.Button component}
80 Ext.create('Ext.Button', {
81 renderTo: document.body,
86 Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`.
87 {@img Ext.button.Button/Ext.button.Button3.png Ext.button.Button component}
90 Ext.create('Ext.Button', {
91 renderTo: Ext.getBody(),
96 You can assign a menu to a button by using the {@link #menu} configuration. This standard configuration can either be a reference to a {@link Ext.menu.Menu menu}
97 object, a {@link Ext.menu.Menu menu} id or a {@link Ext.menu.Menu menu} config blob. When assigning a menu to a button, an arrow is automatically added to the button.
98 You can change the alignment of the arrow using the {@link #arrowAlign} configuration on button.
99 {@img Ext.button.Button/Ext.button.Button4.png Ext.button.Button component}
102 Ext.create('Ext.Button', {
103 text : 'Menu button',
104 renderTo : Ext.getBody(),
105 arrowAlign: 'bottom',
114 Using listeners, you can easily listen to events fired by any component, using the {@link #listeners} configuration or using the {@link #addListener} method.
115 Button has a variety of different listeners:
127 Ext.create('Ext.Button', {
129 renderTo : Ext.getBody(),
132 //this == the button, as we are in the local scope
133 this.setText('I was clicked!');
135 mouseover: function() {
136 //set a new config which says we moused over, if not already set
137 if (!this.mousedOver) {
138 this.mousedOver = true;
139 alert('You moused over a button!\n\nI wont do this again.');
146 * Create a new button
147 * @param {Object} config The config object
150 * @docauthor Robert Dougan <rob@sencha.com>
152 Ext.define('Ext.button.Button', {
154 /* Begin Definitions */
155 alias: 'widget.button',
156 extend: 'Ext.Component',
160 'Ext.util.ClickRepeater',
161 'Ext.layout.component.Button',
162 'Ext.util.TextMetrics',
166 alternateClassName: 'Ext.Button',
167 /* End Definitions */
170 componentLayout: 'button',
172 <span id='Ext-button-Button-property-hidden'> /**
173 </span> * Read-only. True if this button is hidden
178 <span id='Ext-button-Button-property-disabled'> /**
179 </span> * Read-only. True if this button is disabled
184 <span id='Ext-button-Button-property-pressed'> /**
185 </span> * Read-only. True if this button is pressed (only if enableToggle = true)
190 <span id='Ext-button-Button-cfg-text'> /**
191 </span> * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
194 <span id='Ext-button-Button-cfg-icon'> /**
195 </span> * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
196 * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
199 <span id='Ext-button-Button-cfg-handler'> /**
200 </span> * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
201 * The handler is passed the following parameters:<div class="mdetail-params"><ul>
202 * <li><code>b</code> : Button<div class="sub-desc">This Button.</div></li>
203 * <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li>
204 * </ul></div>
207 <span id='Ext-button-Button-cfg-minWidth'> /**
208 </span> * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
209 * See also {@link Ext.panel.Panel}.<tt>{@link Ext.panel.Panel#minButtonWidth minButtonWidth}</tt>.
212 <span id='Ext-button-Button-cfg-tooltip'> /**
213 </span> * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
216 <span id='Ext-button-Button-cfg-hidden'> /**
217 </span> * @cfg {Boolean} hidden True to start hidden (defaults to false)
220 <span id='Ext-button-Button-cfg-disabled'> /**
221 </span> * @cfg {Boolean} disabled True to start disabled (defaults to false)
224 <span id='Ext-button-Button-cfg-pressed'> /**
225 </span> * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
228 <span id='Ext-button-Button-cfg-toggleGroup'> /**
229 </span> * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
232 <span id='Ext-button-Button-cfg-repeat'> /**
233 </span> * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
234 * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
237 <span id='Ext-button-Button-cfg-tabIndex'> /**
238 </span> * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
241 <span id='Ext-button-Button-cfg-allowDepress'> /**
242 </span> * @cfg {Boolean} allowDepress
243 * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
246 <span id='Ext-button-Button-cfg-enableToggle'> /**
247 </span> * @cfg {Boolean} enableToggle
248 * True to enable pressed/not pressed toggling (defaults to false)
252 <span id='Ext-button-Button-cfg-toggleHandler'> /**
253 </span> * @cfg {Function} toggleHandler
254 * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:<ul class="mdetail-params">
255 * <li><b>button</b> : Ext.button.Button<div class="sub-desc">this Button object</div></li>
256 * <li><b>state</b> : Boolean<div class="sub-desc">The next state of the Button, true means pressed.</div></li>
260 <span id='Ext-button-Button-cfg-menu'> /**
261 </span> * @cfg {Mixed} menu
262 * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
265 <span id='Ext-button-Button-cfg-menuAlign'> /**
266 </span> * @cfg {String} menuAlign
267 * The position to align the menu to (see {@link Ext.core.Element#alignTo} for more details, defaults to 'tl-bl?').
271 <span id='Ext-button-Button-cfg-overflowText'> /**
272 </span> * @cfg {String} overflowText If used in a {@link Ext.toolbar.Toolbar Toolbar}, the
273 * text to be used if this item is shown in the overflow menu. See also
274 * {@link Ext.toolbar.Item}.<code>{@link Ext.toolbar.Item#overflowText overflowText}</code>.
277 <span id='Ext-button-Button-cfg-iconCls'> /**
278 </span> * @cfg {String} iconCls
279 * A css class which sets a background image to be used as the icon for this button
282 <span id='Ext-button-Button-cfg-type'> /**
283 </span> * @cfg {String} type
284 * submit, reset or button - defaults to 'button'
288 <span id='Ext-button-Button-cfg-clickEvent'> /**
289 </span> * @cfg {String} clickEvent
290 * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
291 * Defaults to <tt>'click'</tt>.
295 <span id='Ext-button-Button-cfg-preventDefault'> /**
296 </span> * @cfg {Boolean} preventDefault
297 * True to prevent the default action when the {@link #clickEvent} is processed. Defaults to true.
299 preventDefault: true,
301 <span id='Ext-button-Button-cfg-handleMouseEvents'> /**
302 </span> * @cfg {Boolean} handleMouseEvents
303 * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
305 handleMouseEvents: true,
307 <span id='Ext-button-Button-cfg-tooltipType'> /**
308 </span> * @cfg {String} tooltipType
309 * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
313 <span id='Ext-button-Button-cfg-baseCls'> /**
314 </span> * @cfg {String} baseCls
315 * The base CSS class to add to all buttons. (Defaults to 'x-btn')
317 baseCls: Ext.baseCSSPrefix + 'btn',
319 <span id='Ext-button-Button-cfg-pressedCls'> /**
320 </span> * @cfg {String} pressedCls
321 * The CSS class to add to a button when it is in the pressed state. (Defaults to 'x-btn-pressed')
323 pressedCls: 'pressed',
325 <span id='Ext-button-Button-cfg-overCls'> /**
326 </span> * @cfg {String} overCls
327 * The CSS class to add to a button when it is in the over (hovered) state. (Defaults to 'x-btn-over')
331 <span id='Ext-button-Button-cfg-focusCls'> /**
332 </span> * @cfg {String} focusCls
333 * The CSS class to add to a button when it is in the focussed state. (Defaults to 'x-btn-focus')
337 <span id='Ext-button-Button-cfg-menuActiveCls'> /**
338 </span> * @cfg {String} menuActiveCls
339 * The CSS class to add to a button when it's menu is active. (Defaults to 'x-btn-menu-active')
341 menuActiveCls: 'menu-active',
343 <span id='Ext-button-Button-cfg-baseParams'> /**
344 </span> * @cfg {Object} baseParams
345 * An object literal of parameters to pass to the url when the {@link #href} property is specified.
348 <span id='Ext-button-Button-cfg-params'> /**
349 </span> * @cfg {Object} params
350 * An object literal of parameters to pass to the url when the {@link #href} property is specified.
351 * Any params override {@link #baseParams}. New params can be set using the {@link #setParams} method.
358 '<em class="{splitCls}">' +
359 '<tpl if="href">' +
360 '<a href="{href}" target="{target}"<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl> role="link">' +
361 '<span class="{baseCls}-inner">{text}</span>' +
364 '<tpl if="!href">' +
365 '<button type="{type}" hidefocus="true"' +
366 // the autocomplete="off" is required to prevent Firefox from remembering
367 // the button's disabled state between page reloads.
368 '<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl> role="button" autocomplete="off">' +
369 '<span class="{baseCls}-inner" style="{innerSpanStyle}">{text}</span>' +
374 <span id='Ext-button-Button-cfg-scale'> /**
375 </span> * @cfg {String} scale
376 * <p>(Optional) The size of the Button. Three values are allowed:</p>
377 * <ul class="mdetail-params">
378 * <li>'small'<div class="sub-desc">Results in the button element being 16px high.</div></li>
379 * <li>'medium'<div class="sub-desc">Results in the button element being 24px high.</div></li>
380 * <li>'large'<div class="sub-desc">Results in the button element being 32px high.</div></li>
382 * <p>Defaults to <b><tt>'small'</tt></b>.</p>
386 <span id='Ext-button-Button-property-allowedScales'> /**
387 </span> * @private An array of allowed scales.
389 allowedScales: ['small', 'medium', 'large'],
391 <span id='Ext-button-Button-cfg-scope'> /**
392 </span> * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the
393 * <code>{@link #handler}</code> and <code>{@link #toggleHandler}</code> is
394 * executed. Defaults to this Button.
397 <span id='Ext-button-Button-cfg-iconAlign'> /**
398 </span> * @cfg {String} iconAlign
399 * <p>(Optional) The side of the Button box to render the icon. Four values are allowed:</p>
400 * <ul class="mdetail-params">
401 * <li>'top'<div class="sub-desc"></div></li>
402 * <li>'right'<div class="sub-desc"></div></li>
403 * <li>'bottom'<div class="sub-desc"></div></li>
404 * <li>'left'<div class="sub-desc"></div></li>
406 * <p>Defaults to <b><tt>'left'</tt></b>.</p>
410 <span id='Ext-button-Button-cfg-arrowAlign'> /**
411 </span> * @cfg {String} arrowAlign
412 * <p>(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}.
413 * Two values are allowed:</p>
414 * <ul class="mdetail-params">
415 * <li>'right'<div class="sub-desc"></div></li>
416 * <li>'bottom'<div class="sub-desc"></div></li>
418 * <p>Defaults to <b><tt>'right'</tt></b>.</p>
422 <span id='Ext-button-Button-cfg-arrowCls'> /**
423 </span> * @cfg {String} arrowCls
424 * <p>(Optional) The className used for the inner arrow element if the button has a menu.</p>
428 <span id='Ext-button-Button-property-template'> /**
429 </span> * @cfg {Ext.Template} template (Optional)
430 * <p>A {@link Ext.Template Template} used to create the Button's DOM structure.</p>
431 * Instances, or subclasses which need a different DOM structure may provide a different
432 * template layout in conjunction with an implementation of {@link #getTemplateArgs}.
437 <span id='Ext-button-Button-cfg-cls'> /**
438 </span> * @cfg {String} cls
439 * A CSS class string to apply to the button's main element.
442 <span id='Ext-button-Button-property-menu'> /**
443 </span> * @property menu
445 * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
448 <span id='Ext-button-Button-cfg-autoWidth'> /**
449 </span> * @cfg {Boolean} autoWidth
450 * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content.
451 * If the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent
452 * the button from doing this automatic sizing.
453 * Defaults to <tt>undefined</tt>.
456 maskOnDisable: false,
459 initComponent: function() {
461 me.callParent(arguments);
464 <span id='Ext-button-Button-event-click'> /**
465 </span> * @event click
466 * Fires when this button is clicked
467 * @param {Button} this
468 * @param {EventObject} e The click event
472 <span id='Ext-button-Button-event-toggle'> /**
473 </span> * @event toggle
474 * Fires when the 'pressed' state of this button changes (only if enableToggle = true)
475 * @param {Button} this
476 * @param {Boolean} pressed
480 <span id='Ext-button-Button-event-mouseover'> /**
481 </span> * @event mouseover
482 * Fires when the mouse hovers over the button
483 * @param {Button} this
484 * @param {Event} e The event object
488 <span id='Ext-button-Button-event-mouseout'> /**
489 </span> * @event mouseout
490 * Fires when the mouse exits the button
491 * @param {Button} this
492 * @param {Event} e The event object
496 <span id='Ext-button-Button-event-menushow'> /**
497 </span> * @event menushow
498 * If this button has a menu, this event fires when it is shown
499 * @param {Button} this
504 <span id='Ext-button-Button-event-menuhide'> /**
505 </span> * @event menuhide
506 * If this button has a menu, this event fires when it is hidden
507 * @param {Button} this
512 <span id='Ext-button-Button-event-menutriggerover'> /**
513 </span> * @event menutriggerover
514 * If this button has a menu, this event fires when the mouse enters the menu triggering element
515 * @param {Button} this
517 * @param {EventObject} e
521 <span id='Ext-button-Button-event-menutriggerout'> /**
522 </span> * @event menutriggerout
523 * If this button has a menu, this event fires when the mouse leaves the menu triggering element
524 * @param {Button} this
526 * @param {EventObject} e
532 // Flag that we'll have a splitCls
535 // retrieve menu by id or instantiate instance if needed
536 me.menu = Ext.menu.Manager.get(me.menu);
537 me.menu.ownerCt = me;
540 // Accept url as a synonym for href
545 // preventDefault defaults to false for links
546 if (me.href && !me.hasOwnProperty('preventDefault')) {
547 me.preventDefault = false;
550 if (Ext.isString(me.toggleGroup)) {
551 me.enableToggle = true;
557 initAria: function() {
559 var actionEl = this.getActionEl();
561 actionEl.dom.setAttribute('aria-haspopup', true);
566 getActionEl: function() {
571 getFocusEl: function() {
576 setButtonCls: function() {
581 if (me.useSetClass) {
582 if (!Ext.isEmpty(me.oldCls)) {
583 me.removeClsWithUI(me.oldCls);
584 me.removeClsWithUI(me.pressedCls);
587 // Check whether the button has an icon or not, and if it has an icon, what is th alignment
588 if (me.iconCls || me.icon) {
590 cls.push('icon-text-' + me.iconAlign);
594 } else if (me.text) {
599 me.addClsWithUI(cls);
600 me.addClsWithUI(me.pressed ? me.pressedCls : null);
605 onRender: function(ct, position) {
606 // classNames for the button
610 // Apply the renderData to the template args
611 Ext.applyIf(me.renderData, me.getTemplateArgs());
613 // Extract the button and the button wrapping element
614 Ext.applyIf(me.renderSelectors, {
615 btnEl : me.href ? 'a' : 'button',
617 btnInnerEl: '.' + me.baseCls + '-inner'
621 me.ui = me.ui + '-' + me.scale;
624 // Render internal structure
625 me.callParent(arguments);
627 // If it is a split button + has a toolip for the arrow
628 if (me.split && me.arrowTooltip) {
629 me.arrowEl.dom[me.tooltipType] = me.arrowTooltip;
632 // Add listeners to the focus and blur events on the element
639 // Set btn as a local variable for easy access
647 me.setIconCls(me.iconCls);
651 me.setTooltip(me.tooltip, true);
654 // Add the mouse events to the button
655 if (me.handleMouseEvents) {
658 mouseover: me.onMouseOver,
659 mouseout: me.onMouseOut,
660 mousedown: me.onMouseDown
665 mousemove: me.onMouseMove,
671 // Check if the button has a menu
679 me.keyMap = Ext.create('Ext.util.KeyMap', me.el, {
680 key: Ext.EventObject.DOWN,
681 handler: me.onDownKey,
686 // Check if it is a repeat button
688 repeater = Ext.create('Ext.util.ClickRepeater', btn, Ext.isObject(me.repeat) ? me.repeat: {});
689 me.mon(repeater, 'click', me.onRepeatClick, me);
691 me.mon(btn, me.clickEvent, me.onClick, me);
694 // Register the button in the toggle manager
695 Ext.ButtonToggleManager.register(me);
698 <span id='Ext-button-Button-method-getTemplateArgs'> /**
699 </span> * <p>This method returns an object which provides substitution parameters for the {@link #renderTpl XTemplate} used
700 * to create this Button's DOM structure.</p>
701 * <p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
702 * own implementation of this method.</p>
703 * <p>The default implementation which provides data for the default {@link #template} returns an Object containing the
704 * following properties:</p><div class="mdetail-params"><ul>
705 * <li><code>type</code> : The &lt;button&gt;'s {@link #type}</li>
706 * <li><code>splitCls</code> : A CSS class to determine the presence and position of an arrow icon. (<code>'x-btn-arrow'</code> or <code>'x-btn-arrow-bottom'</code> or <code>''</code>)</li>
707 * <li><code>cls</code> : A CSS class name applied to the Button's main &lt;tbody&gt; element which determines the button's scale and icon alignment.</li>
708 * <li><code>text</code> : The {@link #text} to display ion the Button.</li>
709 * <li><code>tabIndex</code> : The tab index within the input flow.</li>
710 * </ul></div>
711 * @return {Array} Substitution data for a Template.
713 getTemplateArgs: function() {
715 persistentPadding = me.getPersistentBtnPadding(),
718 // Create negative margin offsets to counteract persistent button padding if needed
719 if (Math.max.apply(Math, persistentPadding) > 0) {
720 innerSpanStyle = 'margin:' + Ext.Array.map(persistentPadding, function(pad) {
727 target : me.target || '_blank',
729 splitCls : me.getSplitCls(),
731 text : me.text || '&#160;',
732 tabIndex : me.tabIndex,
733 innerSpanStyle: innerSpanStyle
737 <span id='Ext-button-Button-method-getHref'> /**
739 * If there is a configured href for this Button, returns the href with parameters appended.
740 * @returns The href string with parameters appended.
742 getHref: function() {
744 params = Ext.apply({}, me.baseParams);
746 // write baseParams first, then write any params
747 params = Ext.apply(params, me.params);
748 return me.href ? Ext.urlAppend(me.href, Ext.Object.toQueryString(params)) : false;
751 <span id='Ext-button-Button-method-setParams'> /**
752 </span> * <p><b>Only valid if the Button was originally configured with a {@link #url}</b></p>
753 * <p>Sets the href of the link dynamically according to the params passed, and any {@link #baseParams} configured.</p>
754 * @param {Object} params Parameters to use in the href URL.
756 setParams: function(params) {
757 this.params = params;
758 this.btnEl.dom.href = this.getHref();
761 getSplitCls: function() {
763 return me.split ? (me.baseCls + '-' + me.arrowCls) + ' ' + (me.baseCls + '-' + me.arrowCls + '-' + me.arrowAlign) : '';
767 afterRender: function() {
769 me.useSetClass = true;
771 me.doc = Ext.getDoc();
772 this.callParent(arguments);
775 <span id='Ext-button-Button-method-setIconCls'> /**
776 </span> * Sets the CSS class that provides a background image to use as the button's icon. This method also changes
777 * the value of the {@link #iconCls} config internally.
778 * @param {String} cls The CSS class providing the icon image
779 * @return {Ext.button.Button} this
781 setIconCls: function(cls) {
783 btnInnerEl = me.btnInnerEl;
785 // Remove the previous iconCls from the button
786 btnInnerEl.removeCls(me.iconCls);
787 btnInnerEl.addCls(cls || '');
794 <span id='Ext-button-Button-method-setTooltip'> /**
795 </span> * Sets the tooltip for this Button.
796 * @param {String/Object} tooltip. This may be:<div class="mdesc-details"><ul>
797 * <li><b>String</b> : A string to be used as innerHTML (html tags are accepted) to show in a tooltip</li>
798 * <li><b>Object</b> : A configuration object for {@link Ext.tip.QuickTipManager#register}.</li>
799 * </ul></div>
800 * @return {Ext.button.Button} this
802 setTooltip: function(tooltip, initial) {
809 if (Ext.isObject(tooltip)) {
810 Ext.tip.QuickTipManager.register(Ext.apply({
814 me.tooltip = tooltip;
816 me.btnEl.dom.setAttribute('data-' + this.tooltipType, tooltip);
819 me.tooltip = tooltip;
825 getRefItems: function(deep){
826 var menu = this.menu,
830 items = menu.getRefItems(deep);
837 clearTip: function() {
838 if (Ext.isObject(this.tooltip)) {
839 Ext.tip.QuickTipManager.unregister(this.btnEl);
844 beforeDestroy: function() {
849 if (me.menu && me.destroyMenu !== false) {
850 Ext.destroy(me.btnEl, me.btnInnerEl, me.menu);
852 Ext.destroy(me.repeater);
856 onDestroy: function() {
859 me.doc.un('mouseover', me.monitorMouseOver, me);
860 me.doc.un('mouseup', me.onMouseUp, me);
863 delete me.btnInnerEl;
864 Ext.ButtonToggleManager.unregister(me);
866 Ext.destroy(me.keyMap);
872 <span id='Ext-button-Button-method-setHandler'> /**
873 </span> * Assigns this Button's click handler
874 * @param {Function} handler The function to call when the button is clicked
875 * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.
876 * Defaults to this Button.
877 * @return {Ext.button.Button} this
879 setHandler: function(handler, scope) {
880 this.handler = handler;
885 <span id='Ext-button-Button-method-setText'> /**
886 </span> * Sets this Button's text
887 * @param {String} text The button text
888 * @return {Ext.button.Button} this
890 setText: function(text) {
894 me.btnInnerEl.update(text || '&#160;');
897 me.doComponentLayout();
901 <span id='Ext-button-Button-method-setIcon'> /**
902 </span> * Sets the background image (inline style) of the button. This method also changes
903 * the value of the {@link #icon} config internally.
904 * @param {String} icon The path to an image to display in the button
905 * @return {Ext.button.Button} this
907 setIcon: function(icon) {
909 btnInnerEl = me.btnInnerEl;
912 btnInnerEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
918 <span id='Ext-button-Button-method-getText'> /**
919 </span> * Gets the text for this Button
920 * @return {String} The button text
922 getText: function() {
926 <span id='Ext-button-Button-method-toggle'> /**
927 </span> * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
928 * @param {Boolean} state (optional) Force a particular state
929 * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.
930 * @return {Ext.button.Button} this
932 toggle: function(state, suppressEvent) {
934 state = state === undefined ? !me.pressed: !!state;
935 if (state !== me.pressed) {
937 me[state ? 'addClsWithUI': 'removeClsWithUI'](me.pressedCls);
939 me.btnEl.dom.setAttribute('aria-pressed', state);
941 if (!suppressEvent) {
942 me.fireEvent('toggle', me, state);
943 Ext.callback(me.toggleHandler, me.scope || me, [me, state]);
949 <span id='Ext-button-Button-method-showMenu'> /**
950 </span> * Show this button's menu (if it has one)
952 showMenu: function() {
954 if (me.rendered && me.menu) {
956 Ext.tip.QuickTipManager.getQuickTip().cancelShow(me.btnEl);
958 if (me.menu.isVisible()) {
962 me.menu.showBy(me.el, me.menuAlign);
967 <span id='Ext-button-Button-method-hideMenu'> /**
968 </span> * Hide this button's menu (if it has one)
970 hideMenu: function() {
971 if (this.hasVisibleMenu()) {
977 <span id='Ext-button-Button-method-hasVisibleMenu'> /**
978 </span> * Returns true if the button has a menu and it is visible
981 hasVisibleMenu: function() {
982 var menu = this.menu;
983 return menu && menu.rendered && menu.isVisible();
987 onRepeatClick: function(repeat, e) {
992 onClick: function(e) {
994 if (me.preventDefault || (me.disabled && me.getHref()) && e) {
997 if (e.button !== 0) {
1001 if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) {
1004 if (me.menu && !me.hasVisibleMenu() && !me.ignoreNextClick) {
1007 me.fireEvent('click', me, e);
1009 me.handler.call(me.scope || me, me, e);
1015 <span id='Ext-button-Button-method-onMouseOver'> /**
1016 </span> * @private mouseover handler called when a mouseover event occurs anywhere within the encapsulating element.
1017 * The targets are interrogated to see what is being entered from where.
1020 onMouseOver: function(e) {
1022 if (!me.disabled && !e.within(me.el, true, true)) {
1027 <span id='Ext-button-Button-method-onMouseOut'> /**
1028 </span> * @private mouseout handler called when a mouseout event occurs anywhere within the encapsulating element -
1029 * or the mouse leaves the encapsulating element.
1030 * The targets are interrogated to see what is being exited to where.
1033 onMouseOut: function(e) {
1035 if (!e.within(me.el, true, true)) {
1036 if (me.overMenuTrigger) {
1037 me.onMenuTriggerOut(e);
1043 <span id='Ext-button-Button-method-onMouseMove'> /**
1044 </span> * @private mousemove handler called when the mouse moves anywhere within the encapsulating element.
1045 * The position is checked to determine if the mouse is entering or leaving the trigger area. Using
1046 * mousemove to check this is more resource intensive than we'd like, but it is necessary because
1047 * the trigger area does not line up exactly with sub-elements so we don't always get mouseover/out
1048 * events when needed. In the future we should consider making the trigger a separate element that
1049 * is absolutely positioned and sized over the trigger area.
1051 onMouseMove: function(e) {
1054 over = me.overMenuTrigger,
1058 if (me.arrowAlign === 'right') {
1059 overlap = e.getX() - el.getX();
1060 btnSize = el.getWidth();
1062 overlap = e.getY() - el.getY();
1063 btnSize = el.getHeight();
1066 if (overlap > (btnSize - me.getTriggerSize())) {
1068 me.onMenuTriggerOver(e);
1072 me.onMenuTriggerOut(e);
1078 <span id='Ext-button-Button-method-getTriggerSize'> /**
1079 </span> * @private Measures the size of the trigger area for menu and split buttons. Will be a width for
1080 * a right-aligned trigger and a height for a bottom-aligned trigger. Cached after first measurement.
1082 getTriggerSize: function() {
1084 size = me.triggerSize,
1085 side, sideFirstLetter, undef;
1087 if (size === undef) {
1088 side = me.arrowAlign;
1089 sideFirstLetter = side.charAt(0);
1090 size = me.triggerSize = me.el.getFrameWidth(sideFirstLetter) + me.btnWrap.getFrameWidth(sideFirstLetter) + (me.frameSize && me.frameSize[side] || 0);
1095 <span id='Ext-button-Button-method-onMouseEnter'> /**
1096 </span> * @private virtual mouseenter handler called when it is detected that the mouseout event
1097 * signified the mouse entering the encapsulating element.
1100 onMouseEnter: function(e) {
1102 me.addClsWithUI(me.overCls);
1103 me.fireEvent('mouseover', me, e);
1106 <span id='Ext-button-Button-method-onMouseLeave'> /**
1107 </span> * @private virtual mouseleave handler called when it is detected that the mouseover event
1108 * signified the mouse entering the encapsulating element.
1111 onMouseLeave: function(e) {
1113 me.removeClsWithUI(me.overCls);
1114 me.fireEvent('mouseout', me, e);
1117 <span id='Ext-button-Button-method-onMenuTriggerOver'> /**
1118 </span> * @private virtual mouseenter handler called when it is detected that the mouseover event
1119 * signified the mouse entering the arrow area of the button - the <em>.
1122 onMenuTriggerOver: function(e) {
1124 me.overMenuTrigger = true;
1125 me.fireEvent('menutriggerover', me, me.menu, e);
1128 <span id='Ext-button-Button-method-onMenuTriggerOut'> /**
1129 </span> * @private virtual mouseleave handler called when it is detected that the mouseout event
1130 * signified the mouse leaving the arrow area of the button - the <em>.
1133 onMenuTriggerOut: function(e) {
1135 delete me.overMenuTrigger;
1136 me.fireEvent('menutriggerout', me, me.menu, e);
1140 enable : function(silent) {
1143 me.callParent(arguments);
1145 me.removeClsWithUI('disabled');
1151 disable : function(silent) {
1154 me.callParent(arguments);
1156 me.addClsWithUI('disabled');
1161 <span id='Ext-button-Button-method-setScale'> /**
1162 </span> * Method to change the scale of the button. See {@link #scale} for allowed configurations.
1163 * @param {String} scale The scale to change to.
1165 setScale: function(scale) {
1167 ui = me.ui.replace('-' + me.scale, '');
1169 //check if it is an allowed scale
1170 if (!Ext.Array.contains(me.allowedScales, scale)) {
1171 throw('#setScale: scale must be an allowed scale (' + me.allowedScales.join(', ') + ')');
1179 setUI: function(ui) {
1182 //we need to append the scale to the UI, if not already done
1183 if (me.scale && !ui.match(me.scale)) {
1184 ui = ui + '-' + me.scale;
1187 me.callParent([ui]);
1189 // Set all the state classNames, as they need to include the UI
1190 // me.disabledCls += ' ' + me.baseCls + '-' + me.ui + '-disabled';
1194 onFocus: function(e) {
1197 me.addClsWithUI(me.focusCls);
1202 onBlur: function(e) {
1204 me.removeClsWithUI(me.focusCls);
1208 onMouseDown: function(e) {
1210 if (!me.disabled && e.button === 0) {
1211 me.addClsWithUI(me.pressedCls);
1212 me.doc.on('mouseup', me.onMouseUp, me);
1216 onMouseUp: function(e) {
1218 if (e.button === 0) {
1220 me.removeClsWithUI(me.pressedCls);
1222 me.doc.un('mouseup', me.onMouseUp, me);
1226 onMenuShow: function(e) {
1228 me.ignoreNextClick = 0;
1229 me.addClsWithUI(me.menuActiveCls);
1230 me.fireEvent('menushow', me, me.menu);
1234 onMenuHide: function(e) {
1236 me.removeClsWithUI(me.menuActiveCls);
1237 me.ignoreNextClick = Ext.defer(me.restoreClick, 250, me);
1238 me.fireEvent('menuhide', me, me.menu);
1242 restoreClick: function() {
1243 this.ignoreNextClick = 0;
1247 onDownKey: function() {
1257 <span id='Ext-button-Button-method-getPersistentBtnPadding'> /**
1258 </span> * @private Some browsers (notably Safari and older Chromes on Windows) add extra "padding" inside the button
1259 * element that cannot be removed. This method returns the size of that padding with a one-time detection.
1260 * @return Array [top, right, bottom, left]
1262 getPersistentBtnPadding: function() {
1263 var cls = Ext.button.Button,
1264 padding = cls.persistentPadding,
1265 btn, leftTop, btnEl, btnInnerEl;
1268 padding = cls.persistentPadding = [0, 0, 0, 0]; //set early to prevent recursion
1270 if (!Ext.isIE) { //short-circuit IE as it sometimes gives false positive for padding
1271 // Create auto-size button offscreen and measure its insides
1272 btn = Ext.create('Ext.button.Button', {
1273 renderTo: Ext.getBody(),
1275 style: 'position:absolute;top:-999px;'
1278 btnInnerEl = btn.btnInnerEl;
1279 btnEl.setSize(null, null); //clear any hard dimensions on the button el to see what it does naturally
1281 leftTop = btnInnerEl.getOffsetsTo(btnEl);
1282 padding[0] = leftTop[1];
1283 padding[1] = btnEl.getWidth() - btnInnerEl.getWidth() - leftTop[0];
1284 padding[2] = btnEl.getHeight() - btnInnerEl.getHeight() - leftTop[1];
1285 padding[3] = leftTop[0];
1298 function toggleGroup(btn, state) {
1300 g = groups[btn.toggleGroup];
1301 for (i = 0, l = g.length; i < l; i++) {
1308 // Private utility class used by Button
1309 Ext.ButtonToggleManager = {
1310 register: function(btn) {
1311 if (!btn.toggleGroup) {
1314 var group = groups[btn.toggleGroup];
1316 group = groups[btn.toggleGroup] = [];
1319 btn.on('toggle', toggleGroup);
1322 unregister: function(btn) {
1323 if (!btn.toggleGroup) {
1326 var group = groups[btn.toggleGroup];
1328 Ext.Array.remove(group, btn);
1329 btn.un('toggle', toggleGroup);
1333 <span id='Ext-button-Button-method-getPressed'> /**
1334 </span> * Gets the pressed button in the passed group or null
1335 * @param {String} group
1338 getPressed: function(group) {
1339 var g = groups[group],
1343 for (len = g.length; i < len; i++) {
1344 if (g[i].pressed === true) {