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

   1 <html><head><title>Roo/Component.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.Component
  14  * @extends Roo.util.Observable
  15  * Base class for all major Roo components.  All subclasses of Component can automatically participate in the standard
  16  * Roo component lifecycle of creation, rendering and destruction.  They also have automatic support for basic hide/show
  17  * and enable/disable behavior.  Component allows any subclass to be lazy-rendered into any {@link Roo.Container} and
  18  * to be automatically registered with the {@link Roo.ComponentMgr} so that it can be referenced at any time via {@link Roo.getCmp}.
  19  * All visual components (widgets) that require rendering into a layout should subclass Component.
  20  * @constructor
  21  * @param {Roo.Element/String/Object} config The configuration options.  If an element is passed, it is set as the internal
  22  * element and its id used as the component id.  If a string is passed, it is assumed to be the id of an existing element
  23  * and is used as the component id.  Otherwise, it is assumed to be a standard config object and is applied to the component.
  24  */
  25 </span><span class="jsdoc-var">Roo.Component </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  26     </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
  27     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.tagName </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.dom </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// element object
  28         </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">config.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">};
  29     }
  30     </span><span class="jsdoc-var">this.initialConfig </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
  31
  32     </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">);
  33     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  34         </span><span class="jsdoc-comment">/**
  35          * @event disable
  36          * Fires after the component is disabled.
  37              * @param {Roo.Component} this
  38              */
  39         </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  40         </span><span class="jsdoc-comment">/**
  41          * @event enable
  42          * Fires after the component is enabled.
  43              * @param {Roo.Component} this
  44              */
  45         </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  46         </span><span class="jsdoc-comment">/**
  47          * @event beforeshow
  48          * Fires before the component is shown.  Return false to stop the show.
  49              * @param {Roo.Component} this
  50              */
  51         </span><span class="jsdoc-var">beforeshow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  52         </span><span class="jsdoc-comment">/**
  53          * @event show
  54          * Fires after the component is shown.
  55              * @param {Roo.Component} this
  56              */
  57         </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  58         </span><span class="jsdoc-comment">/**
  59          * @event beforehide
  60          * Fires before the component is hidden. Return false to stop the hide.
  61              * @param {Roo.Component} this
  62              */
  63         </span><span class="jsdoc-var">beforehide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  64         </span><span class="jsdoc-comment">/**
  65          * @event hide
  66          * Fires after the component is hidden.
  67              * @param {Roo.Component} this
  68              */
  69         </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  70         </span><span class="jsdoc-comment">/**
  71          * @event beforerender
  72          * Fires before the component is rendered. Return false to stop the render.
  73              * @param {Roo.Component} this
  74              */
  75         </span><span class="jsdoc-var">beforerender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  76         </span><span class="jsdoc-comment">/**
  77          * @event render
  78          * Fires after the component is rendered.
  79              * @param {Roo.Component} this
  80              */
  81         </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  82         </span><span class="jsdoc-comment">/**
  83          * @event beforedestroy
  84          * Fires before the component is destroyed. Return false to stop the destroy.
  85              * @param {Roo.Component} this
  86              */
  87         </span><span class="jsdoc-var">beforedestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  88         </span><span class="jsdoc-comment">/**
  89          * @event destroy
  90          * Fires after the component is destroyed.
  91              * @param {Roo.Component} this
  92              */
  93         </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  94     </span><span class="jsdoc-syntax">});
  95     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">){
  96         </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;roo-comp-&quot; </span><span class="jsdoc-syntax">+ (++</span><span class="jsdoc-var">Roo.Component.AUTO_ID</span><span class="jsdoc-syntax">);
  97     }
  98     </span><span class="jsdoc-var">Roo.ComponentMgr.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  99     </span><span class="jsdoc-var">Roo.Component.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 100     </span><span class="jsdoc-var">this.initComponent</span><span class="jsdoc-syntax">();
 101     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.renderTo</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// not supported by all components yet. use at your own risk!
 102         </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.renderTo</span><span class="jsdoc-syntax">);
 103         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.renderTo</span><span class="jsdoc-syntax">;
 104     }
 105 };
 106
 107 </span><span class="jsdoc-comment">/** @private */
 108 </span><span class="jsdoc-var">Roo.Component.AUTO_ID </span><span class="jsdoc-syntax">= 1000;
 109
 110 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
 111     </span><span class="jsdoc-comment">/**
 112      * @scope Roo.Component.prototype
 113      * @type {Boolean}
 114      * true if this component is hidden. Read-only.
 115      */
 116     </span><span class="jsdoc-var">hidden </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 117     </span><span class="jsdoc-comment">/**
 118      * @type {Boolean}
 119      * true if this component is disabled. Read-only.
 120      */
 121     </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 122     </span><span class="jsdoc-comment">/**
 123      * @type {Boolean}
 124      * true if this component has been rendered. Read-only.
 125      */
 126     </span><span class="jsdoc-var">rendered </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 127
 128     </span><span class="jsdoc-comment">/** @cfg {String} disableClass
 129      * CSS class added to the component when it is disabled (defaults to &quot;x-item-disabled&quot;).
 130      */
 131     </span><span class="jsdoc-var">disabledClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-item-disabled&quot;</span><span class="jsdoc-syntax">,
 132         </span><span class="jsdoc-comment">/** @cfg {Boolean} allowDomMove
 133          * Whether the component can move the Dom node when rendering (defaults to true).
 134          */
 135     </span><span class="jsdoc-var">allowDomMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 136     </span><span class="jsdoc-comment">/** @cfg {String} hideMode (display|visibility)
 137      * How this component should hidden. Supported values are
 138      * &quot;visibility&quot; (css visibility), &quot;offsets&quot; (negative offset position) and
 139      * &quot;display&quot; (css display) - defaults to &quot;display&quot;.
 140      */
 141     </span><span class="jsdoc-var">hideMode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">,
 142
 143     </span><span class="jsdoc-comment">/** @private */
 144     </span><span class="jsdoc-var">ctype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Roo.Component&quot;</span><span class="jsdoc-syntax">,
 145
 146     </span><span class="jsdoc-comment">/**
 147      * @cfg {String} actionMode
 148      * which property holds the element that used for  hide() / show() / disable() / enable()
 149      * default is 'el' for forms you probably want to set this to fieldEl
 150      */
 151     </span><span class="jsdoc-var">actionMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;el&quot;</span><span class="jsdoc-syntax">,
 152
 153          </span><span class="jsdoc-comment">/**
 154      * @cfg {String} style
 155      * css styles to add to component
 156      * eg. text-align:right;
 157      */
 158     </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 159
 160     </span><span class="jsdoc-comment">/** @private */
 161     </span><span class="jsdoc-var">getActionEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 162         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.actionMode</span><span class="jsdoc-syntax">];
 163     },
 164
 165     </span><span class="jsdoc-var">initComponent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
 166     </span><span class="jsdoc-comment">/**
 167      * If this is a lazy rendering component, render it to its container element.
 168      * @param {String/HTMLElement/Element} container (optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.
 169      */
 170     </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">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
 171
 172         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
 173             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 174         }
 175
 176         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforerender&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">){
 177             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 178         }
 179
 180         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 181             </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
 182             </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.dom.parentNode</span><span class="jsdoc-syntax">;
 183             </span><span class="jsdoc-var">this.allowDomMove </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 184         }
 185         </span><span class="jsdoc-var">this.container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">);
 186         </span><span class="jsdoc-var">this.rendered </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 187         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
 188             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number'</span><span class="jsdoc-syntax">){
 189                 </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.container.dom.childNodes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">];
 190             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 191                 </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 192             }
 193         }
 194         </span><span class="jsdoc-var">this.onRender</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
 195         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
 196             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">);
 197             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
 198         }
 199         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">){
 200             </span><span class="jsdoc-var">this.el.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">);
 201             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">;
 202         }
 203         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;render&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 204         </span><span class="jsdoc-var">this.afterRender</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">);
 205         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
 206             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 207         }
 208         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
 209             </span><span class="jsdoc-var">this.disable</span><span class="jsdoc-syntax">();
 210         }
 211
 212         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 213
 214     },
 215
 216     </span><span class="jsdoc-comment">/** @private */
 217     // default function is not really useful
 218     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
 219         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 220             </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
 221             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowDomMove </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 222                 </span><span class="jsdoc-var">ct.dom.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 223             }
 224         }
 225     },
 226
 227     </span><span class="jsdoc-comment">/** @private */
 228     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 229         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.autoCreate </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">?
 230                       </span><span class="jsdoc-var">this.autoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">this.defaultAutoCreate</span><span class="jsdoc-syntax">);
 231         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">cfg.id</span><span class="jsdoc-syntax">){
 232             </span><span class="jsdoc-var">cfg.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
 233         }
 234         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 235     },
 236
 237     </span><span class="jsdoc-comment">/** @private */
 238     </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
 239
 240     </span><span class="jsdoc-comment">/**
 241      * Destroys this component by purging any event listeners, removing the component's element from the DOM,
 242      * removing the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.
 243      */
 244     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 245         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforedestroy&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">){
 246             </span><span class="jsdoc-var">this.purgeListeners</span><span class="jsdoc-syntax">();
 247             </span><span class="jsdoc-var">this.beforeDestroy</span><span class="jsdoc-syntax">();
 248             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
 249                 </span><span class="jsdoc-var">this.el.removeAllListeners</span><span class="jsdoc-syntax">();
 250                 </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
 251                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.actionMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;container&quot;</span><span class="jsdoc-syntax">){
 252                     </span><span class="jsdoc-var">this.container.remove</span><span class="jsdoc-syntax">();
 253                 }
 254             }
 255             </span><span class="jsdoc-var">this.onDestroy</span><span class="jsdoc-syntax">();
 256             </span><span class="jsdoc-var">Roo.ComponentMgr.unregister</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 257             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;destroy&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 258         }
 259     },
 260
 261         </span><span class="jsdoc-comment">/** @private */
 262     </span><span class="jsdoc-var">beforeDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 263
 264     },
 265
 266         </span><span class="jsdoc-comment">/** @private */
 267         </span><span class="jsdoc-var">onDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 268
 269     },
 270
 271     </span><span class="jsdoc-comment">/**
 272      * Returns the underlying {@link Roo.Element}.
 273      * @return {Roo.Element} The element
 274      */
 275     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 276         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 277     },
 278
 279     </span><span class="jsdoc-comment">/**
 280      * Returns the id of this component.
 281      * @return {String}
 282      */
 283     </span><span class="jsdoc-var">getId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 284         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
 285     },
 286
 287     </span><span class="jsdoc-comment">/**
 288      * Try to focus this component.
 289      * @param {Boolean} selectText True to also select the text in this component (if applicable)
 290      * @return {Roo.Component} this
 291      */
 292     </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selectText</span><span class="jsdoc-syntax">){
 293         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
 294             </span><span class="jsdoc-var">this.el.focus</span><span class="jsdoc-syntax">();
 295             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selectText </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
 296                 </span><span class="jsdoc-var">this.el.dom.select</span><span class="jsdoc-syntax">();
 297             }
 298         }
 299         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 300     },
 301
 302     </span><span class="jsdoc-comment">/** @private */
 303     </span><span class="jsdoc-var">blur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 304         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
 305             </span><span class="jsdoc-var">this.el.blur</span><span class="jsdoc-syntax">();
 306         }
 307         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 308     },
 309
 310     </span><span class="jsdoc-comment">/**
 311      * Disable this component.
 312      * @return {Roo.Component} this
 313      */
 314     </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 315         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
 316             </span><span class="jsdoc-var">this.onDisable</span><span class="jsdoc-syntax">();
 317         }
 318         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 319         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;disable&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 320         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 321     },
 322
 323         </span><span class="jsdoc-comment">// private
 324     </span><span class="jsdoc-var">onDisable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 325         </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabledClass</span><span class="jsdoc-syntax">);
 326         </span><span class="jsdoc-var">this.el.dom.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 327     },
 328
 329     </span><span class="jsdoc-comment">/**
 330      * Enable this component.
 331      * @return {Roo.Component} this
 332      */
 333     </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 334         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
 335             </span><span class="jsdoc-var">this.onEnable</span><span class="jsdoc-syntax">();
 336         }
 337         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 338         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;enable&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 339         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 340     },
 341
 342         </span><span class="jsdoc-comment">// private
 343     </span><span class="jsdoc-var">onEnable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 344         </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabledClass</span><span class="jsdoc-syntax">);
 345         </span><span class="jsdoc-var">this.el.dom.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 346     },
 347
 348     </span><span class="jsdoc-comment">/**
 349      * Convenience function for setting disabled/enabled by boolean.
 350      * @param {Boolean} disabled
 351      */
 352     </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">disabled</span><span class="jsdoc-syntax">){
 353         </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;disable&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;enable&quot;</span><span class="jsdoc-syntax">]();
 354     },
 355
 356     </span><span class="jsdoc-comment">/**
 357      * Show this component.
 358      * @return {Roo.Component} this
 359      */
 360     </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 361         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeshow&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">){
 362             </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 363             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
 364                 </span><span class="jsdoc-var">this.onShow</span><span class="jsdoc-syntax">();
 365             }
 366             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;show&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 367         }
 368         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 369     },
 370
 371     </span><span class="jsdoc-comment">// private
 372     </span><span class="jsdoc-var">onShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 373         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ae </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">();
 374         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'visibility'</span><span class="jsdoc-syntax">){
 375             </span><span class="jsdoc-var">ae.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;visible&quot;</span><span class="jsdoc-syntax">;
 376         }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'offsets'</span><span class="jsdoc-syntax">){
 377             </span><span class="jsdoc-var">ae.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-hidden'</span><span class="jsdoc-syntax">);
 378         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 379             </span><span class="jsdoc-var">ae.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 380         }
 381     },
 382
 383     </span><span class="jsdoc-comment">/**
 384      * Hide this component.
 385      * @return {Roo.Component} this
 386      */
 387     </span><span class="jsdoc-var">hide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 388         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforehide&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">){
 389             </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 390             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
 391                 </span><span class="jsdoc-var">this.onHide</span><span class="jsdoc-syntax">();
 392             }
 393             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;hide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 394         }
 395         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 396     },
 397
 398     </span><span class="jsdoc-comment">// private
 399     </span><span class="jsdoc-var">onHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 400         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ae </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">();
 401         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'visibility'</span><span class="jsdoc-syntax">){
 402             </span><span class="jsdoc-var">ae.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
 403         }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'offsets'</span><span class="jsdoc-syntax">){
 404             </span><span class="jsdoc-var">ae.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-hidden'</span><span class="jsdoc-syntax">);
 405         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 406             </span><span class="jsdoc-var">ae.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
 407         }
 408     },
 409
 410     </span><span class="jsdoc-comment">/**
 411      * Convenience function to hide or show this component by boolean.
 412      * @param {Boolean} visible True to show, false to hide
 413      * @return {Roo.Component} this
 414      */
 415     </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">){
 416         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">) {
 417             </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
 418         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 419             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 420         }
 421         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 422     },
 423
 424     </span><span class="jsdoc-comment">/**
 425      * Returns true if this component is visible.
 426      */
 427     </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 428         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.isVisible</span><span class="jsdoc-syntax">();
 429     },
 430
 431     </span><span class="jsdoc-var">cloneConfig </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">){
 432         </span><span class="jsdoc-var">overrides </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">overrides </span><span class="jsdoc-syntax">|| {};
 433         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">overrides.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
 434         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">overrides</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.initialConfig</span><span class="jsdoc-syntax">);
 435         </span><span class="jsdoc-var">cfg.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// prevent dup id
 436         </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">this.constructor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
 437     }
 438 });</span></code></body></html>