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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
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.
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.
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">"string"</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">};
30 </span><span class="jsdoc-var">this.initialConfig </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
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">/**
36 * Fires after the component is disabled.
37 * @param {Roo.Component} this
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">/**
42 * Fires after the component is enabled.
43 * @param {Roo.Component} this
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">/**
48 * Fires before the component is shown. Return false to stop the show.
49 * @param {Roo.Component} this
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">/**
54 * Fires after the component is shown.
55 * @param {Roo.Component} this
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">/**
60 * Fires before the component is hidden. Return false to stop the hide.
61 * @param {Roo.Component} this
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">/**
66 * Fires after the component is hidden.
67 * @param {Roo.Component} this
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">/**
72 * Fires before the component is rendered. Return false to stop the render.
73 * @param {Roo.Component} this
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">/**
78 * Fires after the component is rendered.
79 * @param {Roo.Component} this
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
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">/**
90 * Fires after the component is destroyed.
91 * @param {Roo.Component} this
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">"roo-comp-" </span><span class="jsdoc-syntax">+ (++</span><span class="jsdoc-var">Roo.Component.AUTO_ID</span><span class="jsdoc-syntax">);
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">;
107 </span><span class="jsdoc-comment">/** @private */
108 </span><span class="jsdoc-var">Roo.Component.AUTO_ID </span><span class="jsdoc-syntax">= 1000;
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
114 * true if this component is hidden. Read-only.
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">/**
119 * true if this component is disabled. Read-only.
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">/**
124 * true if this component has been rendered. Read-only.
126 </span><span class="jsdoc-var">rendered </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
128 </span><span class="jsdoc-comment">/** @cfg {String} disableClass
129 * CSS class added to the component when it is disabled (defaults to "x-item-disabled").
131 </span><span class="jsdoc-var">disabledClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-item-disabled"</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).
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 * "visibility" (css visibility), "offsets" (negative offset position) and
139 * "display" (css display) - defaults to "display".
141 </span><span class="jsdoc-var">hideMode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">,
143 </span><span class="jsdoc-comment">/** @private */
144 </span><span class="jsdoc-var">ctype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"Roo.Component"</span><span class="jsdoc-syntax">,
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
151 </span><span class="jsdoc-var">actionMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"el"</span><span class="jsdoc-syntax">,
153 </span><span class="jsdoc-comment">/**
154 * @cfg {String} style
155 * css styles to add to component
156 * eg. text-align:right;
158 </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
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">];
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.
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">){
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">;
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">"beforerender"</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">;
180 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">&& </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">;
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">);
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">;
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">;
203 </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">);
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">();
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">();
212 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
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">);
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">"object" </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">&& !</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">;
234 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
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">,
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}.
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">"beforedestroy"</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">"container"</span><span class="jsdoc-syntax">){
252 </span><span class="jsdoc-var">this.container.remove</span><span class="jsdoc-syntax">();
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">"destroy"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
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">(){
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">(){
271 </span><span class="jsdoc-comment">/**
272 * Returns the underlying {@link Roo.Element}.
273 * @return {Roo.Element} The element
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">;
279 </span><span class="jsdoc-comment">/**
280 * Returns the id of this component.
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">;
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
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">();
299 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
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">();
307 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
310 </span><span class="jsdoc-comment">/**
311 * Disable this component.
312 * @return {Roo.Component} this
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">();
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">"disable"</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">;
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">;
329 </span><span class="jsdoc-comment">/**
330 * Enable this component.
331 * @return {Roo.Component} this
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">();
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">"enable"</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">;
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">;
348 </span><span class="jsdoc-comment">/**
349 * Convenience function for setting disabled/enabled by boolean.
350 * @param {Boolean} disabled
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">"disable" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"enable"</span><span class="jsdoc-syntax">]();
356 </span><span class="jsdoc-comment">/**
357 * Show this component.
358 * @return {Roo.Component} this
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">"beforeshow"</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">();
366 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"show"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
368 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
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">"visible"</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">""</span><span class="jsdoc-syntax">;
383 </span><span class="jsdoc-comment">/**
384 * Hide this component.
385 * @return {Roo.Component} this
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">"beforehide"</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">();
393 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"hide"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
395 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
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">"hidden"</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">"none"</span><span class="jsdoc-syntax">;
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
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">();
421 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
424 </span><span class="jsdoc-comment">/**
425 * Returns true if this component is visible.
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">();
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">);
438 });</span></code></body></html>