projects / roojs1 / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
history | raw | HEAD
sync
[roojs1] / 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">/** @private */
154     </span><span class="jsdoc-var">getActionEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
155         </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">];
156     },
157
158     </span><span class="jsdoc-var">initComponent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
159     </span><span class="jsdoc-comment">/**
160      * If this is a lazy rendering component, render it to its container element.
161      * @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.
162      */
163     </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">){
164
165         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
166             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
167         }
168
169         </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">){
170             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
171         }
172
173         </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">){
174             </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">);
175             </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">;
176             </span><span class="jsdoc-var">this.allowDomMove </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
177         }
178         </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">);
179         </span><span class="jsdoc-var">this.rendered </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
180         </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">){
181             </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">){
182                 </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">];
183             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
184                 </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">);
185             }
186         }
187         </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">);
188         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
189             </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">);
190             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
191         }
192         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">){
193             </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">);
194             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">;
195         }
196         </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">);
197         </span><span class="jsdoc-var">this.afterRender</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">);
198         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
199             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
200         }
201         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
202             </span><span class="jsdoc-var">this.disable</span><span class="jsdoc-syntax">();
203         }
204
205         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
206
207     },
208
209     </span><span class="jsdoc-comment">/** @private */
210     // default function is not really useful
211     </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">){
212         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
213             </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">);
214             </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">){
215                 </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">);
216             }
217         }
218     },
219
220     </span><span class="jsdoc-comment">/** @private */
221     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
222         </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">?
223                       </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">);
224         </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">){
225             </span><span class="jsdoc-var">cfg.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
226         }
227         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
228     },
229
230     </span><span class="jsdoc-comment">/** @private */
231     </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
232
233     </span><span class="jsdoc-comment">/**
234      * Destroys this component by purging any event listeners, removing the component's element from the DOM,
235      * removing the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.
236      */
237     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
238         </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">){
239             </span><span class="jsdoc-var">this.purgeListeners</span><span class="jsdoc-syntax">();
240             </span><span class="jsdoc-var">this.beforeDestroy</span><span class="jsdoc-syntax">();
241             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
242                 </span><span class="jsdoc-var">this.el.removeAllListeners</span><span class="jsdoc-syntax">();
243                 </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
244                 </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">){
245                     </span><span class="jsdoc-var">this.container.remove</span><span class="jsdoc-syntax">();
246                 }
247             }
248             </span><span class="jsdoc-var">this.onDestroy</span><span class="jsdoc-syntax">();
249             </span><span class="jsdoc-var">Roo.ComponentMgr.unregister</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
250             </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">);
251         }
252     },
253
254         </span><span class="jsdoc-comment">/** @private */
255     </span><span class="jsdoc-var">beforeDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
256
257     },
258
259         </span><span class="jsdoc-comment">/** @private */
260         </span><span class="jsdoc-var">onDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
261
262     },
263
264     </span><span class="jsdoc-comment">/**
265      * Returns the underlying {@link Roo.Element}.
266      * @return {Roo.Element} The element
267      */
268     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
269         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
270     },
271
272     </span><span class="jsdoc-comment">/**
273      * Returns the id of this component.
274      * @return {String}
275      */
276     </span><span class="jsdoc-var">getId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
277         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
278     },
279
280     </span><span class="jsdoc-comment">/**
281      * Try to focus this component.
282      * @param {Boolean} selectText True to also select the text in this component (if applicable)
283      * @return {Roo.Component} this
284      */
285     </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">){
286         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
287             </span><span class="jsdoc-var">this.el.focus</span><span class="jsdoc-syntax">();
288             </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">){
289                 </span><span class="jsdoc-var">this.el.dom.select</span><span class="jsdoc-syntax">();
290             }
291         }
292         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
293     },
294
295     </span><span class="jsdoc-comment">/** @private */
296     </span><span class="jsdoc-var">blur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
297         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
298             </span><span class="jsdoc-var">this.el.blur</span><span class="jsdoc-syntax">();
299         }
300         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
301     },
302
303     </span><span class="jsdoc-comment">/**
304      * Disable this component.
305      * @return {Roo.Component} this
306      */
307     </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
308         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
309             </span><span class="jsdoc-var">this.onDisable</span><span class="jsdoc-syntax">();
310         }
311         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
312         </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">);
313         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
314     },
315
316         </span><span class="jsdoc-comment">// private
317     </span><span class="jsdoc-var">onDisable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
318         </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">);
319         </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">;
320     },
321
322     </span><span class="jsdoc-comment">/**
323      * Enable this component.
324      * @return {Roo.Component} this
325      */
326     </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
327         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
328             </span><span class="jsdoc-var">this.onEnable</span><span class="jsdoc-syntax">();
329         }
330         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
331         </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">);
332         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
333     },
334
335         </span><span class="jsdoc-comment">// private
336     </span><span class="jsdoc-var">onEnable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
337         </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">);
338         </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">;
339     },
340
341     </span><span class="jsdoc-comment">/**
342      * Convenience function for setting disabled/enabled by boolean.
343      * @param {Boolean} disabled
344      */
345     </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">){
346         </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">]();
347     },
348
349     </span><span class="jsdoc-comment">/**
350      * Show this component.
351      * @return {Roo.Component} this
352      */
353     </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
354         </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">){
355             </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
356             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
357                 </span><span class="jsdoc-var">this.onShow</span><span class="jsdoc-syntax">();
358             }
359             </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">);
360         }
361         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
362     },
363
364     </span><span class="jsdoc-comment">// private
365     </span><span class="jsdoc-var">onShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
366         </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">();
367         </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">){
368             </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">;
369         }</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">){
370             </span><span class="jsdoc-var">ae.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-hidden'</span><span class="jsdoc-syntax">);
371         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
372             </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">;
373         }
374     },
375
376     </span><span class="jsdoc-comment">/**
377      * Hide this component.
378      * @return {Roo.Component} this
379      */
380     </span><span class="jsdoc-var">hide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
381         </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">){
382             </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
383             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
384                 </span><span class="jsdoc-var">this.onHide</span><span class="jsdoc-syntax">();
385             }
386             </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">);
387         }
388         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
389     },
390
391     </span><span class="jsdoc-comment">// private
392     </span><span class="jsdoc-var">onHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
393         </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">();
394         </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">){
395             </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">;
396         }</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">){
397             </span><span class="jsdoc-var">ae.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-hidden'</span><span class="jsdoc-syntax">);
398         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
399             </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">;
400         }
401     },
402
403     </span><span class="jsdoc-comment">/**
404      * Convenience function to hide or show this component by boolean.
405      * @param {Boolean} visible True to show, false to hide
406      * @return {Roo.Component} this
407      */
408     </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">){
409         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">) {
410             </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
411         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
412             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
413         }
414         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
415     },
416
417     </span><span class="jsdoc-comment">/**
418      * Returns true if this component is visible.
419      */
420     </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
421         </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">();
422     },
423
424     </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">){
425         </span><span class="jsdoc-var">overrides </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">overrides </span><span class="jsdoc-syntax">|| {};
426         </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">();
427         </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">);
428         </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
429         </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">);
430     }
431 });</span></code></body></html>
RooJS - Version 1