src/button/Button.js

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