git.roojs.org Git - roojs1/blob - docs/src/Roo_Button.js.html

   1 <html><head><title>Roo/Button.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12 /**
  13  * @class Roo.Button
  14  * @extends Roo.util.Observable
  15  * Simple Button class
  16  * @cfg {String} text The button text
  17  * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
  18  * CSS property of the button by default, so if you want a mixed icon/text button, set cls:&quot;x-btn-text-icon&quot;)
  19  * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
  20  * @cfg {Object} scope The scope of the handler
  21  * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
  22  * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
  23  * @cfg {Boolean} hidden True to start hidden (defaults to false)
  24  * @cfg {Boolean} disabled True to start disabled (defaults to false)
  25  * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
  26  * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
  27    applies if enableToggle = true)
  28  * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
  29  * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
  30   an {@link Roo.util.ClickRepeater} config object (defaults to false).
  31  * @constructor
  32  * Create a new button
  33  * @param {Object} config The config object
  34  */
  35 </span><span class="jsdoc-var">Roo.Button </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">)
  36 {
  37     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) {
  38         </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">;
  39         </span><span class="jsdoc-var">renderTo </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.renderTo </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
  40     }
  41
  42     </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  43     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  44         </span><span class="jsdoc-comment">/**
  45              * @event click
  46              * Fires when this button is clicked
  47              * @param {Button} this
  48              * @param {EventObject} e The click event
  49              */
  50             </span><span class="jsdoc-string">&quot;click&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  51         </span><span class="jsdoc-comment">/**
  52              * @event toggle
  53              * Fires when the &quot;pressed&quot; state of this button changes (only if enableToggle = true)
  54              * @param {Button} this
  55              * @param {Boolean} pressed
  56              */
  57             </span><span class="jsdoc-string">&quot;toggle&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  58         </span><span class="jsdoc-comment">/**
  59              * @event mouseover
  60              * Fires when the mouse hovers over the button
  61              * @param {Button} this
  62              * @param {Event} e The event object
  63              */
  64         </span><span class="jsdoc-string">'mouseover' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  65         </span><span class="jsdoc-comment">/**
  66              * @event mouseout
  67              * Fires when the mouse exits the button
  68              * @param {Button} this
  69              * @param {Event} e The event object
  70              */
  71         </span><span class="jsdoc-string">'mouseout'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  72          </span><span class="jsdoc-comment">/**
  73              * @event render
  74              * Fires when the button is rendered
  75              * @param {Button} this
  76              */
  77         </span><span class="jsdoc-string">'render'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  78     </span><span class="jsdoc-syntax">});
  79     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">){
  80         </span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.menu.MenuMgr.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">);
  81     }
  82     </span><span class="jsdoc-comment">// register listeners first!!  - so render can be captured..
  83     </span><span class="jsdoc-var">Roo.util.Observable.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  84     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">){
  85         </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">);
  86     }
  87
  88
  89 };
  90
  91 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Button</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
  92     </span><span class="jsdoc-comment">/**
  93      *
  94      */
  95
  96     /**
  97      * Read-only. True if this button is hidden
  98      * @type Boolean
  99      */
 100     </span><span class="jsdoc-var">hidden </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 101     </span><span class="jsdoc-comment">/**
 102      * Read-only. True if this button is disabled
 103      * @type Boolean
 104      */
 105     </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 106     </span><span class="jsdoc-comment">/**
 107      * Read-only. True if this button is pressed (only if enableToggle = true)
 108      * @type Boolean
 109      */
 110     </span><span class="jsdoc-var">pressed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 111
 112     </span><span class="jsdoc-comment">/**
 113      * @cfg {Number} tabIndex
 114      * The DOM tabIndex for this button (defaults to undefined)
 115      */
 116     </span><span class="jsdoc-var">tabIndex </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
 117
 118     </span><span class="jsdoc-comment">/**
 119      * @cfg {Boolean} enableToggle
 120      * True to enable pressed/not pressed toggling (defaults to false)
 121      */
 122     </span><span class="jsdoc-var">enableToggle</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 123     </span><span class="jsdoc-comment">/**
 124      * @cfg {Mixed} menu
 125      * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
 126      */
 127     </span><span class="jsdoc-var">menu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
 128     </span><span class="jsdoc-comment">/**
 129      * @cfg {String} menuAlign
 130      * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
 131      */
 132     </span><span class="jsdoc-var">menuAlign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;tl-bl?&quot;</span><span class="jsdoc-syntax">,
 133
 134     </span><span class="jsdoc-comment">/**
 135      * @cfg {String} iconCls
 136      * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
 137      */
 138     </span><span class="jsdoc-var">iconCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
 139     </span><span class="jsdoc-comment">/**
 140      * @cfg {String} type
 141      * The button's type, corresponding to the DOM input element type attribute.  Either &quot;submit,&quot; &quot;reset&quot; or &quot;button&quot; (default).
 142      */
 143     </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
 144
 145     </span><span class="jsdoc-comment">// private
 146     </span><span class="jsdoc-var">menuClassTarget</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'tr'</span><span class="jsdoc-syntax">,
 147
 148     </span><span class="jsdoc-comment">/**
 149      * @cfg {String} clickEvent
 150      * The type of event to map to the button's event handler (defaults to 'click')
 151      */
 152     </span><span class="jsdoc-var">clickEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">,
 153
 154     </span><span class="jsdoc-comment">/**
 155      * @cfg {Boolean} handleMouseEvents
 156      * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
 157      */
 158     </span><span class="jsdoc-var">handleMouseEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 159
 160     </span><span class="jsdoc-comment">/**
 161      * @cfg {String} tooltipType
 162      * The type of tooltip to use. Either &quot;qtip&quot; (default) for QuickTips or &quot;title&quot; for title attribute.
 163      */
 164     </span><span class="jsdoc-var">tooltipType </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'qtip'</span><span class="jsdoc-syntax">,
 165
 166     </span><span class="jsdoc-comment">/**
 167      * @cfg {String} cls
 168      * A CSS class to apply to the button's main element.
 169      */
 170
 171     /**
 172      * @cfg {Roo.Template} template (Optional)
 173      * An {@link Roo.Template} with which to create the Button's main element. This Template must
 174      * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
 175      * require code modifications if required elements (e.g. a button) aren't present.
 176      */
 177
 178     // private
 179     </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">){
 180         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
 181         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideParent</span><span class="jsdoc-syntax">){
 182             </span><span class="jsdoc-var">this.parentEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">);
 183         }
 184         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.dhconfig</span><span class="jsdoc-syntax">){
 185             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.template</span><span class="jsdoc-syntax">){
 186                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.Button.buttonTemplate</span><span class="jsdoc-syntax">){
 187                     </span><span class="jsdoc-comment">// hideous table template
 188                     </span><span class="jsdoc-var">Roo.Button.buttonTemplate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">(
 189                         </span><span class="jsdoc-string">'&lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; class=&quot;x-btn-wrap&quot;&gt;&lt;tbody&gt;&lt;tr&gt;'</span><span class="jsdoc-syntax">,
 190                         </span><span class="jsdoc-string">'&lt;td class=&quot;x-btn-left&quot;&gt;&lt;i&gt;&amp;#160;&lt;/i&gt;&lt;/td&gt;&lt;td class=&quot;x-btn-center&quot;&gt;&lt;em unselectable=&quot;on&quot;&gt;&lt;button class=&quot;x-btn-text&quot; type=&quot;{1}&quot;&gt;{0}&lt;/button&gt;&lt;/em&gt;&lt;/td&gt;&lt;td class=&quot;x-btn-right&quot;&gt;&lt;i&gt;&amp;#160;&lt;/i&gt;&lt;/td&gt;'</span><span class="jsdoc-syntax">,
 191                         </span><span class="jsdoc-string">&quot;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&quot;</span><span class="jsdoc-syntax">);
 192                 }
 193                 </span><span class="jsdoc-var">this.template </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Button.buttonTemplate</span><span class="jsdoc-syntax">;
 194             }
 195             </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.template.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'&amp;#160;'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.type</span><span class="jsdoc-syntax">], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 196             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btnEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">btn.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;button:first&quot;</span><span class="jsdoc-syntax">);
 197             </span><span class="jsdoc-var">btnEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'focus'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onFocus</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 198             </span><span class="jsdoc-var">btnEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'blur'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onBlur</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 199             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
 200                 </span><span class="jsdoc-var">btn.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">);
 201             }
 202             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.icon</span><span class="jsdoc-syntax">){
 203                 </span><span class="jsdoc-var">btnEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'background-image'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'url(' </span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.icon </span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">')'</span><span class="jsdoc-syntax">);
 204             }
 205             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.iconCls</span><span class="jsdoc-syntax">){
 206                 </span><span class="jsdoc-var">btnEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.iconCls</span><span class="jsdoc-syntax">);
 207                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
 208                     </span><span class="jsdoc-var">btn.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'x-btn-text-icon' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-btn-icon'</span><span class="jsdoc-syntax">);
 209                 }
 210             }
 211             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabIndex </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
 212                 </span><span class="jsdoc-var">btnEl.dom.tabIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabIndex</span><span class="jsdoc-syntax">;
 213             }
 214             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tooltip</span><span class="jsdoc-syntax">){
 215                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.tooltip </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">){
 216                     </span><span class="jsdoc-var">Roo.QuickTips.tips</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({
 217                           </span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">btnEl.id
 218                     </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">this.tooltip</span><span class="jsdoc-syntax">));
 219                 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 220                     </span><span class="jsdoc-var">btnEl.dom</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.tooltipType</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.tooltip</span><span class="jsdoc-syntax">;
 221                 }
 222             }
 223         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 224             </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dhconfig</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 225         }
 226         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
 227         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">){
 228             </span><span class="jsdoc-var">this.el.dom.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
 229         }
 230         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">){
 231             </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menuClassTarget</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-with-menu&quot;</span><span class="jsdoc-syntax">);
 232             </span><span class="jsdoc-var">this.menu.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;show&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMenuShow</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 233             </span><span class="jsdoc-var">this.menu.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;hide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMenuHide</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 234         }
 235         </span><span class="jsdoc-var">btn.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn&quot;</span><span class="jsdoc-syntax">);
 236         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">Roo.isIE7</span><span class="jsdoc-syntax">){
 237             </span><span class="jsdoc-var">this.autoWidth.defer</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 238         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 239             </span><span class="jsdoc-var">this.autoWidth</span><span class="jsdoc-syntax">();
 240         }
 241         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handleMouseEvents</span><span class="jsdoc-syntax">){
 242             </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseover&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseOver</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 243             </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseout&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseOut</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 244             </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 245         }
 246         </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clickEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 247         </span><span class="jsdoc-comment">//btn.on(&quot;mouseup&quot;, this.onMouseUp, this);
 248         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
 249             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 250         }
 251         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
 252             </span><span class="jsdoc-var">this.disable</span><span class="jsdoc-syntax">();
 253         }
 254         </span><span class="jsdoc-var">Roo.ButtonToggleMgr.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 255         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pressed</span><span class="jsdoc-syntax">){
 256             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-pressed&quot;</span><span class="jsdoc-syntax">);
 257         }
 258         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.repeat</span><span class="jsdoc-syntax">){
 259             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">repeater </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.ClickRepeater</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">,
 260                 </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.repeat </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.repeat </span><span class="jsdoc-syntax">: {}
 261             );
 262             </span><span class="jsdoc-var">repeater.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 263         }
 264
 265         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'render'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 266
 267     },
 268     </span><span class="jsdoc-comment">/**
 269      * Returns the button's underlying element
 270      * @return {Roo.Element} The element
 271      */
 272     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 273         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 274     },
 275
 276     </span><span class="jsdoc-comment">/**
 277      * Destroys this Button and removes any listeners.
 278      */
 279     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 280         </span><span class="jsdoc-var">Roo.ButtonToggleMgr.unregister</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 281         </span><span class="jsdoc-var">this.el.removeAllListeners</span><span class="jsdoc-syntax">();
 282         </span><span class="jsdoc-var">this.purgeListeners</span><span class="jsdoc-syntax">();
 283         </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
 284     },
 285
 286     </span><span class="jsdoc-comment">// private
 287     </span><span class="jsdoc-var">autoWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 288         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 289             </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">);
 290             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE7 </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isStrict</span><span class="jsdoc-syntax">){
 291                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ib </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">);
 292                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ib </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ib.getWidth</span><span class="jsdoc-syntax">() &gt; 20){
 293                     </span><span class="jsdoc-var">ib.clip</span><span class="jsdoc-syntax">();
 294                     </span><span class="jsdoc-var">ib.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.util.TextMetrics.measure</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ib</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.width</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">ib.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">));
 295                 }
 296             }
 297             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">){
 298                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
 299                     </span><span class="jsdoc-var">this.el.beginMeasure</span><span class="jsdoc-syntax">();
 300                 }
 301                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">() &lt; </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">){
 302                     </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">);
 303                 }
 304                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
 305                     </span><span class="jsdoc-var">this.el.endMeasure</span><span class="jsdoc-syntax">();
 306                 }
 307             }
 308         }
 309     },
 310
 311     </span><span class="jsdoc-comment">/**
 312      * Assigns this button's click handler
 313      * @param {Function} handler The function to call when the button is clicked
 314      * @param {Object} scope (optional) Scope for the function passed in
 315      */
 316     </span><span class="jsdoc-var">setHandler </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
 317         </span><span class="jsdoc-var">this.handler </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">;
 318         </span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">;
 319     },
 320
 321     </span><span class="jsdoc-comment">/**
 322      * Sets this button's text
 323      * @param {String} text The button text
 324      */
 325     </span><span class="jsdoc-var">setText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
 326         </span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
 327         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 328             </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td.x-btn-center button.x-btn-text&quot;</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
 329         }
 330         </span><span class="jsdoc-var">this.autoWidth</span><span class="jsdoc-syntax">();
 331     },
 332
 333     </span><span class="jsdoc-comment">/**
 334      * Gets the text for this button
 335      * @return {String} The button text
 336      */
 337     </span><span class="jsdoc-var">getText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 338         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">;
 339     },
 340
 341     </span><span class="jsdoc-comment">/**
 342      * Show this button
 343      */
 344     </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 345         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 346         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 347             </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.hideParent</span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'parentEl' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'el'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 348         }
 349     },
 350
 351     </span><span class="jsdoc-comment">/**
 352      * Hide this button
 353      */
 354     </span><span class="jsdoc-var">hide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 355         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 356         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 357             </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.hideParent</span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'parentEl' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'el'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">);
 358         }
 359     },
 360
 361     </span><span class="jsdoc-comment">/**
 362      * Convenience function for boolean show/hide
 363      * @param {Boolean} visible True to show, false to hide
 364      */
 365     </span><span class="jsdoc-var">setVisible</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">){
 366         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">) {
 367             </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
 368         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 369             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 370         }
 371     },
 372
 373     </span><span class="jsdoc-comment">/**
 374      * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
 375      * @param {Boolean} state (optional) Force a particular state
 376      */
 377     </span><span class="jsdoc-var">toggle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
 378         </span><span class="jsdoc-var">state </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">state </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? !</span><span class="jsdoc-var">this.pressed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">;
 379         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.pressed</span><span class="jsdoc-syntax">){
 380             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
 381                 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-pressed&quot;</span><span class="jsdoc-syntax">);
 382                 </span><span class="jsdoc-var">this.pressed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 383                 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;toggle&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 384             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 385                 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-pressed&quot;</span><span class="jsdoc-syntax">);
 386                 </span><span class="jsdoc-var">this.pressed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 387                 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;toggle&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 388             }
 389             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.toggleHandler</span><span class="jsdoc-syntax">){
 390                 </span><span class="jsdoc-var">this.toggleHandler.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">);
 391             }
 392         }
 393     },
 394
 395     </span><span class="jsdoc-comment">/**
 396      * Focus the button
 397      */
 398     </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 399         </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'button:first'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.focus</span><span class="jsdoc-syntax">();
 400     },
 401
 402     </span><span class="jsdoc-comment">/**
 403      * Disable this button
 404      */
 405     </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 406         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 407             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-disabled&quot;</span><span class="jsdoc-syntax">);
 408         }
 409         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 410     },
 411
 412     </span><span class="jsdoc-comment">/**
 413      * Enable this button
 414      */
 415     </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 416         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 417             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-disabled&quot;</span><span class="jsdoc-syntax">);
 418         }
 419         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 420     },
 421
 422     </span><span class="jsdoc-comment">/**
 423      * Convenience function for boolean enable/disable
 424      * @param {Boolean} enabled True to enable, false to disable
 425      */
 426     </span><span class="jsdoc-var">setDisabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
 427         </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;enable&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;disable&quot;</span><span class="jsdoc-syntax">]();
 428     },
 429
 430     </span><span class="jsdoc-comment">// private
 431     </span><span class="jsdoc-var">onClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 432     {
 433         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 434             </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 435         }
 436         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.button </span><span class="jsdoc-syntax">!= 0){
 437             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 438         }
 439         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
 440             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enableToggle</span><span class="jsdoc-syntax">){
 441                 </span><span class="jsdoc-var">this.toggle</span><span class="jsdoc-syntax">();
 442             }
 443             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">()){
 444                 </span><span class="jsdoc-var">this.menu.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.menuAlign</span><span class="jsdoc-syntax">);
 445             }
 446             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 447             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
 448                 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-over&quot;</span><span class="jsdoc-syntax">);
 449                 </span><span class="jsdoc-var">this.handler.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 450             }
 451         }
 452     },
 453     </span><span class="jsdoc-comment">// private
 454     </span><span class="jsdoc-var">onMouseOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 455         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
 456             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-over&quot;</span><span class="jsdoc-syntax">);
 457             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseover'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 458         }
 459     },
 460     </span><span class="jsdoc-comment">// private
 461     </span><span class="jsdoc-var">onMouseOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 462         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">e.within</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)){
 463             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-over&quot;</span><span class="jsdoc-syntax">);
 464             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseout'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 465         }
 466     },
 467     </span><span class="jsdoc-comment">// private
 468     </span><span class="jsdoc-var">onFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 469         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
 470             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-focus&quot;</span><span class="jsdoc-syntax">);
 471         }
 472     },
 473     </span><span class="jsdoc-comment">// private
 474     </span><span class="jsdoc-var">onBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 475         </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-focus&quot;</span><span class="jsdoc-syntax">);
 476     },
 477     </span><span class="jsdoc-comment">// private
 478     </span><span class="jsdoc-var">onMouseDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 479         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">e.button </span><span class="jsdoc-syntax">== 0){
 480             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-click&quot;</span><span class="jsdoc-syntax">);
 481             </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 482         }
 483     },
 484     </span><span class="jsdoc-comment">// private
 485     </span><span class="jsdoc-var">onMouseUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 486         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.button </span><span class="jsdoc-syntax">== 0){
 487             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-click&quot;</span><span class="jsdoc-syntax">);
 488             </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 489         }
 490     },
 491     </span><span class="jsdoc-comment">// private
 492     </span><span class="jsdoc-var">onMenuShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 493         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-menu-active&quot;</span><span class="jsdoc-syntax">);
 494     },
 495     </span><span class="jsdoc-comment">// private
 496     </span><span class="jsdoc-var">onMenuHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 497         </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-btn-menu-active&quot;</span><span class="jsdoc-syntax">);
 498     }
 499 });
 500
 501 </span><span class="jsdoc-comment">// Private utility class used by Button
 502 </span><span class="jsdoc-var">Roo.ButtonToggleMgr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 503    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">groups </span><span class="jsdoc-syntax">= {};
 504
 505    </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">toggleGroup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
 506        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">){
 507            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">];
 508            </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">g.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
 509                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">){
 510                    </span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.toggle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 511                }
 512            }
 513        }
 514    }
 515
 516    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 517        </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">){
 518            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">){
 519                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 520            }
 521            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">];
 522            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">){
 523                </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">] = [];
 524            }
 525            </span><span class="jsdoc-var">g.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">);
 526            </span><span class="jsdoc-var">btn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;toggle&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">toggleGroup</span><span class="jsdoc-syntax">);
 527        },
 528
 529        </span><span class="jsdoc-var">unregister </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">){
 530            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">){
 531                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 532            }
 533            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">btn.toggleGroup</span><span class="jsdoc-syntax">];
 534            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">){
 535                </span><span class="jsdoc-var">g.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">);
 536                </span><span class="jsdoc-var">btn.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;toggle&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">toggleGroup</span><span class="jsdoc-syntax">);
 537            }
 538        }
 539    };
 540 }();</span></code></body></html>