src/widgets/Button.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.Button\r
   9  * @extends Ext.BoxComponent\r
  10  * Simple Button class\r
  11  * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)\r
  12  * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image\r
  13  * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')\r
  14  * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).\r
  15  * The handler is passed the following parameters:<div class="mdetail-params"><ul>\r
  16  * <li><code>b</code> : Button<div class="sub-desc">This Button.</div></li>\r
  17  * <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li>\r
  18  * </ul></div>\r
  19  * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).\r
  20  * See also {@link Ext.Panel}.<tt>{@link Ext.Panel#minButtonWidth minButtonWidth}</tt>.\r
  21  * @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\r
  22  * @cfg {Boolean} hidden True to start hidden (defaults to false)\r
  23  * @cfg {Boolean} disabled True to start disabled (defaults to false)\r
  24  * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)\r
  25  * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)\r
  26  * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be\r
  27  * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).\r
  28  * @constructor\r
  29  * Create a new button\r
  30  * @param {Object} config The config object\r
  31  * @xtype button\r
  32  */\r
  33 Ext.Button = Ext.extend(Ext.BoxComponent, {\r
  34     /**\r
  35      * Read-only. True if this button is hidden\r
  36      * @type Boolean\r
  37      */\r
  38     hidden : false,\r
  39     /**\r
  40      * Read-only. True if this button is disabled\r
  41      * @type Boolean\r
  42      */\r
  43     disabled : false,\r
  44     /**\r
  45      * Read-only. True if this button is pressed (only if enableToggle = true)\r
  46      * @type Boolean\r
  47      */\r
  48     pressed : false,\r
  49 \r
  50     /**\r
  51      * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)\r
  52      */\r
  53 \r
  54     /**\r
  55      * @cfg {Boolean} allowDepress\r
  56      * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.\r
  57      */\r
  58 \r
  59     /**\r
  60      * @cfg {Boolean} enableToggle\r
  61      * True to enable pressed/not pressed toggling (defaults to false)\r
  62      */\r
  63     enableToggle : false,\r
  64     /**\r
  65      * @cfg {Function} toggleHandler\r
  66      * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:<ul class="mdetail-params">\r
  67      * <li><b>button</b> : Ext.Button<div class="sub-desc">this Button object</div></li>\r
  68      * <li><b>state</b> : Boolean<div class="sub-desc">The next state of the Button, true means pressed.</div></li>\r
  69      * </ul>\r
  70      */\r
  71     /**\r
  72      * @cfg {Mixed} menu\r
  73      * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).\r
  74      */\r
  75     /**\r
  76      * @cfg {String} menuAlign\r
  77      * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').\r
  78      */\r
  79     menuAlign : 'tl-bl?',\r
  80 \r
  81     /**\r
  82      * @cfg {String} overflowText If used in a {@link Ext.Toolbar Toolbar}, the\r
  83      * text to be used if this item is shown in the overflow menu. See also\r
  84      * {@link Ext.Toolbar.Item}.<code>{@link Ext.Toolbar.Item#overflowText overflowText}</code>.\r
  85      */\r
  86     /**\r
  87      * @cfg {String} iconCls\r
  88      * A css class which sets a background image to be used as the icon for this button\r
  89      */\r
  90     /**\r
  91      * @cfg {String} type\r
  92      * submit, reset or button - defaults to 'button'\r
  93      */\r
  94     type : 'button',\r
  95 \r
  96     // private\r
  97     menuClassTarget : 'tr:nth(2)',\r
  98 \r
  99     /**\r
 100      * @cfg {String} clickEvent\r
 101      * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).\r
 102      * Defaults to <tt>'click'</tt>.\r
 103      */\r
 104     clickEvent : 'click',\r
 105 \r
 106     /**\r
 107      * @cfg {Boolean} handleMouseEvents\r
 108      * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)\r
 109      */\r
 110     handleMouseEvents : true,\r
 111 \r
 112     /**\r
 113      * @cfg {String} tooltipType\r
 114      * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.\r
 115      */\r
 116     tooltipType : 'qtip',\r
 117 \r
 118     /**\r
 119      * @cfg {String} buttonSelector\r
 120      * <p>(Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the\r
 121      * DOM structure created.</p>\r
 122      * <p>When a custom {@link #template} is used, you  must ensure that this selector results in the selection of\r
 123      * a focussable element.</p>\r
 124      * <p>Defaults to <b><tt>'button:first-child'</tt></b>.</p>\r
 125      */\r
 126     buttonSelector : 'button:first-child',\r
 127 \r
 128     /**\r
 129      * @cfg {String} scale\r
 130      * <p>(Optional) The size of the Button. Three values are allowed:</p>\r
 131      * <ul class="mdetail-params">\r
 132      * <li>'small'<div class="sub-desc">Results in the button element being 16px high.</div></li>\r
 133      * <li>'medium'<div class="sub-desc">Results in the button element being 24px high.</div></li>\r
 134      * <li>'large'<div class="sub-desc">Results in the button element being 32px high.</div></li>\r
 135      * </ul>\r
 136      * <p>Defaults to <b><tt>'small'</tt></b>.</p>\r
 137      */\r
 138     scale : 'small',\r
 139 \r
 140     /**\r
 141      * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the\r
 142      * <code>{@link #handler}</code> and <code>{@link #toggleHandler}</code> is\r
 143      * executed. Defaults to this Button.\r
 144      */\r
 145 \r
 146     /**\r
 147      * @cfg {String} iconAlign\r
 148      * <p>(Optional) The side of the Button box to render the icon. Four values are allowed:</p>\r
 149      * <ul class="mdetail-params">\r
 150      * <li>'top'<div class="sub-desc"></div></li>\r
 151      * <li>'right'<div class="sub-desc"></div></li>\r
 152      * <li>'bottom'<div class="sub-desc"></div></li>\r
 153      * <li>'left'<div class="sub-desc"></div></li>\r
 154      * </ul>\r
 155      * <p>Defaults to <b><tt>'left'</tt></b>.</p>\r
 156      */\r
 157     iconAlign : 'left',\r
 158 \r
 159     /**\r
 160      * @cfg {String} arrowAlign\r
 161      * <p>(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}.\r
 162      * Two values are allowed:</p>\r
 163      * <ul class="mdetail-params">\r
 164      * <li>'right'<div class="sub-desc"></div></li>\r
 165      * <li>'bottom'<div class="sub-desc"></div></li>\r
 166      * </ul>\r
 167      * <p>Defaults to <b><tt>'right'</tt></b>.</p>\r
 168      */\r
 169     arrowAlign : 'right',\r
 170 \r
 171     /**\r
 172      * @cfg {Ext.Template} template (Optional)\r
 173      * <p>A {@link Ext.Template Template} used to create the Button's DOM structure.</p>\r
 174      * Instances, or subclasses which need a different DOM structure may provide a different\r
 175      * template layout in conjunction with an implementation of {@link #getTemplateArgs}.\r
 176      * @type Ext.Template\r
 177      * @property template\r
 178      */\r
 179     /**\r
 180      * @cfg {String} cls\r
 181      * A CSS class string to apply to the button's main element.\r
 182      */\r
 183     /**\r
 184      * @property menu\r
 185      * @type Menu\r
 186      * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.\r
 187      */\r
 188 \r
 189     initComponent : function(){\r
 190         Ext.Button.superclass.initComponent.call(this);\r
 191 \r
 192         this.addEvents(\r
 193             /**\r
 194              * @event click\r
 195              * Fires when this button is clicked\r
 196              * @param {Button} this\r
 197              * @param {EventObject} e The click event\r
 198              */\r
 199             'click',\r
 200             /**\r
 201              * @event toggle\r
 202              * Fires when the 'pressed' state of this button changes (only if enableToggle = true)\r
 203              * @param {Button} this\r
 204              * @param {Boolean} pressed\r
 205              */\r
 206             'toggle',\r
 207             /**\r
 208              * @event mouseover\r
 209              * Fires when the mouse hovers over the button\r
 210              * @param {Button} this\r
 211              * @param {Event} e The event object\r
 212              */\r
 213             'mouseover',\r
 214             /**\r
 215              * @event mouseout\r
 216              * Fires when the mouse exits the button\r
 217              * @param {Button} this\r
 218              * @param {Event} e The event object\r
 219              */\r
 220             'mouseout',\r
 221             /**\r
 222              * @event menushow\r
 223              * If this button has a menu, this event fires when it is shown\r
 224              * @param {Button} this\r
 225              * @param {Menu} menu\r
 226              */\r
 227             'menushow',\r
 228             /**\r
 229              * @event menuhide\r
 230              * If this button has a menu, this event fires when it is hidden\r
 231              * @param {Button} this\r
 232              * @param {Menu} menu\r
 233              */\r
 234             'menuhide',\r
 235             /**\r
 236              * @event menutriggerover\r
 237              * If this button has a menu, this event fires when the mouse enters the menu triggering element\r
 238              * @param {Button} this\r
 239              * @param {Menu} menu\r
 240              * @param {EventObject} e\r
 241              */\r
 242             'menutriggerover',\r
 243             /**\r
 244              * @event menutriggerout\r
 245              * If this button has a menu, this event fires when the mouse leaves the menu triggering element\r
 246              * @param {Button} this\r
 247              * @param {Menu} menu\r
 248              * @param {EventObject} e\r
 249              */\r
 250             'menutriggerout'\r
 251         );\r
 252         if(this.menu){\r
 253             this.menu = Ext.menu.MenuMgr.get(this.menu);\r
 254         }\r
 255         if(Ext.isString(this.toggleGroup)){\r
 256             this.enableToggle = true;\r
 257         }\r
 258     },\r
 259 \r
 260 /**\r
 261   * <p>This method returns an Array which provides substitution parameters for the {@link #template Template} used\r
 262   * to create this Button's DOM structure.</p>\r
 263   * <p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide their\r
 264   * own implementation of this method.</p>\r
 265   * <p>The default implementation which provides data for the default {@link #template} returns an Array containing the\r
 266   * following items:</p><div class="mdetail-params"><ul>\r
 267   * <li>The &lt;button&gt;'s {@link #type}</li>\r
 268   * <li>A CSS class name applied to the Button's main &lt;tbody&gt; element which determines the button's scale and icon alignment.</li>\r
 269   * <li>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>\r
 270   * <li>The {@link #cls} CSS class name applied to the button's wrapping &lt;table&gt; element.</li>\r
 271   * <li>The Component id which is applied to the button's wrapping &lt;table&gt; element.</li>\r
 272   * </ul></div>\r
 273   * @return {Array} Substitution data for a Template.\r
 274  */\r
 275     getTemplateArgs : function(){\r
 276         return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id];\r
 277     },\r
 278 \r
 279     // private\r
 280     setButtonClass : function(){\r
 281         if(this.useSetClass){\r
 282             if(!Ext.isEmpty(this.oldCls)){\r
 283                 this.el.removeClass([this.oldCls, 'x-btn-pressed']);\r
 284             }\r
 285             this.oldCls = (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon';\r
 286             this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]);\r
 287         }\r
 288     },\r
 289 \r
 290     // protected\r
 291     getMenuClass : function(){\r
 292         return this.menu ? (this.arrowAlign != 'bottom' ? 'x-btn-arrow' : 'x-btn-arrow-bottom') : '';\r
 293     },\r
 294 \r
 295     // private\r
 296     onRender : function(ct, position){\r
 297         if(!this.template){\r
 298             if(!Ext.Button.buttonTemplate){\r
 299                 // hideous table template\r
 300                 Ext.Button.buttonTemplate = new Ext.Template(\r
 301                     '<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',\r
 302                     '<tr><td class="x-btn-tl"><i>&#160;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&#160;</i></td></tr>',\r
 303                     '<tr><td class="x-btn-ml"><i>&#160;</i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button type="{0}"></button></em></td><td class="x-btn-mr"><i>&#160;</i></td></tr>',\r
 304                     '<tr><td class="x-btn-bl"><i>&#160;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&#160;</i></td></tr>',\r
 305                     '</tbody></table>');\r
 306                 Ext.Button.buttonTemplate.compile();\r
 307             }\r
 308             this.template = Ext.Button.buttonTemplate;\r
 309         }\r
 310 \r
 311         var btn, targs = this.getTemplateArgs();\r
 312 \r
 313         if(position){\r
 314             btn = this.template.insertBefore(position, targs, true);\r
 315         }else{\r
 316             btn = this.template.append(ct, targs, true);\r
 317         }\r
 318         /**\r
 319          * An {@link Ext.Element Element} encapsulating the Button's clickable element. By default,\r
 320          * this references a <tt>&lt;button&gt;</tt> element. Read only.\r
 321          * @type Ext.Element\r
 322          * @property btnEl\r
 323          */\r
 324         this.btnEl = btn.child(this.buttonSelector);\r
 325         this.mon(this.btnEl, {\r
 326             scope: this,\r
 327             focus: this.onFocus,\r
 328             blur: this.onBlur\r
 329         });\r
 330 \r
 331         this.initButtonEl(btn, this.btnEl);\r
 332 \r
 333         Ext.ButtonToggleMgr.register(this);\r
 334     },\r
 335 \r
 336     // private\r
 337     initButtonEl : function(btn, btnEl){\r
 338         this.el = btn;\r
 339         this.setIcon(this.icon);\r
 340         this.setText(this.text);\r
 341         this.setIconClass(this.iconCls);\r
 342         if(Ext.isDefined(this.tabIndex)){\r
 343             btnEl.dom.tabIndex = this.tabIndex;\r
 344         }\r
 345         if(this.tooltip){\r
 346             this.setTooltip(this.tooltip, true);\r
 347         }\r
 348 \r
 349         if(this.handleMouseEvents){\r
 350             this.mon(btn, {\r
 351                 scope: this,\r
 352                 mouseover: this.onMouseOver,\r
 353                 mousedown: this.onMouseDown\r
 354             });\r
 355 \r
 356             // new functionality for monitoring on the document level\r
 357             //this.mon(btn, 'mouseout', this.onMouseOut, this);\r
 358         }\r
 359 \r
 360         if(this.menu){\r
 361             this.mon(this.menu, {\r
 362                 scope: this,\r
 363                 show: this.onMenuShow,\r
 364                 hide: this.onMenuHide\r
 365             });\r
 366         }\r
 367 \r
 368         if(this.repeat){\r
 369             var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {});\r
 370             this.mon(repeater, 'click', this.onClick, this);\r
 371         }\r
 372         this.mon(btn, this.clickEvent, this.onClick, this);\r
 373     },\r
 374 \r
 375     // private\r
 376     afterRender : function(){\r
 377         Ext.Button.superclass.afterRender.call(this);\r
 378         this.useSetClass = true;\r
 379         this.setButtonClass();\r
 380         this.doc = Ext.getDoc();\r
 381         this.doAutoWidth();\r
 382     },\r
 383 \r
 384     /**\r
 385      * Sets the CSS class that provides a background image to use as the button's icon.  This method also changes\r
 386      * the value of the {@link iconCls} config internally.\r
 387      * @param {String} cls The CSS class providing the icon image\r
 388      * @return {Ext.Button} this\r
 389      */\r
 390     setIconClass : function(cls){\r
 391         this.iconCls = cls;\r
 392         if(this.el){\r
 393             this.btnEl.dom.className = '';\r
 394             this.btnEl.addClass(['x-btn-text', cls || '']);\r
 395             this.setButtonClass();\r
 396         }\r
 397         return this;\r
 398     },\r
 399 \r
 400     /**\r
 401      * Sets the tooltip for this Button.\r
 402      * @param {String/Object} tooltip. This may be:<div class="mdesc-details"><ul>\r
 403      * <li><b>String</b> : A string to be used as innerHTML (html tags are accepted) to show in a tooltip</li>\r
 404      * <li><b>Object</b> : A configuration object for {@link Ext.QuickTips#register}.</li>\r
 405      * </ul></div>\r
 406      * @return {Ext.Button} this\r
 407      */\r
 408     setTooltip : function(tooltip, /* private */ initial){\r
 409         if(this.rendered){\r
 410             if(!initial){\r
 411                 this.clearTip();\r
 412             }\r
 413             if(Ext.isObject(tooltip)){\r
 414                 Ext.QuickTips.register(Ext.apply({\r
 415                       target: this.btnEl.id\r
 416                 }, tooltip));\r
 417                 this.tooltip = tooltip;\r
 418             }else{\r
 419                 this.btnEl.dom[this.tooltipType] = tooltip;\r
 420             }\r
 421         }else{\r
 422             this.tooltip = tooltip;\r
 423         }\r
 424         return this;\r
 425     },\r
 426 \r
 427     // private\r
 428     clearTip : function(){\r
 429         if(Ext.isObject(this.tooltip)){\r
 430             Ext.QuickTips.unregister(this.btnEl);\r
 431         }\r
 432     },\r
 433 \r
 434     // private\r
 435     beforeDestroy : function(){\r
 436         if(this.rendered){\r
 437             this.clearTip();\r
 438         }\r
 439         if(this.menu && this.destroyMenu !== false) {\r
 440             Ext.destroy(this.menu);\r
 441         }\r
 442         Ext.destroy(this.repeater);\r
 443     },\r
 444 \r
 445     // private\r
 446     onDestroy : function(){\r
 447         if(this.rendered){\r
 448             this.doc.un('mouseover', this.monitorMouseOver, this);\r
 449             this.doc.un('mouseup', this.onMouseUp, this);\r
 450             delete this.doc;\r
 451             delete this.btnEl;\r
 452             Ext.ButtonToggleMgr.unregister(this);\r
 453         }\r
 454         Ext.Button.superclass.onDestroy.call(this);\r
 455     },\r
 456 \r
 457     // private\r
 458     doAutoWidth : function(){\r
 459         if(this.el && this.text && this.width === undefined){\r
 460             this.el.setWidth('auto');\r
 461             if(Ext.isIE7 && Ext.isStrict){\r
 462                 var ib = this.btnEl;\r
 463                 if(ib && ib.getWidth() > 20){\r
 464                     ib.clip();\r
 465                     ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));\r
 466                 }\r
 467             }\r
 468             if(this.minWidth){\r
 469                 if(this.el.getWidth() < this.minWidth){\r
 470                     this.el.setWidth(this.minWidth);\r
 471                 }\r
 472             }\r
 473         }\r
 474     },\r
 475 \r
 476     /**\r
 477      * Assigns this Button's click handler\r
 478      * @param {Function} handler The function to call when the button is clicked\r
 479      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.\r
 480      * Defaults to this Button.\r
 481      * @return {Ext.Button} this\r
 482      */\r
 483     setHandler : function(handler, scope){\r
 484         this.handler = handler;\r
 485         this.scope = scope;\r
 486         return this;\r
 487     },\r
 488 \r
 489     /**\r
 490      * Sets this Button's text\r
 491      * @param {String} text The button text\r
 492      * @return {Ext.Button} this\r
 493      */\r
 494     setText : function(text){\r
 495         this.text = text;\r
 496         if(this.el){\r
 497             this.btnEl.update(text || '&#160;');\r
 498             this.setButtonClass();\r
 499         }\r
 500         this.doAutoWidth();\r
 501         return this;\r
 502     },\r
 503 \r
 504     /**\r
 505      * Sets the background image (inline style) of the button.  This method also changes\r
 506      * the value of the {@link icon} config internally.\r
 507      * @param {String} icon The path to an image to display in the button\r
 508      * @return {Ext.Button} this\r
 509      */\r
 510     setIcon : function(icon){\r
 511         this.icon = icon;\r
 512         if(this.el){\r
 513             this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');\r
 514             this.setButtonClass();\r
 515         }\r
 516         return this;\r
 517     },\r
 518 \r
 519     /**\r
 520      * Gets the text for this Button\r
 521      * @return {String} The button text\r
 522      */\r
 523     getText : function(){\r
 524         return this.text;\r
 525     },\r
 526 \r
 527     /**\r
 528      * If a state it passed, it becomes the pressed state otherwise the current state is toggled.\r
 529      * @param {Boolean} state (optional) Force a particular state\r
 530      * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.\r
 531      * @return {Ext.Button} this\r
 532      */\r
 533     toggle : function(state, suppressEvent){\r
 534         state = state === undefined ? !this.pressed : !!state;\r
 535         if(state != this.pressed){\r
 536             if(this.rendered){\r
 537                 this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');\r
 538             }\r
 539             this.pressed = state;\r
 540             if(!suppressEvent){\r
 541                 this.fireEvent('toggle', this, state);\r
 542                 if(this.toggleHandler){\r
 543                     this.toggleHandler.call(this.scope || this, this, state);\r
 544                 }\r
 545             }\r
 546         }\r
 547         return this;\r
 548     },\r
 549 \r
 550     /**\r
 551      * Focus the button\r
 552      */\r
 553     focus : function(){\r
 554         this.btnEl.focus();\r
 555     },\r
 556 \r
 557     // private\r
 558     onDisable : function(){\r
 559         this.onDisableChange(true);\r
 560     },\r
 561 \r
 562     // private\r
 563     onEnable : function(){\r
 564         this.onDisableChange(false);\r
 565     },\r
 566 \r
 567     onDisableChange : function(disabled){\r
 568         if(this.el){\r
 569             if(!Ext.isIE6 || !this.text){\r
 570                 this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass);\r
 571             }\r
 572             this.el.dom.disabled = disabled;\r
 573         }\r
 574         this.disabled = disabled;\r
 575     },\r
 576 \r
 577     /**\r
 578      * Show this button's menu (if it has one)\r
 579      */\r
 580     showMenu : function(){\r
 581         if(this.rendered && this.menu){\r
 582             if(this.tooltip){\r
 583                 Ext.QuickTips.getQuickTip().cancelShow(this.btnEl);\r
 584             }\r
 585             if(this.menu.isVisible()){\r
 586                 this.menu.hide();\r
 587             }\r
 588             this.menu.ownerCt = this;\r
 589             this.menu.show(this.el, this.menuAlign);\r
 590         }\r
 591         return this;\r
 592     },\r
 593 \r
 594     /**\r
 595      * Hide this button's menu (if it has one)\r
 596      */\r
 597     hideMenu : function(){\r
 598         if(this.hasVisibleMenu()){\r
 599             this.menu.hide();\r
 600         }\r
 601         return this;\r
 602     },\r
 603 \r
 604     /**\r
 605      * Returns true if the button has a menu and it is visible\r
 606      * @return {Boolean}\r
 607      */\r
 608     hasVisibleMenu : function(){\r
 609         return this.menu && this.menu.ownerCt == this && this.menu.isVisible();\r
 610     },\r
 611 \r
 612     // private\r
 613     onClick : function(e){\r
 614         if(e){\r
 615             e.preventDefault();\r
 616         }\r
 617         if(e.button !== 0){\r
 618             return;\r
 619         }\r
 620         if(!this.disabled){\r
 621             if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){\r
 622                 this.toggle();\r
 623             }\r
 624             if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){\r
 625                 this.showMenu();\r
 626             }\r
 627             this.fireEvent('click', this, e);\r
 628             if(this.handler){\r
 629                 //this.el.removeClass('x-btn-over');\r
 630                 this.handler.call(this.scope || this, this, e);\r
 631             }\r
 632         }\r
 633     },\r
 634 \r
 635     // private\r
 636     isMenuTriggerOver : function(e, internal){\r
 637         return this.menu && !internal;\r
 638     },\r
 639 \r
 640     // private\r
 641     isMenuTriggerOut : function(e, internal){\r
 642         return this.menu && !internal;\r
 643     },\r
 644 \r
 645     // private\r
 646     onMouseOver : function(e){\r
 647         if(!this.disabled){\r
 648             var internal = e.within(this.el,  true);\r
 649             if(!internal){\r
 650                 this.el.addClass('x-btn-over');\r
 651                 if(!this.monitoringMouseOver){\r
 652                     this.doc.on('mouseover', this.monitorMouseOver, this);\r
 653                     this.monitoringMouseOver = true;\r
 654                 }\r
 655                 this.fireEvent('mouseover', this, e);\r
 656             }\r
 657             if(this.isMenuTriggerOver(e, internal)){\r
 658                 this.fireEvent('menutriggerover', this, this.menu, e);\r
 659             }\r
 660         }\r
 661     },\r
 662 \r
 663     // private\r
 664     monitorMouseOver : function(e){\r
 665         if(e.target != this.el.dom && !e.within(this.el)){\r
 666             if(this.monitoringMouseOver){\r
 667                 this.doc.un('mouseover', this.monitorMouseOver, this);\r
 668                 this.monitoringMouseOver = false;\r
 669             }\r
 670             this.onMouseOut(e);\r
 671         }\r
 672     },\r
 673 \r
 674     // private\r
 675     onMouseOut : function(e){\r
 676         var internal = e.within(this.el) && e.target != this.el.dom;\r
 677         this.el.removeClass('x-btn-over');\r
 678         this.fireEvent('mouseout', this, e);\r
 679         if(this.isMenuTriggerOut(e, internal)){\r
 680             this.fireEvent('menutriggerout', this, this.menu, e);\r
 681         }\r
 682     },\r
 683 \r
 684     focus : function() {\r
 685         this.btnEl.focus();\r
 686     },\r
 687 \r
 688     blur : function() {\r
 689         this.btnEl.blur();\r
 690     },\r
 691 \r
 692     // private\r
 693     onFocus : function(e){\r
 694         if(!this.disabled){\r
 695             this.el.addClass('x-btn-focus');\r
 696         }\r
 697     },\r
 698     // private\r
 699     onBlur : function(e){\r
 700         this.el.removeClass('x-btn-focus');\r
 701     },\r
 702 \r
 703     // private\r
 704     getClickEl : function(e, isUp){\r
 705        return this.el;\r
 706     },\r
 707 \r
 708     // private\r
 709     onMouseDown : function(e){\r
 710         if(!this.disabled && e.button === 0){\r
 711             this.getClickEl(e).addClass('x-btn-click');\r
 712             this.doc.on('mouseup', this.onMouseUp, this);\r
 713         }\r
 714     },\r
 715     // private\r
 716     onMouseUp : function(e){\r
 717         if(e.button === 0){\r
 718             this.getClickEl(e, true).removeClass('x-btn-click');\r
 719             this.doc.un('mouseup', this.onMouseUp, this);\r
 720         }\r
 721     },\r
 722     // private\r
 723     onMenuShow : function(e){\r
 724         if(this.menu.ownerCt == this){\r
 725             this.menu.ownerCt = this;\r
 726             this.ignoreNextClick = 0;\r
 727             this.el.addClass('x-btn-menu-active');\r
 728             this.fireEvent('menushow', this, this.menu);\r
 729         }\r
 730     },\r
 731     // private\r
 732     onMenuHide : function(e){\r
 733         if(this.menu.ownerCt == this){\r
 734             this.el.removeClass('x-btn-menu-active');\r
 735             this.ignoreNextClick = this.restoreClick.defer(250, this);\r
 736             this.fireEvent('menuhide', this, this.menu);\r
 737             delete this.menu.ownerCt;\r
 738         }\r
 739     },\r
 740 \r
 741     // private\r
 742     restoreClick : function(){\r
 743         this.ignoreNextClick = 0;\r
 744     }\r
 745 \r
 746     /**\r
 747      * @cfg {String} autoEl @hide\r
 748      */\r
 749     /**\r
 750      * @cfg {String/Object} html @hide\r
 751      */\r
 752     /**\r
 753      * @cfg {String} contentEl  @hide\r
 754      */\r
 755     /**\r
 756      * @cfg {Mixed} data  @hide\r
 757      */\r
 758     /**\r
 759      * @cfg {Mixed} tpl  @hide\r
 760      */\r
 761     /**\r
 762      * @cfg {String} tplWriteMode  @hide\r
 763      */\r
 764 });\r
 765 Ext.reg('button', Ext.Button);\r
 766 \r
 767 // Private utility class used by Button\r
 768 Ext.ButtonToggleMgr = function(){\r
 769    var groups = {};\r
 770 \r
 771    function toggleGroup(btn, state){\r
 772        if(state){\r
 773            var g = groups[btn.toggleGroup];\r
 774            for(var i = 0, l = g.length; i < l; i++){\r
 775                if(g[i] != btn){\r
 776                    g[i].toggle(false);\r
 777                }\r
 778            }\r
 779        }\r
 780    }\r
 781 \r
 782    return {\r
 783        register : function(btn){\r
 784            if(!btn.toggleGroup){\r
 785                return;\r
 786            }\r
 787            var g = groups[btn.toggleGroup];\r
 788            if(!g){\r
 789                g = groups[btn.toggleGroup] = [];\r
 790            }\r
 791            g.push(btn);\r
 792            btn.on('toggle', toggleGroup);\r
 793        },\r
 794 \r
 795        unregister : function(btn){\r
 796            if(!btn.toggleGroup){\r
 797                return;\r
 798            }\r
 799            var g = groups[btn.toggleGroup];\r
 800            if(g){\r
 801                g.remove(btn);\r
 802                btn.un('toggle', toggleGroup);\r
 803            }\r
 804        },\r
 805 \r
 806        /**\r
 807         * Gets the pressed button in the passed group or null\r
 808         * @param {String} group\r
 809         * @return Button\r
 810         */\r
 811        getPressed : function(group){\r
 812            var g = groups[group];\r
 813            if(g){\r
 814                for(var i = 0, len = g.length; i < len; i++){\r
 815                    if(g[i].pressed === true){\r
 816                        return g[i];\r
 817                    }\r
 818                }\r
 819            }\r
 820            return null;\r
 821        }\r
 822    };\r
 823 }();\r