pkgs/pkg-buttons-debug.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 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.menu.autoDestroy) {\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     },\r
 455 \r
 456     // private\r
 457     doAutoWidth : function(){\r
 458         if(this.el && this.text && this.width === undefined){\r
 459             this.el.setWidth('auto');\r
 460             if(Ext.isIE7 && Ext.isStrict){\r
 461                 var ib = this.btnEl;\r
 462                 if(ib && ib.getWidth() > 20){\r
 463                     ib.clip();\r
 464                     ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));\r
 465                 }\r
 466             }\r
 467             if(this.minWidth){\r
 468                 if(this.el.getWidth() < this.minWidth){\r
 469                     this.el.setWidth(this.minWidth);\r
 470                 }\r
 471             }\r
 472         }\r
 473     },\r
 474 \r
 475     /**\r
 476      * Assigns this Button's click handler\r
 477      * @param {Function} handler The function to call when the button is clicked\r
 478      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.\r
 479      * Defaults to this Button.\r
 480      * @return {Ext.Button} this\r
 481      */\r
 482     setHandler : function(handler, scope){\r
 483         this.handler = handler;\r
 484         this.scope = scope;\r
 485         return this;\r
 486     },\r
 487 \r
 488     /**\r
 489      * Sets this Button's text\r
 490      * @param {String} text The button text\r
 491      * @return {Ext.Button} this\r
 492      */\r
 493     setText : function(text){\r
 494         this.text = text;\r
 495         if(this.el){\r
 496             this.btnEl.update(text || '&#160;');\r
 497             this.setButtonClass();\r
 498         }\r
 499         this.doAutoWidth();\r
 500         return this;\r
 501     },\r
 502 \r
 503     /**\r
 504      * Sets the background image (inline style) of the button.  This method also changes\r
 505      * the value of the {@link icon} config internally.\r
 506      * @param {String} icon The path to an image to display in the button\r
 507      * @return {Ext.Button} this\r
 508      */\r
 509     setIcon : function(icon){\r
 510         this.icon = icon;\r
 511         if(this.el){\r
 512             this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');\r
 513             this.setButtonClass();\r
 514         }\r
 515         return this;\r
 516     },\r
 517 \r
 518     /**\r
 519      * Gets the text for this Button\r
 520      * @return {String} The button text\r
 521      */\r
 522     getText : function(){\r
 523         return this.text;\r
 524     },\r
 525 \r
 526     /**\r
 527      * If a state it passed, it becomes the pressed state otherwise the current state is toggled.\r
 528      * @param {Boolean} state (optional) Force a particular state\r
 529      * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.\r
 530      * @return {Ext.Button} this\r
 531      */\r
 532     toggle : function(state, suppressEvent){\r
 533         state = state === undefined ? !this.pressed : !!state;\r
 534         if(state != this.pressed){\r
 535             if(this.rendered){\r
 536                 this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');\r
 537             }\r
 538             this.pressed = state;\r
 539             if(!suppressEvent){\r
 540                 this.fireEvent('toggle', this, state);\r
 541                 if(this.toggleHandler){\r
 542                     this.toggleHandler.call(this.scope || this, this, state);\r
 543                 }\r
 544             }\r
 545         }\r
 546         return this;\r
 547     },\r
 548 \r
 549     /**\r
 550      * Focus the button\r
 551      */\r
 552     focus : function(){\r
 553         this.btnEl.focus();\r
 554     },\r
 555 \r
 556     // private\r
 557     onDisable : function(){\r
 558         this.onDisableChange(true);\r
 559     },\r
 560 \r
 561     // private\r
 562     onEnable : function(){\r
 563         this.onDisableChange(false);\r
 564     },\r
 565 \r
 566     onDisableChange : function(disabled){\r
 567         if(this.el){\r
 568             if(!Ext.isIE6 || !this.text){\r
 569                 this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass);\r
 570             }\r
 571             this.el.dom.disabled = disabled;\r
 572         }\r
 573         this.disabled = disabled;\r
 574     },\r
 575 \r
 576     /**\r
 577      * Show this button's menu (if it has one)\r
 578      */\r
 579     showMenu : function(){\r
 580         if(this.rendered && this.menu){\r
 581             if(this.tooltip){\r
 582                 Ext.QuickTips.getQuickTip().cancelShow(this.btnEl);\r
 583             }\r
 584             this.menu.show(this.el, this.menuAlign);\r
 585         }\r
 586         return this;\r
 587     },\r
 588 \r
 589     /**\r
 590      * Hide this button's menu (if it has one)\r
 591      */\r
 592     hideMenu : function(){\r
 593         if(this.menu){\r
 594             this.menu.hide();\r
 595         }\r
 596         return this;\r
 597     },\r
 598 \r
 599     /**\r
 600      * Returns true if the button has a menu and it is visible\r
 601      * @return {Boolean}\r
 602      */\r
 603     hasVisibleMenu : function(){\r
 604         return this.menu && this.menu.isVisible();\r
 605     },\r
 606 \r
 607     // private\r
 608     onClick : function(e){\r
 609         if(e){\r
 610             e.preventDefault();\r
 611         }\r
 612         if(e.button !== 0){\r
 613             return;\r
 614         }\r
 615         if(!this.disabled){\r
 616             if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){\r
 617                 this.toggle();\r
 618             }\r
 619             if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){\r
 620                 this.showMenu();\r
 621             }\r
 622             this.fireEvent('click', this, e);\r
 623             if(this.handler){\r
 624                 //this.el.removeClass('x-btn-over');\r
 625                 this.handler.call(this.scope || this, this, e);\r
 626             }\r
 627         }\r
 628     },\r
 629 \r
 630     // private\r
 631     isMenuTriggerOver : function(e, internal){\r
 632         return this.menu && !internal;\r
 633     },\r
 634 \r
 635     // private\r
 636     isMenuTriggerOut : function(e, internal){\r
 637         return this.menu && !internal;\r
 638     },\r
 639 \r
 640     // private\r
 641     onMouseOver : function(e){\r
 642         if(!this.disabled){\r
 643             var internal = e.within(this.el,  true);\r
 644             if(!internal){\r
 645                 this.el.addClass('x-btn-over');\r
 646                 if(!this.monitoringMouseOver){\r
 647                     this.doc.on('mouseover', this.monitorMouseOver, this);\r
 648                     this.monitoringMouseOver = true;\r
 649                 }\r
 650                 this.fireEvent('mouseover', this, e);\r
 651             }\r
 652             if(this.isMenuTriggerOver(e, internal)){\r
 653                 this.fireEvent('menutriggerover', this, this.menu, e);\r
 654             }\r
 655         }\r
 656     },\r
 657 \r
 658     // private\r
 659     monitorMouseOver : function(e){\r
 660         if(e.target != this.el.dom && !e.within(this.el)){\r
 661             if(this.monitoringMouseOver){\r
 662                 this.doc.un('mouseover', this.monitorMouseOver, this);\r
 663                 this.monitoringMouseOver = false;\r
 664             }\r
 665             this.onMouseOut(e);\r
 666         }\r
 667     },\r
 668 \r
 669     // private\r
 670     onMouseOut : function(e){\r
 671         var internal = e.within(this.el) && e.target != this.el.dom;\r
 672         this.el.removeClass('x-btn-over');\r
 673         this.fireEvent('mouseout', this, e);\r
 674         if(this.isMenuTriggerOut(e, internal)){\r
 675             this.fireEvent('menutriggerout', this, this.menu, e);\r
 676         }\r
 677     },\r
 678 \r
 679     focus : function() {\r
 680         this.btnEl.focus();\r
 681     },\r
 682 \r
 683     blur : function() {\r
 684         this.btnEl.blur();\r
 685     },\r
 686 \r
 687     // private\r
 688     onFocus : function(e){\r
 689         if(!this.disabled){\r
 690             this.el.addClass('x-btn-focus');\r
 691         }\r
 692     },\r
 693     // private\r
 694     onBlur : function(e){\r
 695         this.el.removeClass('x-btn-focus');\r
 696     },\r
 697 \r
 698     // private\r
 699     getClickEl : function(e, isUp){\r
 700        return this.el;\r
 701     },\r
 702 \r
 703     // private\r
 704     onMouseDown : function(e){\r
 705         if(!this.disabled && e.button === 0){\r
 706             this.getClickEl(e).addClass('x-btn-click');\r
 707             this.doc.on('mouseup', this.onMouseUp, this);\r
 708         }\r
 709     },\r
 710     // private\r
 711     onMouseUp : function(e){\r
 712         if(e.button === 0){\r
 713             this.getClickEl(e, true).removeClass('x-btn-click');\r
 714             this.doc.un('mouseup', this.onMouseUp, this);\r
 715         }\r
 716     },\r
 717     // private\r
 718     onMenuShow : function(e){\r
 719         this.menu.ownerCt = this;\r
 720         this.ignoreNextClick = 0;\r
 721         this.el.addClass('x-btn-menu-active');\r
 722         this.fireEvent('menushow', this, this.menu);\r
 723     },\r
 724     // private\r
 725     onMenuHide : function(e){\r
 726         this.el.removeClass('x-btn-menu-active');\r
 727         this.ignoreNextClick = this.restoreClick.defer(250, this);\r
 728         this.fireEvent('menuhide', this, this.menu);\r
 729         delete this.menu.ownerCt;\r
 730     },\r
 731 \r
 732     // private\r
 733     restoreClick : function(){\r
 734         this.ignoreNextClick = 0;\r
 735     }\r
 736 \r
 737     /**\r
 738      * @cfg {String} autoEl @hide\r
 739      */\r
 740 });\r
 741 Ext.reg('button', Ext.Button);\r
 742 \r
 743 // Private utility class used by Button\r
 744 Ext.ButtonToggleMgr = function(){\r
 745    var groups = {};\r
 746 \r
 747    function toggleGroup(btn, state){\r
 748        if(state){\r
 749            var g = groups[btn.toggleGroup];\r
 750            for(var i = 0, l = g.length; i < l; i++){\r
 751                if(g[i] != btn){\r
 752                    g[i].toggle(false);\r
 753                }\r
 754            }\r
 755        }\r
 756    }\r
 757 \r
 758    return {\r
 759        register : function(btn){\r
 760            if(!btn.toggleGroup){\r
 761                return;\r
 762            }\r
 763            var g = groups[btn.toggleGroup];\r
 764            if(!g){\r
 765                g = groups[btn.toggleGroup] = [];\r
 766            }\r
 767            g.push(btn);\r
 768            btn.on('toggle', toggleGroup);\r
 769        },\r
 770 \r
 771        unregister : function(btn){\r
 772            if(!btn.toggleGroup){\r
 773                return;\r
 774            }\r
 775            var g = groups[btn.toggleGroup];\r
 776            if(g){\r
 777                g.remove(btn);\r
 778                btn.un('toggle', toggleGroup);\r
 779            }\r
 780        },\r
 781 \r
 782        /**\r
 783         * Gets the pressed button in the passed group or null\r
 784         * @param {String} group\r
 785         * @return Button\r
 786         */\r
 787        getPressed : function(group){\r
 788            var g = groups[group];\r
 789            if(g){\r
 790                for(var i = 0, len = g.length; i < len; i++){\r
 791                    if(g[i].pressed === true){\r
 792                        return g[i];\r
 793                    }\r
 794                }\r
 795            }\r
 796            return null;\r
 797        }\r
 798    };\r
 799 }();\r
 800 /**\r
 801  * @class Ext.SplitButton\r
 802  * @extends Ext.Button\r
 803  * A split button that provides a built-in dropdown arrow that can fire an event separately from the default\r
 804  * click event of the button.  Typically this would be used to display a dropdown menu that provides additional\r
 805  * options to the primary button action, but any custom handler can provide the arrowclick implementation.  Example usage:\r
 806  * <pre><code>\r
 807 // display a dropdown menu:\r
 808 new Ext.SplitButton({\r
 809         renderTo: 'button-ct', // the container id\r
 810         text: 'Options',\r
 811         handler: optionsHandler, // handle a click on the button itself\r
 812         menu: new Ext.menu.Menu({\r
 813         items: [\r
 814                 // these items will render as dropdown menu items when the arrow is clicked:\r
 815                 {text: 'Item 1', handler: item1Handler},\r
 816                 {text: 'Item 2', handler: item2Handler}\r
 817         ]\r
 818         })\r
 819 });\r
 820 \r
 821 // Instead of showing a menu, you provide any type of custom\r
 822 // functionality you want when the dropdown arrow is clicked:\r
 823 new Ext.SplitButton({\r
 824         renderTo: 'button-ct',\r
 825         text: 'Options',\r
 826         handler: optionsHandler,\r
 827         arrowHandler: myCustomHandler\r
 828 });\r
 829 </code></pre>\r
 830  * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)\r
 831  * @cfg {String} arrowTooltip The title attribute of the arrow\r
 832  * @constructor\r
 833  * Create a new menu button\r
 834  * @param {Object} config The config object\r
 835  * @xtype splitbutton\r
 836  */\r
 837 Ext.SplitButton = Ext.extend(Ext.Button, {\r
 838         // private\r
 839     arrowSelector : 'em',\r
 840     split: true,\r
 841 \r
 842     // private\r
 843     initComponent : function(){\r
 844         Ext.SplitButton.superclass.initComponent.call(this);\r
 845         /**\r
 846          * @event arrowclick\r
 847          * Fires when this button's arrow is clicked\r
 848          * @param {MenuButton} this\r
 849          * @param {EventObject} e The click event\r
 850          */\r
 851         this.addEvents("arrowclick");\r
 852     },\r
 853 \r
 854     // private\r
 855     onRender : function(){\r
 856         Ext.SplitButton.superclass.onRender.apply(this, arguments);\r
 857         if(this.arrowTooltip){\r
 858             this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;\r
 859         }\r
 860     },\r
 861 \r
 862     /**\r
 863      * Sets this button's arrow click handler.\r
 864      * @param {Function} handler The function to call when the arrow is clicked\r
 865      * @param {Object} scope (optional) Scope for the function passed above\r
 866      */\r
 867     setArrowHandler : function(handler, scope){\r
 868         this.arrowHandler = handler;\r
 869         this.scope = scope;\r
 870     },\r
 871 \r
 872     getMenuClass : function(){\r
 873         return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');\r
 874     },\r
 875 \r
 876     isClickOnArrow : function(e){\r
 877         if (this.arrowAlign != 'bottom') {\r
 878             var visBtn = this.el.child('em.x-btn-split');\r
 879             var right = visBtn.getRegion().right - visBtn.getPadding('r');\r
 880             return e.getPageX() > right;\r
 881         } else {\r
 882             return e.getPageY() > this.btnEl.getRegion().bottom;\r
 883         }\r
 884     },\r
 885 \r
 886     // private\r
 887     onClick : function(e, t){\r
 888         e.preventDefault();\r
 889         if(!this.disabled){\r
 890             if(this.isClickOnArrow(e)){\r
 891                 if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){\r
 892                     this.showMenu();\r
 893                 }\r
 894                 this.fireEvent("arrowclick", this, e);\r
 895                 if(this.arrowHandler){\r
 896                     this.arrowHandler.call(this.scope || this, this, e);\r
 897                 }\r
 898             }else{\r
 899                 if(this.enableToggle){\r
 900                     this.toggle();\r
 901                 }\r
 902                 this.fireEvent("click", this, e);\r
 903                 if(this.handler){\r
 904                     this.handler.call(this.scope || this, this, e);\r
 905                 }\r
 906             }\r
 907         }\r
 908     },\r
 909 \r
 910     // private\r
 911     isMenuTriggerOver : function(e){\r
 912         return this.menu && e.target.tagName == this.arrowSelector;\r
 913     },\r
 914 \r
 915     // private\r
 916     isMenuTriggerOut : function(e, internal){\r
 917         return this.menu && e.target.tagName != this.arrowSelector;\r
 918     }\r
 919 });\r
 920 \r
 921 Ext.reg('splitbutton', Ext.SplitButton);/**\r
 922  * @class Ext.CycleButton\r
 923  * @extends Ext.SplitButton\r
 924  * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically\r
 925  * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's\r
 926  * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the\r
 927  * button displays the dropdown menu just like a normal SplitButton.  Example usage:\r
 928  * <pre><code>\r
 929 var btn = new Ext.CycleButton({\r
 930     showText: true,\r
 931     prependText: 'View as ',\r
 932     items: [{\r
 933         text:'text only',\r
 934         iconCls:'view-text',\r
 935         checked:true\r
 936     },{\r
 937         text:'HTML',\r
 938         iconCls:'view-html'\r
 939     }],\r
 940     changeHandler:function(btn, item){\r
 941         Ext.Msg.alert('Change View', item.text);\r
 942     }\r
 943 });\r
 944 </code></pre>\r
 945  * @constructor\r
 946  * Create a new split button\r
 947  * @param {Object} config The config object\r
 948  * @xtype cycle\r
 949  */\r
 950 Ext.CycleButton = Ext.extend(Ext.SplitButton, {\r
 951     /**\r
 952      * @cfg {Array} items An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the\r
 953      * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})\r
 954      */\r
 955     /**\r
 956      * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)\r
 957      */\r
 958     /**\r
 959      * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the\r
 960      * button's text (only applies when showText = true, defaults to '')\r
 961      */\r
 962     /**\r
 963      * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu\r
 964      * item in the button's menu has changed.  If this callback is not supplied, the SplitButton will instead\r
 965      * fire the {@link #change} event on active item change.  The changeHandler function will be called with the\r
 966      * following argument list: (SplitButton this, Ext.menu.CheckItem item)\r
 967      */\r
 968     /**\r
 969      * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button.  This\r
 970      * icon will always be displayed regardless of which item is selected in the dropdown list.  This overrides the \r
 971      * default behavior of changing the button's icon to match the selected item's icon on change.\r
 972      */\r
 973     /**\r
 974      * @property menu\r
 975      * @type Menu\r
 976      * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.\r
 977      */\r
 978 \r
 979     // private\r
 980     getItemText : function(item){\r
 981         if(item && this.showText === true){\r
 982             var text = '';\r
 983             if(this.prependText){\r
 984                 text += this.prependText;\r
 985             }\r
 986             text += item.text;\r
 987             return text;\r
 988         }\r
 989         return undefined;\r
 990     },\r
 991 \r
 992     /**\r
 993      * Sets the button's active menu item.\r
 994      * @param {Ext.menu.CheckItem} item The item to activate\r
 995      * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)\r
 996      */\r
 997     setActiveItem : function(item, suppressEvent){\r
 998         if(!Ext.isObject(item)){\r
 999             item = this.menu.getComponent(item);\r
1000         }\r
1001         if(item){\r
1002             if(!this.rendered){\r
1003                 this.text = this.getItemText(item);\r
1004                 this.iconCls = item.iconCls;\r
1005             }else{\r
1006                 var t = this.getItemText(item);\r
1007                 if(t){\r
1008                     this.setText(t);\r
1009                 }\r
1010                 this.setIconClass(item.iconCls);\r
1011             }\r
1012             this.activeItem = item;\r
1013             if(!item.checked){\r
1014                 item.setChecked(true, true);\r
1015             }\r
1016             if(this.forceIcon){\r
1017                 this.setIconClass(this.forceIcon);\r
1018             }\r
1019             if(!suppressEvent){\r
1020                 this.fireEvent('change', this, item);\r
1021             }\r
1022         }\r
1023     },\r
1024 \r
1025     /**\r
1026      * Gets the currently active menu item.\r
1027      * @return {Ext.menu.CheckItem} The active item\r
1028      */\r
1029     getActiveItem : function(){\r
1030         return this.activeItem;\r
1031     },\r
1032 \r
1033     // private\r
1034     initComponent : function(){\r
1035         this.addEvents(\r
1036             /**\r
1037              * @event change\r
1038              * Fires after the button's active menu item has changed.  Note that if a {@link #changeHandler} function\r
1039              * is set on this CycleButton, it will be called instead on active item change and this change event will\r
1040              * not be fired.\r
1041              * @param {Ext.CycleButton} this\r
1042              * @param {Ext.menu.CheckItem} item The menu item that was selected\r
1043              */\r
1044             "change"\r
1045         );\r
1046 \r
1047         if(this.changeHandler){\r
1048             this.on('change', this.changeHandler, this.scope||this);\r
1049             delete this.changeHandler;\r
1050         }\r
1051 \r
1052         this.itemCount = this.items.length;\r
1053 \r
1054         this.menu = {cls:'x-cycle-menu', items:[]};\r
1055         var checked;\r
1056         Ext.each(this.items, function(item, i){\r
1057             Ext.apply(item, {\r
1058                 group: item.group || this.id,\r
1059                 itemIndex: i,\r
1060                 checkHandler: this.checkHandler,\r
1061                 scope: this,\r
1062                 checked: item.checked || false\r
1063             });\r
1064             this.menu.items.push(item);\r
1065             if(item.checked){\r
1066                 checked = item;\r
1067             }\r
1068         }, this);\r
1069         this.setActiveItem(checked, true);\r
1070         Ext.CycleButton.superclass.initComponent.call(this);\r
1071 \r
1072         this.on('click', this.toggleSelected, this);\r
1073     },\r
1074 \r
1075     // private\r
1076     checkHandler : function(item, pressed){\r
1077         if(pressed){\r
1078             this.setActiveItem(item);\r
1079         }\r
1080     },\r
1081 \r
1082     /**\r
1083      * This is normally called internally on button click, but can be called externally to advance the button's\r
1084      * active item programmatically to the next one in the menu.  If the current item is the last one in the menu\r
1085      * the active item will be set to the first item in the menu.\r
1086      */\r
1087     toggleSelected : function(){\r
1088         var m = this.menu;\r
1089         m.render();\r
1090         // layout if we haven't before so the items are active\r
1091         if(!m.hasLayout){\r
1092             m.doLayout();\r
1093         }\r
1094         \r
1095         var nextIdx, checkItem;\r
1096         for (var i = 1; i < this.itemCount; i++) {\r
1097             nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;\r
1098             // check the potential item\r
1099             checkItem = m.items.itemAt(nextIdx);\r
1100             // if its not disabled then check it.\r
1101             if (!checkItem.disabled) {\r
1102                 checkItem.setChecked(true);\r
1103                 break;\r
1104             }\r
1105         }\r
1106     }\r
1107 });\r
1108 Ext.reg('cycle', Ext.CycleButton);