Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / docs / source / Component.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.2.0
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.Component"></div>/**
16  * @class Ext.Component
17  * @extends Ext.util.Observable
18  * <p>Base class for all Ext components.  All subclasses of Component may participate in the automated
19  * Ext component lifecycle of creation, rendering and destruction which is provided by the {@link Ext.Container Container} class.
20  * Components may be added to a Container through the {@link Ext.Container#items items} config option at the time the Container is created,
21  * or they may be added dynamically via the {@link Ext.Container#add add} method.</p>
22  * <p>The Component base class has built-in support for basic hide/show and enable/disable behavior.</p>
23  * <p>All Components are registered with the {@link Ext.ComponentMgr} on construction so that they can be referenced at any time via
24  * {@link Ext#getCmp}, passing the {@link #id}.</p>
25  * <p>All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component (or
26  * {@link Ext.BoxComponent} if managed box model handling is required, ie height and width management).</p>
27  * <p>See the <a href="http://extjs.com/learn/Tutorial:Creating_new_UI_controls">Creating new UI controls</a> tutorial for details on how
28  * and to either extend or augment ExtJs base classes to create custom Components.</p>
29  * <p>Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the
30  * xtype like {@link #getXType} and {@link #isXType}. This is the list of all valid xtypes:</p>
31  * <pre>
32 xtype            Class
33 -------------    ------------------
34 box              {@link Ext.BoxComponent}
35 button           {@link Ext.Button}
36 buttongroup      {@link Ext.ButtonGroup}
37 colorpalette     {@link Ext.ColorPalette}
38 component        {@link Ext.Component}
39 container        {@link Ext.Container}
40 cycle            {@link Ext.CycleButton}
41 dataview         {@link Ext.DataView}
42 datepicker       {@link Ext.DatePicker}
43 editor           {@link Ext.Editor}
44 editorgrid       {@link Ext.grid.EditorGridPanel}
45 flash            {@link Ext.FlashComponent}
46 grid             {@link Ext.grid.GridPanel}
47 listview         {@link Ext.ListView}
48 panel            {@link Ext.Panel}
49 progress         {@link Ext.ProgressBar}
50 propertygrid     {@link Ext.grid.PropertyGrid}
51 slider           {@link Ext.Slider}
52 spacer           {@link Ext.Spacer}
53 splitbutton      {@link Ext.SplitButton}
54 tabpanel         {@link Ext.TabPanel}
55 treepanel        {@link Ext.tree.TreePanel}
56 viewport         {@link Ext.ViewPort}
57 window           {@link Ext.Window}
58
59 Toolbar components
60 ---------------------------------------
61 paging           {@link Ext.PagingToolbar}
62 toolbar          {@link Ext.Toolbar}
63 tbbutton         {@link Ext.Toolbar.Button}        (deprecated; use button)
64 tbfill           {@link Ext.Toolbar.Fill}
65 tbitem           {@link Ext.Toolbar.Item}
66 tbseparator      {@link Ext.Toolbar.Separator}
67 tbspacer         {@link Ext.Toolbar.Spacer}
68 tbsplit          {@link Ext.Toolbar.SplitButton}   (deprecated; use splitbutton)
69 tbtext           {@link Ext.Toolbar.TextItem}
70
71 Menu components
72 ---------------------------------------
73 menu             {@link Ext.menu.Menu}
74 colormenu        {@link Ext.menu.ColorMenu}
75 datemenu         {@link Ext.menu.DateMenu}
76 menubaseitem     {@link Ext.menu.BaseItem}
77 menucheckitem    {@link Ext.menu.CheckItem}
78 menuitem         {@link Ext.menu.Item}
79 menuseparator    {@link Ext.menu.Separator}
80 menutextitem     {@link Ext.menu.TextItem}
81
82 Form components
83 ---------------------------------------
84 form             {@link Ext.form.FormPanel}
85 checkbox         {@link Ext.form.Checkbox}
86 checkboxgroup    {@link Ext.form.CheckboxGroup}
87 combo            {@link Ext.form.ComboBox}
88 datefield        {@link Ext.form.DateField}
89 displayfield     {@link Ext.form.DisplayField}
90 field            {@link Ext.form.Field}
91 fieldset         {@link Ext.form.FieldSet}
92 hidden           {@link Ext.form.Hidden}
93 htmleditor       {@link Ext.form.HtmlEditor}
94 label            {@link Ext.form.Label}
95 numberfield      {@link Ext.form.NumberField}
96 radio            {@link Ext.form.Radio}
97 radiogroup       {@link Ext.form.RadioGroup}
98 textarea         {@link Ext.form.TextArea}
99 textfield        {@link Ext.form.TextField}
100 timefield        {@link Ext.form.TimeField}
101 trigger          {@link Ext.form.TriggerField}
102
103 Chart components
104 ---------------------------------------
105 chart            {@link Ext.chart.Chart}
106 barchart         {@link Ext.chart.BarChart}
107 cartesianchart   {@link Ext.chart.CartesianChart}
108 columnchart      {@link Ext.chart.ColumnChart}
109 linechart        {@link Ext.chart.LineChart}
110 piechart         {@link Ext.chart.PieChart}
111
112 Store xtypes
113 ---------------------------------------
114 arraystore       {@link Ext.data.ArrayStore}
115 directstore      {@link Ext.data.DirectStore}
116 groupingstore    {@link Ext.data.GroupingStore}
117 jsonstore        {@link Ext.data.JsonStore}
118 simplestore      {@link Ext.data.SimpleStore}      (deprecated; use arraystore)
119 store            {@link Ext.data.Store}
120 xmlstore         {@link Ext.data.XmlStore}
121 </pre>
122  * @constructor
123  * @param {Ext.Element/String/Object} config The configuration options may be specified as either:
124  * <div class="mdetail-params"><ul>
125  * <li><b>an element</b> :
126  * <p class="sub-desc">it is set as the internal element and its id used as the component id</p></li>
127  * <li><b>a string</b> :
128  * <p class="sub-desc">it is assumed to be the id of an existing element and is used as the component id</p></li>
129  * <li><b>anything else</b> :
130  * <p class="sub-desc">it is assumed to be a standard config object and is applied to the component</p></li>
131  * </ul></div>
132  */
133 Ext.Component = function(config){
134     config = config || {};
135     if(config.initialConfig){
136         if(config.isAction){           // actions
137             this.baseAction = config;
138         }
139         config = config.initialConfig; // component cloning / action set up
140     }else if(config.tagName || config.dom || Ext.isString(config)){ // element object
141         config = {applyTo: config, id: config.id || config};
142     }
143
144     <div id="prop-Ext.Component-initialConfig"></div>/**
145      * This Component's initial configuration specification. Read-only.
146      * @type Object
147      * @property initialConfig
148      */
149     this.initialConfig = config;
150
151     Ext.apply(this, config);
152     this.addEvents(
153         <div id="event-Ext.Component-added"></div>/**
154          * @event added
155          * Fires when a component is added to an Ext.Container
156          * @param {Ext.Component} this
157          * @param {Ext.Container} ownerCt Container which holds the component
158          * @param {number} index Position at which the component was added
159          */
160         'added',
161         <div id="event-Ext.Component-disable"></div>/**
162          * @event disable
163          * Fires after the component is disabled.
164          * @param {Ext.Component} this
165          */
166         'disable',
167         <div id="event-Ext.Component-enable"></div>/**
168          * @event enable
169          * Fires after the component is enabled.
170          * @param {Ext.Component} this
171          */
172         'enable',
173         <div id="event-Ext.Component-beforeshow"></div>/**
174          * @event beforeshow
175          * Fires before the component is shown by calling the {@link #show} method.
176          * Return false from an event handler to stop the show.
177          * @param {Ext.Component} this
178          */
179         'beforeshow',
180         <div id="event-Ext.Component-show"></div>/**
181          * @event show
182          * Fires after the component is shown when calling the {@link #show} method.
183          * @param {Ext.Component} this
184          */
185         'show',
186         <div id="event-Ext.Component-beforehide"></div>/**
187          * @event beforehide
188          * Fires before the component is hidden by calling the {@link #hide} method.
189          * Return false from an event handler to stop the hide.
190          * @param {Ext.Component} this
191          */
192         'beforehide',
193         <div id="event-Ext.Component-hide"></div>/**
194          * @event hide
195          * Fires after the component is hidden.
196          * Fires after the component is hidden when calling the {@link #hide} method.
197          * @param {Ext.Component} this
198          */
199         'hide',
200         <div id="event-Ext.Component-removed"></div>/**
201          * @event removed
202          * Fires when a component is removed from an Ext.Container
203          * @param {Ext.Component} this
204          * @param {Ext.Container} ownerCt Container which holds the component
205          */
206         'removed',
207         <div id="event-Ext.Component-beforerender"></div>/**
208          * @event beforerender
209          * Fires before the component is {@link #rendered}. Return false from an
210          * event handler to stop the {@link #render}.
211          * @param {Ext.Component} this
212          */
213         'beforerender',
214         <div id="event-Ext.Component-render"></div>/**
215          * @event render
216          * Fires after the component markup is {@link #rendered}.
217          * @param {Ext.Component} this
218          */
219         'render',
220         <div id="event-Ext.Component-afterrender"></div>/**
221          * @event afterrender
222          * <p>Fires after the component rendering is finished.</p>
223          * <p>The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed
224          * by any afterRender method defined for the Component, and, if {@link #stateful}, after state
225          * has been restored.</p>
226          * @param {Ext.Component} this
227          */
228         'afterrender',
229         <div id="event-Ext.Component-beforedestroy"></div>/**
230          * @event beforedestroy
231          * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the {@link #destroy}.
232          * @param {Ext.Component} this
233          */
234         'beforedestroy',
235         <div id="event-Ext.Component-destroy"></div>/**
236          * @event destroy
237          * Fires after the component is {@link #destroy}ed.
238          * @param {Ext.Component} this
239          */
240         'destroy',
241         <div id="event-Ext.Component-beforestaterestore"></div>/**
242          * @event beforestaterestore
243          * Fires before the state of the component is restored. Return false from an event handler to stop the restore.
244          * @param {Ext.Component} this
245          * @param {Object} state The hash of state values returned from the StateProvider. If this
246          * event is not vetoed, then the state object is passed to <b><tt>applyState</tt></b>. By default,
247          * that simply copies property values into this Component. The method maybe overriden to
248          * provide custom state restoration.
249          */
250         'beforestaterestore',
251         <div id="event-Ext.Component-staterestore"></div>/**
252          * @event staterestore
253          * Fires after the state of the component is restored.
254          * @param {Ext.Component} this
255          * @param {Object} state The hash of state values returned from the StateProvider. This is passed
256          * to <b><tt>applyState</tt></b>. By default, that simply copies property values into this
257          * Component. The method maybe overriden to provide custom state restoration.
258          */
259         'staterestore',
260         <div id="event-Ext.Component-beforestatesave"></div>/**
261          * @event beforestatesave
262          * Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
263          * @param {Ext.Component} this
264          * @param {Object} state The hash of state values. This is determined by calling
265          * <b><tt>getState()</tt></b> on the Component. This method must be provided by the
266          * developer to return whetever representation of state is required, by default, Ext.Component
267          * has a null implementation.
268          */
269         'beforestatesave',
270         <div id="event-Ext.Component-statesave"></div>/**
271          * @event statesave
272          * Fires after the state of the component is saved to the configured state provider.
273          * @param {Ext.Component} this
274          * @param {Object} state The hash of state values. This is determined by calling
275          * <b><tt>getState()</tt></b> on the Component. This method must be provided by the
276          * developer to return whetever representation of state is required, by default, Ext.Component
277          * has a null implementation.
278          */
279         'statesave'
280     );
281     this.getId();
282     Ext.ComponentMgr.register(this);
283     Ext.Component.superclass.constructor.call(this);
284
285     if(this.baseAction){
286         this.baseAction.addComponent(this);
287     }
288
289     this.initComponent();
290
291     if(this.plugins){
292         if(Ext.isArray(this.plugins)){
293             for(var i = 0, len = this.plugins.length; i < len; i++){
294                 this.plugins[i] = this.initPlugin(this.plugins[i]);
295             }
296         }else{
297             this.plugins = this.initPlugin(this.plugins);
298         }
299     }
300
301     if(this.stateful !== false){
302         this.initState();
303     }
304
305     if(this.applyTo){
306         this.applyToMarkup(this.applyTo);
307         delete this.applyTo;
308     }else if(this.renderTo){
309         this.render(this.renderTo);
310         delete this.renderTo;
311     }
312 };
313
314 // private
315 Ext.Component.AUTO_ID = 1000;
316
317 Ext.extend(Ext.Component, Ext.util.Observable, {
318     // Configs below are used for all Components when rendered by FormLayout.
319     <div id="cfg-Ext.Component-fieldLabel"></div>/**
320      * @cfg {String} fieldLabel <p>The label text to display next to this Component (defaults to '').</p>
321      * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container which
322      * has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout manager (e.g.
323      * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>).</p><br>
324      * <p>Also see <tt>{@link #hideLabel}</tt> and
325      * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
326      * Example use:<pre><code>
327 new Ext.FormPanel({
328     height: 100,
329     renderTo: Ext.getBody(),
330     items: [{
331         xtype: 'textfield',
332         fieldLabel: 'Name'
333     }]
334 });
335 </code></pre>
336      */
337     <div id="cfg-Ext.Component-labelStyle"></div>/**
338      * @cfg {String} labelStyle <p>A CSS style specification string to apply directly to this field's
339      * label.  Defaults to the container's labelStyle value if set (e.g.,
340      * <tt>{@link Ext.layout.FormLayout#labelStyle}</tt> , or '').</p>
341      * <br><p><b>Note</b>: see the note for <code>{@link #clearCls}</code>.</p><br>
342      * <p>Also see <code>{@link #hideLabel}</code> and
343      * <code>{@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</code></p>
344      * Example use:<pre><code>
345 new Ext.FormPanel({
346     height: 100,
347     renderTo: Ext.getBody(),
348     items: [{
349         xtype: 'textfield',
350         fieldLabel: 'Name',
351         labelStyle: 'font-weight:bold;'
352     }]
353 });
354 </code></pre>
355      */
356     <div id="cfg-Ext.Component-labelSeparator"></div>/**
357      * @cfg {String} labelSeparator <p>The separator to display after the text of each
358      * <tt>{@link #fieldLabel}</tt>.  This property may be configured at various levels.
359      * The order of precedence is:
360      * <div class="mdetail-params"><ul>
361      * <li>field / component level</li>
362      * <li>container level</li>
363      * <li>{@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon <tt>':'</tt>)</li>
364      * </ul></div>
365      * To display no separator for this field's label specify empty string ''.</p>
366      * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
367      * <p>Also see <tt>{@link #hideLabel}</tt> and
368      * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
369      * Example use:<pre><code>
370 new Ext.FormPanel({
371     height: 100,
372     renderTo: Ext.getBody(),
373     layoutConfig: {
374         labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
375     },
376     {@link Ext.layout.FormLayout#labelSeparator labelSeparator}: '>>',     // config at container level
377     items: [{
378         xtype: 'textfield',
379         fieldLabel: 'Field 1',
380         labelSeparator: '...' // field/component level config supersedes others
381     },{
382         xtype: 'textfield',
383         fieldLabel: 'Field 2' // labelSeparator will be '='
384     }]
385 });
386 </code></pre>
387      */
388     <div id="cfg-Ext.Component-hideLabel"></div>/**
389      * @cfg {Boolean} hideLabel <p><tt>true</tt> to completely hide the label element
390      * ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to <tt>false</tt>.
391      * By default, even if you do not specify a <tt>{@link #fieldLabel}</tt> the space will still be
392      * reserved so that the field will line up with other fields that do have labels.
393      * Setting this to <tt>true</tt> will cause the field to not reserve that space.</p>
394      * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
395      * Example use:<pre><code>
396 new Ext.FormPanel({
397     height: 100,
398     renderTo: Ext.getBody(),
399     items: [{
400         xtype: 'textfield'
401         hideLabel: true
402     }]
403 });
404 </code></pre>
405      */
406     <div id="cfg-Ext.Component-clearCls"></div>/**
407      * @cfg {String} clearCls <p>The CSS class used to to apply to the special clearing div rendered
408      * directly after each form field wrapper to provide field clearing (defaults to
409      * <tt>'x-form-clear-left'</tt>).</p>
410      * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container
411      * which has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout
412      * manager (e.g. {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) and either a
413      * <tt>{@link #fieldLabel}</tt> is specified or <tt>isFormField=true</tt> is specified.</p><br>
414      * <p>See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.</p>
415      */
416     <div id="cfg-Ext.Component-itemCls"></div>/**
417      * @cfg {String} itemCls
418      * <p><b>Note</b>: this config is only used when this Component is rendered by a Container which
419      * has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout manager (e.g.
420      * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>).</p><br>
421      * <p>An additional CSS class to apply to the div wrapping the form item
422      * element of this field.  If supplied, <tt>itemCls</tt> at the <b>field</b> level will override
423      * the default <tt>itemCls</tt> supplied at the <b>container</b> level. The value specified for
424      * <tt>itemCls</tt> will be added to the default class (<tt>'x-form-item'</tt>).</p>
425      * <p>Since it is applied to the item wrapper (see
426      * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}), it allows
427      * you to write standard CSS rules that can apply to the field, the label (if specified), or
428      * any other element within the markup for the field.</p>
429      * <br><p><b>Note</b>: see the note for <tt>{@link #fieldLabel}</tt>.</p><br>
430      * Example use:<pre><code>
431 // Apply a style to the field&#39;s label:
432 &lt;style>
433     .required .x-form-item-label {font-weight:bold;color:red;}
434 &lt;/style>
435
436 new Ext.FormPanel({
437     height: 100,
438     renderTo: Ext.getBody(),
439     items: [{
440         xtype: 'textfield',
441         fieldLabel: 'Name',
442         itemCls: 'required' //this label will be styled
443     },{
444         xtype: 'textfield',
445         fieldLabel: 'Favorite Color'
446     }]
447 });
448 </code></pre>
449      */
450
451     <div id="cfg-Ext.Component-id"></div>/**
452      * @cfg {String} id
453      * <p>The <b>unique</b> id of this component (defaults to an {@link #getId auto-assigned id}).
454      * You should assign an id if you need to be able to access the component later and you do
455      * not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).</p>
456      * <p>Note that this id will also be used as the element id for the containing HTML element
457      * that is rendered to the page for this component. This allows you to write id-based CSS
458      * rules to style the specific instance of this component uniquely, and also to select
459      * sub-elements using this component's id as the parent.</p>
460      * <p><b>Note</b>: to avoid complications imposed by a unique <tt>id</tt> also see
461      * <code>{@link #itemId}</code> and <code>{@link #ref}</code>.</p>
462      * <p><b>Note</b>: to access the container of an item see <code>{@link #ownerCt}</code>.</p>
463      */
464     <div id="cfg-Ext.Component-itemId"></div>/**
465      * @cfg {String} itemId
466      * <p>An <tt>itemId</tt> can be used as an alternative way to get a reference to a component
467      * when no object reference is available.  Instead of using an <code>{@link #id}</code> with
468      * {@link Ext}.{@link Ext#getCmp getCmp}, use <code>itemId</code> with
469      * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
470      * <code>itemId</code>'s or <tt>{@link #id}</tt>'s. Since <code>itemId</code>'s are an index to the
471      * container's internal MixedCollection, the <code>itemId</code> is scoped locally to the container --
472      * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a <b>unique</b>
473      * <code>{@link #id}</code>.</p>
474      * <pre><code>
475 var c = new Ext.Panel({ //
476     {@link Ext.BoxComponent#height height}: 300,
477     {@link #renderTo}: document.body,
478     {@link Ext.Container#layout layout}: 'auto',
479     {@link Ext.Container#items items}: [
480         {
481             itemId: 'p1',
482             {@link Ext.Panel#title title}: 'Panel 1',
483             {@link Ext.BoxComponent#height height}: 150
484         },
485         {
486             itemId: 'p2',
487             {@link Ext.Panel#title title}: 'Panel 2',
488             {@link Ext.BoxComponent#height height}: 150
489         }
490     ]
491 })
492 p1 = c.{@link Ext.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
493 p2 = p1.{@link #ownerCt}.{@link Ext.Container#getComponent getComponent}('p2'); // reference via a sibling
494      * </code></pre>
495      * <p>Also see <tt>{@link #id}</tt> and <code>{@link #ref}</code>.</p>
496      * <p><b>Note</b>: to access the container of an item see <tt>{@link #ownerCt}</tt>.</p>
497      */
498     <div id="cfg-Ext.Component-xtype"></div>/**
499      * @cfg {String} xtype
500      * The registered <tt>xtype</tt> to create. This config option is not used when passing
501      * a config object into a constructor. This config option is used only when
502      * lazy instantiation is being used, and a child item of a Container is being
503      * specified not as a fully instantiated Component, but as a <i>Component config
504      * object</i>. The <tt>xtype</tt> will be looked up at render time up to determine what
505      * type of child Component to create.<br><br>
506      * The predefined xtypes are listed {@link Ext.Component here}.
507      * <br><br>
508      * If you subclass Components to create your own Components, you may register
509      * them using {@link Ext.ComponentMgr#registerType} in order to be able to
510      * take advantage of lazy instantiation and rendering.
511      */
512     <div id="cfg-Ext.Component-ptype"></div>/**
513      * @cfg {String} ptype
514      * The registered <tt>ptype</tt> to create. This config option is not used when passing
515      * a config object into a constructor. This config option is used only when
516      * lazy instantiation is being used, and a Plugin is being
517      * specified not as a fully instantiated Component, but as a <i>Component config
518      * object</i>. The <tt>ptype</tt> will be looked up at render time up to determine what
519      * type of Plugin to create.<br><br>
520      * If you create your own Plugins, you may register them using
521      * {@link Ext.ComponentMgr#registerPlugin} in order to be able to
522      * take advantage of lazy instantiation and rendering.
523      */
524     <div id="cfg-Ext.Component-cls"></div>/**
525      * @cfg {String} cls
526      * An optional extra CSS class that will be added to this component's Element (defaults to '').  This can be
527      * useful for adding customized styles to the component or any of its children using standard CSS rules.
528      */
529     <div id="cfg-Ext.Component-overCls"></div>/**
530      * @cfg {String} overCls
531      * An optional extra CSS class that will be added to this component's Element when the mouse moves
532      * over the Element, and removed when the mouse moves out. (defaults to '').  This can be
533      * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
534      */
535     <div id="cfg-Ext.Component-style"></div>/**
536      * @cfg {String} style
537      * A custom style specification to be applied to this component's Element.  Should be a valid argument to
538      * {@link Ext.Element#applyStyles}.
539      * <pre><code>
540 new Ext.Panel({
541     title: 'Some Title',
542     renderTo: Ext.getBody(),
543     width: 400, height: 300,
544     layout: 'form',
545     items: [{
546         xtype: 'textarea',
547         style: {
548             width: '95%',
549             marginBottom: '10px'
550         }
551     },
552         new Ext.Button({
553             text: 'Send',
554             minWidth: '100',
555             style: {
556                 marginBottom: '10px'
557             }
558         })
559     ]
560 });
561      * </code></pre>
562      */
563     <div id="cfg-Ext.Component-ctCls"></div>/**
564      * @cfg {String} ctCls
565      * <p>An optional extra CSS class that will be added to this component's container. This can be useful for
566      * adding customized styles to the container or any of its children using standard CSS rules.  See
567      * {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.</p>
568      * <p><b>Note</b>: <tt>ctCls</tt> defaults to <tt>''</tt> except for the following class
569      * which assigns a value by default:
570      * <div class="mdetail-params"><ul>
571      * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-layout-ct'</tt></li>
572      * </ul></div>
573      * To configure the above Class with an extra CSS class append to the default.  For example,
574      * for BoxLayout (Hbox and Vbox):<pre><code>
575      * ctCls: 'x-box-layout-ct custom-class'
576      * </code></pre>
577      * </p>
578      */
579     <div id="cfg-Ext.Component-disabled"></div>/**
580      * @cfg {Boolean} disabled
581      * Render this component disabled (default is false).
582      */
583     disabled : false,
584     <div id="cfg-Ext.Component-hidden"></div>/**
585      * @cfg {Boolean} hidden
586      * Render this component hidden (default is false). If <tt>true</tt>, the
587      * {@link #hide} method will be called internally.
588      */
589     hidden : false,
590     <div id="cfg-Ext.Component-plugins"></div>/**
591      * @cfg {Object/Array} plugins
592      * An object or array of objects that will provide custom functionality for this component.  The only
593      * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
594      * When a component is created, if any plugins are available, the component will call the init method on each
595      * plugin, passing a reference to itself.  Each plugin can then call methods or respond to events on the
596      * component as needed to provide its functionality.
597      */
598     <div id="cfg-Ext.Component-applyTo"></div>/**
599      * @cfg {Mixed} applyTo
600      * <p>Specify the id of the element, a DOM element or an existing Element corresponding to a DIV
601      * that is already present in the document that specifies some structural markup for this
602      * component.</p><div><ul>
603      * <li><b>Description</b> : <ul>
604      * <div class="sub-desc">When <tt>applyTo</tt> is used, constituent parts of the component can also be specified
605      * by id or CSS class name within the main element, and the component being created may attempt
606      * to create its subcomponents from that markup if applicable.</div>
607      * </ul></li>
608      * <li><b>Notes</b> : <ul>
609      * <div class="sub-desc">When using this config, a call to render() is not required.</div>
610      * <div class="sub-desc">If applyTo is specified, any value passed for {@link #renderTo} will be ignored and the target
611      * element's parent node will automatically be used as the component's container.</div>
612      * </ul></li>
613      * </ul></div>
614      */
615     <div id="cfg-Ext.Component-renderTo"></div>/**
616      * @cfg {Mixed} renderTo
617      * <p>Specify the id of the element, a DOM element or an existing Element that this component
618      * will be rendered into.</p><div><ul>
619      * <li><b>Notes</b> : <ul>
620      * <div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of
621      * a {@link Ext.Container Container}. It is the responsibility of the
622      * {@link Ext.Container Container}'s {@link Ext.Container#layout layout manager}
623      * to render and manage its child items.</div>
624      * <div class="sub-desc">When using this config, a call to render() is not required.</div>
625      * </ul></li>
626      * </ul></div>
627      * <p>See <tt>{@link #render}</tt> also.</p>
628      */
629     <div id="cfg-Ext.Component-stateful"></div>/**
630      * @cfg {Boolean} stateful
631      * <p>A flag which causes the Component to attempt to restore the state of
632      * internal properties from a saved state on startup. The component must have
633      * either a <code>{@link #stateId}</code> or <code>{@link #id}</code> assigned
634      * for state to be managed. Auto-generated ids are not guaranteed to be stable
635      * across page loads and cannot be relied upon to save and restore the same
636      * state for a component.<p>
637      * <p>For state saving to work, the state manager's provider must have been
638      * set to an implementation of {@link Ext.state.Provider} which overrides the
639      * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
640      * methods to save and recall name/value pairs. A built-in implementation,
641      * {@link Ext.state.CookieProvider} is available.</p>
642      * <p>To set the state provider for the current page:</p>
643      * <pre><code>
644 Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
645     expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
646 }));
647      * </code></pre>
648      * <p>A stateful Component attempts to save state when one of the events
649      * listed in the <code>{@link #stateEvents}</code> configuration fires.</p>
650      * <p>To save state, a stateful Component first serializes its state by
651      * calling <b><code>getState</code></b>. By default, this function does
652      * nothing. The developer must provide an implementation which returns an
653      * object hash which represents the Component's restorable state.</p>
654      * <p>The value yielded by getState is passed to {@link Ext.state.Manager#set}
655      * which uses the configured {@link Ext.state.Provider} to save the object
656      * keyed by the Component's <code>{@link stateId}</code>, or, if that is not
657      * specified, its <code>{@link #id}</code>.</p>
658      * <p>During construction, a stateful Component attempts to <i>restore</i>
659      * its state by calling {@link Ext.state.Manager#get} passing the
660      * <code>{@link #stateId}</code>, or, if that is not specified, the
661      * <code>{@link #id}</code>.</p>
662      * <p>The resulting object is passed to <b><code>applyState</code></b>.
663      * The default implementation of <code>applyState</code> simply copies
664      * properties into the object, but a developer may override this to support
665      * more behaviour.</p>
666      * <p>You can perform extra processing on state save and restore by attaching
667      * handlers to the {@link #beforestaterestore}, {@link #staterestore},
668      * {@link #beforestatesave} and {@link #statesave} events.</p>
669      */
670     <div id="cfg-Ext.Component-stateId"></div>/**
671      * @cfg {String} stateId
672      * The unique id for this component to use for state management purposes
673      * (defaults to the component id if one was set, otherwise null if the
674      * component is using a generated id).
675      * <p>See <code>{@link #stateful}</code> for an explanation of saving and
676      * restoring Component state.</p>
677      */
678     <div id="cfg-Ext.Component-stateEvents"></div>/**
679      * @cfg {Array} stateEvents
680      * <p>An array of events that, when fired, should trigger this component to
681      * save its state (defaults to none). <code>stateEvents</code> may be any type
682      * of event supported by this component, including browser or custom events
683      * (e.g., <tt>['click', 'customerchange']</tt>).</p>
684      * <p>See <code>{@link #stateful}</code> for an explanation of saving and
685      * restoring Component state.</p>
686      */
687     <div id="cfg-Ext.Component-autoEl"></div>/**
688      * @cfg {Mixed} autoEl
689      * <p>A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
690      * encapsulate this Component.</p>
691      * <p>You do not normally need to specify this. For the base classes {@link Ext.Component}, {@link Ext.BoxComponent},
692      * and {@link Ext.Container}, this defaults to <b><tt>'div'</tt></b>. The more complex Ext classes use a more complex
693      * DOM structure created by their own onRender methods.</p>
694      * <p>This is intended to allow the developer to create application-specific utility Components encapsulated by
695      * different DOM elements. Example usage:</p><pre><code>
696 {
697     xtype: 'box',
698     autoEl: {
699         tag: 'img',
700         src: 'http://www.example.com/example.jpg'
701     }
702 }, {
703     xtype: 'box',
704     autoEl: {
705         tag: 'blockquote',
706         html: 'autoEl is cool!'
707     }
708 }, {
709     xtype: 'container',
710     autoEl: 'ul',
711     cls: 'ux-unordered-list',
712     items: {
713         xtype: 'box',
714         autoEl: 'li',
715         html: 'First list item'
716     }
717 }
718 </code></pre>
719      */
720     autoEl : 'div',
721
722     <div id="cfg-Ext.Component-disabledClass"></div>/**
723      * @cfg {String} disabledClass
724      * CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
725      */
726     disabledClass : 'x-item-disabled',
727     <div id="cfg-Ext.Component-allowDomMove"></div>/**
728      * @cfg {Boolean} allowDomMove
729      * Whether the component can move the Dom node when rendering (defaults to true).
730      */
731     allowDomMove : true,
732     <div id="cfg-Ext.Component-autoShow"></div>/**
733      * @cfg {Boolean} autoShow
734      * True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
735      * them on render (defaults to false).
736      */
737     autoShow : false,
738     <div id="cfg-Ext.Component-hideMode"></div>/**
739      * @cfg {String} hideMode
740      * <p>How this component should be hidden. Supported values are <tt>'visibility'</tt>
741      * (css visibility), <tt>'offsets'</tt> (negative offset position) and <tt>'display'</tt>
742      * (css display).</p>
743      * <br><p><b>Note</b>: the default of <tt>'display'</tt> is generally preferred
744      * since items are automatically laid out when they are first shown (no sizing
745      * is done while hidden).</p>
746      */
747     hideMode : 'display',
748     <div id="cfg-Ext.Component-hideParent"></div>/**
749      * @cfg {Boolean} hideParent
750      * True to hide and show the component's container when hide/show is called on the component, false to hide
751      * and show the component itself (defaults to false).  For example, this can be used as a shortcut for a hide
752      * button on a window by setting hide:true on the button when adding it to its parent container.
753      */
754     hideParent : false,
755     <div id="prop-Ext.Component-el"></div>/**
756      * <p>The {@link Ext.Element} which encapsulates this Component. Read-only.</p>
757      * <p>This will <i>usually</i> be a &lt;DIV> element created by the class's onRender method, but
758      * that may be overridden using the <code>{@link #autoEl}</code> config.</p>
759      * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
760      * <p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
761      * for this Component's own Observable events), see the {@link Ext.util.Observable#listeners listeners}
762      * config for a suggestion, or use a render listener directly:</p><pre><code>
763 new Ext.Panel({
764     title: 'The Clickable Panel',
765     listeners: {
766         render: function(p) {
767             // Append the Panel to the click handler&#39;s argument list.
768             p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
769         },
770         single: true  // Remove the listener after first invocation
771     }
772 });
773 </code></pre>
774      * <p>See also <tt>{@link #getEl getEl}</p>
775      * @type Ext.Element
776      * @property el
777      */
778     <div id="prop-Ext.Component-ownerCt"></div>/**
779      * This Component's owner {@link Ext.Container Container} (defaults to undefined, and is set automatically when
780      * this Component is added to a Container).  Read-only.
781      * <p><b>Note</b>: to access items within the Container see <tt>{@link #itemId}</tt>.</p>
782      * @type Ext.Container
783      * @property ownerCt
784      */
785     <div id="prop-Ext.Component-hidden"></div>/**
786      * True if this component is hidden. Read-only.
787      * @type Boolean
788      * @property hidden
789      */
790     <div id="prop-Ext.Component-disabled"></div>/**
791      * True if this component is disabled. Read-only.
792      * @type Boolean
793      * @property disabled
794      */
795     <div id="prop-Ext.Component-rendered"></div>/**
796      * True if this component has been rendered. Read-only.
797      * @type Boolean
798      * @property rendered
799      */
800     rendered : false,
801
802     <div id="cfg-Ext.Component-contentEl"></div>/**
803      * @cfg {String} contentEl
804      * <p>Optional. Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content
805      * for this component.</p>
806      * <ul>
807      * <li><b>Description</b> :
808      * <div class="sub-desc">This config option is used to take an existing HTML element and place it in the layout element
809      * of a new component (it simply moves the specified DOM element <i>after the Component is rendered</i> to use as the content.</div></li>
810      * <li><b>Notes</b> :
811      * <div class="sub-desc">The specified HTML element is appended to the layout element of the component <i>after any configured
812      * {@link #html HTML} has been inserted</i>, and so the document will not contain this element at the time the {@link #render} event is fired.</div>
813      * <div class="sub-desc">The specified HTML element used will not participate in any <code><b>{@link Ext.Container#layout layout}</b></code>
814      * scheme that the Component may use. It is just HTML. Layouts operate on child <code><b>{@link Ext.Container#items items}</b></code>.</div>
815      * <div class="sub-desc">Add either the <code>x-hidden</code> or the <code>x-hide-display</code> CSS class to
816      * prevent a brief flicker of the content before it is rendered to the panel.</div></li>
817      * </ul>
818      */
819     <div id="cfg-Ext.Component-html"></div>/**
820      * @cfg {String/Object} html
821      * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element
822      * content (defaults to ''). The HTML content is added after the component is rendered,
823      * so the document will not contain this HTML at the time the {@link #render} event is fired.
824      * This content is inserted into the body <i>before</i> any configured {@link #contentEl} is appended.
825      */
826
827     <div id="cfg-Ext.Component-tpl"></div>/**
828      * @cfg {Mixed} tpl
829      * An <bold>{@link Ext.Template}</bold>, <bold>{@link Ext.XTemplate}</bold>
830      * or an array of strings to form an Ext.XTemplate.
831      * Used in conjunction with the <code>{@link #data}</code> and
832      * <code>{@link #tplWriteMode}</code> configurations.
833      */
834
835     <div id="cfg-Ext.Component-tplWriteMode"></div>/**
836      * @cfg {String} tplWriteMode The Ext.(X)Template method to use when
837      * updating the content area of the Component. Defaults to <tt>'overwrite'</tt>
838      * (see <code>{@link Ext.XTemplate#overwrite}</code>).
839      */
840     tplWriteMode : 'overwrite',
841
842     <div id="cfg-Ext.Component-data"></div>/**
843      * @cfg {Mixed} data
844      * The initial set of data to apply to the <code>{@link #tpl}</code> to
845      * update the content area of the Component.
846      */
847     
848     <div id="cfg-Ext.Component-bubbleEvents"></div>/**
849      * @cfg {Array} bubbleEvents
850      * <p>An array of events that, when fired, should be bubbled to any parent container.
851      * See {@link Ext.util.Observable#enableBubble}.
852      * Defaults to <tt>[]</tt>.
853      */
854     bubbleEvents: [],
855
856
857     // private
858     ctype : 'Ext.Component',
859
860     // private
861     actionMode : 'el',
862
863     // private
864     getActionEl : function(){
865         return this[this.actionMode];
866     },
867
868     initPlugin : function(p){
869         if(p.ptype && !Ext.isFunction(p.init)){
870             p = Ext.ComponentMgr.createPlugin(p);
871         }else if(Ext.isString(p)){
872             p = Ext.ComponentMgr.createPlugin({
873                 ptype: p
874             });
875         }
876         p.init(this);
877         return p;
878     },
879
880     /* // protected
881      * Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default).
882      * <pre><code>
883 // Traditional constructor:
884 Ext.Foo = function(config){
885     // call superclass constructor:
886     Ext.Foo.superclass.constructor.call(this, config);
887
888     this.addEvents({
889         // add events
890     });
891 };
892 Ext.extend(Ext.Foo, Ext.Bar, {
893    // class body
894 }
895
896 // initComponent replaces the constructor:
897 Ext.Foo = Ext.extend(Ext.Bar, {
898     initComponent : function(){
899         // call superclass initComponent
900         Ext.Container.superclass.initComponent.call(this);
901
902         this.addEvents({
903             // add events
904         });
905     }
906 }
907 </code></pre>
908      */
909     initComponent : function(){
910         /*
911          * this is double processing, however it allows people to be able to do
912          * Ext.apply(this, {
913          *     listeners: {
914          *         //here
915          *     }
916          * });
917          * MyClass.superclass.initComponent.call(this);
918          */
919         if(this.listeners){
920             this.on(this.listeners);
921             delete this.listeners;
922         }
923         this.enableBubble(this.bubbleEvents);
924     },
925
926     <div id="method-Ext.Component-render"></div>/**
927      * <p>Render this Component into the passed HTML element.</p>
928      * <p><b>If you are using a {@link Ext.Container Container} object to house this Component, then
929      * do not use the render method.</b></p>
930      * <p>A Container's child Components are rendered by that Container's
931      * {@link Ext.Container#layout layout} manager when the Container is first rendered.</p>
932      * <p>Certain layout managers allow dynamic addition of child components. Those that do
933      * include {@link Ext.layout.CardLayout}, {@link Ext.layout.AnchorLayout},
934      * {@link Ext.layout.FormLayout}, {@link Ext.layout.TableLayout}.</p>
935      * <p>If the Container is already rendered when a new child Component is added, you may need to call
936      * the Container's {@link Ext.Container#doLayout doLayout} to refresh the view which causes any
937      * unrendered child Components to be rendered. This is required so that you can add multiple
938      * child components if needed while only refreshing the layout once.</p>
939      * <p>When creating complex UIs, it is important to remember that sizing and positioning
940      * of child items is the responsibility of the Container's {@link Ext.Container#layout layout} manager.
941      * If you expect child items to be sized in response to user interactions, you must
942      * configure the Container with a layout manager which creates and manages the type of layout you
943      * have in mind.</p>
944      * <p><b>Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
945      * layout manager is used which does nothing but render child components sequentially into the
946      * Container. No sizing or positioning will be performed in this situation.</b></p>
947      * @param {Element/HTMLElement/String} container (optional) The element this Component should be
948      * rendered into. If it is being created from existing markup, this should be omitted.
949      * @param {String/Number} position (optional) The element ID or DOM node index within the container <b>before</b>
950      * which this component will be inserted (defaults to appending to the end of the container)
951      */
952     render : function(container, position){
953         if(!this.rendered && this.fireEvent('beforerender', this) !== false){
954             if(!container && this.el){
955                 this.el = Ext.get(this.el);
956                 container = this.el.dom.parentNode;
957                 this.allowDomMove = false;
958             }
959             this.container = Ext.get(container);
960             if(this.ctCls){
961                 this.container.addClass(this.ctCls);
962             }
963             this.rendered = true;
964             if(position !== undefined){
965                 if(Ext.isNumber(position)){
966                     position = this.container.dom.childNodes[position];
967                 }else{
968                     position = Ext.getDom(position);
969                 }
970             }
971             this.onRender(this.container, position || null);
972             if(this.autoShow){
973                 this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
974             }
975             if(this.cls){
976                 this.el.addClass(this.cls);
977                 delete this.cls;
978             }
979             if(this.style){
980                 this.el.applyStyles(this.style);
981                 delete this.style;
982             }
983             if(this.overCls){
984                 this.el.addClassOnOver(this.overCls);
985             }
986             this.fireEvent('render', this);
987
988
989             // Populate content of the component with html, contentEl or
990             // a tpl.
991             var contentTarget = this.getContentTarget();
992             if (this.html){
993                 contentTarget.update(Ext.DomHelper.markup(this.html));
994                 delete this.html;
995             }
996             if (this.contentEl){
997                 var ce = Ext.getDom(this.contentEl);
998                 Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
999                 contentTarget.appendChild(ce);
1000             }
1001             if (this.tpl) {
1002                 if (!this.tpl.compile) {
1003                     this.tpl = new Ext.XTemplate(this.tpl);
1004                 }
1005                 if (this.data) {
1006                     this.tpl[this.tplWriteMode](contentTarget, this.data);
1007                     delete this.data;
1008                 }
1009             }
1010             this.afterRender(this.container);
1011
1012
1013             if(this.hidden){
1014                 // call this so we don't fire initial hide events.
1015                 this.doHide();
1016             }
1017             if(this.disabled){
1018                 // pass silent so the event doesn't fire the first time.
1019                 this.disable(true);
1020             }
1021
1022             if(this.stateful !== false){
1023                 this.initStateEvents();
1024             }
1025             this.fireEvent('afterrender', this);
1026         }
1027         return this;
1028     },
1029
1030
1031     <div id="method-Ext.Component-update"></div>/**
1032      * Update the content area of a component.
1033      * @param {Mixed} htmlOrData
1034      * If this component has been configured with a template via the tpl config
1035      * then it will use this argument as data to populate the template.
1036      * If this component was not configured with a template, the components
1037      * content area will be updated via Ext.Element update
1038      * @param {Boolean} loadScripts
1039      * (optional) Only legitimate when using the html configuration. Defaults to false
1040      * @param {Function} callback
1041      * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading
1042      */
1043     update: function(htmlOrData, loadScripts, cb) {
1044         var contentTarget = this.getContentTarget();
1045         if (this.tpl && typeof htmlOrData !== "string") {
1046             this.tpl[this.tplWriteMode](contentTarget, htmlOrData || {});
1047         } else {
1048             var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
1049             contentTarget.update(html, loadScripts, cb);
1050         }
1051     },
1052
1053
1054     /**
1055      * @private
1056      * Method to manage awareness of when components are added to their
1057      * respective Container, firing an added event.
1058      * References are established at add time rather than at render time.
1059      * @param {Ext.Container} container Container which holds the component
1060      * @param {number} pos Position at which the component was added
1061      */
1062     onAdded : function(container, pos) {
1063         this.ownerCt = container;
1064         this.initRef();
1065         this.fireEvent('added', this, container, pos);
1066     },
1067
1068     /**
1069      * @private
1070      * Method to manage awareness of when components are removed from their
1071      * respective Container, firing an removed event. References are properly
1072      * cleaned up after removing a component from its owning container.
1073      */
1074     onRemoved : function() {
1075         this.removeRef();
1076         this.fireEvent('removed', this, this.ownerCt);
1077         delete this.ownerCt;
1078     },
1079
1080     /**
1081      * @private
1082      * Method to establish a reference to a component.
1083      */
1084     initRef : function() {
1085         <div id="cfg-Ext.Component-ref"></div>/**
1086          * @cfg {String} ref
1087          * <p>A path specification, relative to the Component's <code>{@link #ownerCt}</code>
1088          * specifying into which ancestor Container to place a named reference to this Component.</p>
1089          * <p>The ancestor axis can be traversed by using '/' characters in the path.
1090          * For example, to put a reference to a Toolbar Button into <i>the Panel which owns the Toolbar</i>:</p><pre><code>
1091 var myGrid = new Ext.grid.EditorGridPanel({
1092     title: 'My EditorGridPanel',
1093     store: myStore,
1094     colModel: myColModel,
1095     tbar: [{
1096         text: 'Save',
1097         handler: saveChanges,
1098         disabled: true,
1099         ref: '../saveButton'
1100     }],
1101     listeners: {
1102         afteredit: function() {
1103 //          The button reference is in the GridPanel
1104             myGrid.saveButton.enable();
1105         }
1106     }
1107 });
1108 </code></pre>
1109          * <p>In the code above, if the <code>ref</code> had been <code>'saveButton'</code>
1110          * the reference would have been placed into the Toolbar. Each '/' in the <code>ref</code>
1111          * moves up one level from the Component's <code>{@link #ownerCt}</code>.</p>
1112          * <p>Also see the <code>{@link #added}</code> and <code>{@link #removed}</code> events.</p>
1113          */
1114         if(this.ref && !this.refOwner){
1115             var levels = this.ref.split('/'),
1116                 last = levels.length,
1117                 i = 0,
1118                 t = this;
1119
1120             while(t && i < last){
1121                 t = t.ownerCt;
1122                 ++i;
1123             }
1124             if(t){
1125                 t[this.refName = levels[--i]] = this;
1126                 <div id="prop-Ext.Component-refOwner"></div>/**
1127                  * @type Ext.Container
1128                  * @property refOwner
1129                  * The ancestor Container into which the {@link #ref} reference was inserted if this Component
1130                  * is a child of a Container, and has been configured with a <code>ref</code>.
1131                  */
1132                 this.refOwner = t;
1133             }
1134         }
1135     },
1136
1137     removeRef : function() {
1138         if (this.refOwner && this.refName) {
1139             delete this.refOwner[this.refName];
1140             delete this.refOwner;
1141         }
1142     },
1143
1144     // private
1145     initState : function(){
1146         if(Ext.state.Manager){
1147             var id = this.getStateId();
1148             if(id){
1149                 var state = Ext.state.Manager.get(id);
1150                 if(state){
1151                     if(this.fireEvent('beforestaterestore', this, state) !== false){
1152                         this.applyState(Ext.apply({}, state));
1153                         this.fireEvent('staterestore', this, state);
1154                     }
1155                 }
1156             }
1157         }
1158     },
1159
1160     // private
1161     getStateId : function(){
1162         return this.stateId || ((/^(ext-comp-|ext-gen)/).test(String(this.id)) ? null : this.id);
1163     },
1164
1165     // private
1166     initStateEvents : function(){
1167         if(this.stateEvents){
1168             for(var i = 0, e; e = this.stateEvents[i]; i++){
1169                 this.on(e, this.saveState, this, {delay:100});
1170             }
1171         }
1172     },
1173
1174     // private
1175     applyState : function(state){
1176         if(state){
1177             Ext.apply(this, state);
1178         }
1179     },
1180
1181     // private
1182     getState : function(){
1183         return null;
1184     },
1185
1186     // private
1187     saveState : function(){
1188         if(Ext.state.Manager && this.stateful !== false){
1189             var id = this.getStateId();
1190             if(id){
1191                 var state = this.getState();
1192                 if(this.fireEvent('beforestatesave', this, state) !== false){
1193                     Ext.state.Manager.set(id, state);
1194                     this.fireEvent('statesave', this, state);
1195                 }
1196             }
1197         }
1198     },
1199
1200     <div id="method-Ext.Component-applyToMarkup"></div>/**
1201      * Apply this component to existing markup that is valid. With this function, no call to render() is required.
1202      * @param {String/HTMLElement} el
1203      */
1204     applyToMarkup : function(el){
1205         this.allowDomMove = false;
1206         this.el = Ext.get(el);
1207         this.render(this.el.dom.parentNode);
1208     },
1209
1210     <div id="method-Ext.Component-addClass"></div>/**
1211      * Adds a CSS class to the component's underlying element.
1212      * @param {string} cls The CSS class name to add
1213      * @return {Ext.Component} this
1214      */
1215     addClass : function(cls){
1216         if(this.el){
1217             this.el.addClass(cls);
1218         }else{
1219             this.cls = this.cls ? this.cls + ' ' + cls : cls;
1220         }
1221         return this;
1222     },
1223
1224     <div id="method-Ext.Component-removeClass"></div>/**
1225      * Removes a CSS class from the component's underlying element.
1226      * @param {string} cls The CSS class name to remove
1227      * @return {Ext.Component} this
1228      */
1229     removeClass : function(cls){
1230         if(this.el){
1231             this.el.removeClass(cls);
1232         }else if(this.cls){
1233             this.cls = this.cls.split(' ').remove(cls).join(' ');
1234         }
1235         return this;
1236     },
1237
1238     // private
1239     // default function is not really useful
1240     onRender : function(ct, position){
1241         if(!this.el && this.autoEl){
1242             if(Ext.isString(this.autoEl)){
1243                 this.el = document.createElement(this.autoEl);
1244             }else{
1245                 var div = document.createElement('div');
1246                 Ext.DomHelper.overwrite(div, this.autoEl);
1247                 this.el = div.firstChild;
1248             }
1249             if (!this.el.id) {
1250                 this.el.id = this.getId();
1251             }
1252         }
1253         if(this.el){
1254             this.el = Ext.get(this.el);
1255             if(this.allowDomMove !== false){
1256                 ct.dom.insertBefore(this.el.dom, position);
1257                 if (div) {
1258                     Ext.removeNode(div);
1259                     div = null;
1260                 }
1261             }
1262         }
1263     },
1264
1265     // private
1266     getAutoCreate : function(){
1267         var cfg = Ext.isObject(this.autoCreate) ?
1268                       this.autoCreate : Ext.apply({}, this.defaultAutoCreate);
1269         if(this.id && !cfg.id){
1270             cfg.id = this.id;
1271         }
1272         return cfg;
1273     },
1274
1275     // private
1276     afterRender : Ext.emptyFn,
1277
1278     <div id="method-Ext.Component-destroy"></div>/**
1279      * Destroys this component by purging any event listeners, removing the component's element from the DOM,
1280      * removing the component from its {@link Ext.Container} (if applicable) and unregistering it from
1281      * {@link Ext.ComponentMgr}.  Destruction is generally handled automatically by the framework and this method
1282      * should usually not need to be called directly.
1283      *
1284      */
1285     destroy : function(){
1286         if(!this.isDestroyed){
1287             if(this.fireEvent('beforedestroy', this) !== false){
1288                 this.destroying = true;
1289                 this.beforeDestroy();
1290                 if(this.ownerCt && this.ownerCt.remove){
1291                     this.ownerCt.remove(this, false);
1292                 }
1293                 if(this.rendered){
1294                     this.el.remove();
1295                     if(this.actionMode == 'container' || this.removeMode == 'container'){
1296                         this.container.remove();
1297                     }
1298                 }
1299                 // Stop any buffered tasks
1300                 if(this.focusTask && this.focusTask.cancel){
1301                     this.focusTask.cancel();
1302                 }
1303                 this.onDestroy();
1304                 Ext.ComponentMgr.unregister(this);
1305                 this.fireEvent('destroy', this);
1306                 this.purgeListeners();
1307                 this.destroying = false;
1308                 this.isDestroyed = true;
1309             }
1310         }
1311     },
1312
1313     deleteMembers : function(){
1314         var args = arguments;
1315         for(var i = 0, len = args.length; i < len; ++i){
1316             delete this[args[i]];
1317         }
1318     },
1319
1320     // private
1321     beforeDestroy : Ext.emptyFn,
1322
1323     // private
1324     onDestroy  : Ext.emptyFn,
1325
1326     <div id="method-Ext.Component-getEl"></div>/**
1327      * <p>Returns the {@link Ext.Element} which encapsulates this Component.</p>
1328      * <p>This will <i>usually</i> be a &lt;DIV> element created by the class's onRender method, but
1329      * that may be overridden using the {@link #autoEl} config.</p>
1330      * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
1331      * <p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
1332      * for this Component's own Observable events), see the {@link #listeners} config for a suggestion,
1333      * or use a render listener directly:</p><pre><code>
1334 new Ext.Panel({
1335     title: 'The Clickable Panel',
1336     listeners: {
1337         render: function(p) {
1338             // Append the Panel to the click handler&#39;s argument list.
1339             p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
1340         },
1341         single: true  // Remove the listener after first invocation
1342     }
1343 });
1344 </code></pre>
1345      * @return {Ext.Element} The Element which encapsulates this Component.
1346      */
1347     getEl : function(){
1348         return this.el;
1349     },
1350
1351     // private
1352     getContentTarget : function(){
1353         return this.el;
1354     },
1355
1356     <div id="method-Ext.Component-getId"></div>/**
1357      * Returns the <code>id</code> of this component or automatically generates and
1358      * returns an <code>id</code> if an <code>id</code> is not defined yet:<pre><code>
1359      * 'ext-comp-' + (++Ext.Component.AUTO_ID)
1360      * </code></pre>
1361      * @return {String} id
1362      */
1363     getId : function(){
1364         return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID));
1365     },
1366
1367     <div id="method-Ext.Component-getItemId"></div>/**
1368      * Returns the <code>{@link #itemId}</code> of this component.  If an
1369      * <code>{@link #itemId}</code> was not assigned through configuration the
1370      * <code>id</code> is returned using <code>{@link #getId}</code>.
1371      * @return {String}
1372      */
1373     getItemId : function(){
1374         return this.itemId || this.getId();
1375     },
1376
1377     <div id="method-Ext.Component-focus"></div>/**
1378      * Try to focus this component.
1379      * @param {Boolean} selectText (optional) If applicable, true to also select the text in this component
1380      * @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
1381      * @return {Ext.Component} this
1382      */
1383     focus : function(selectText, delay){
1384         if(delay){
1385             this.focusTask = new Ext.util.DelayedTask(this.focus, this, [selectText, false]);
1386             this.focusTask.delay(Ext.isNumber(delay) ? delay : 10);
1387             return;
1388         }
1389         if(this.rendered && !this.isDestroyed){
1390             this.el.focus();
1391             if(selectText === true){
1392                 this.el.dom.select();
1393             }
1394         }
1395         return this;
1396     },
1397
1398     // private
1399     blur : function(){
1400         if(this.rendered){
1401             this.el.blur();
1402         }
1403         return this;
1404     },
1405
1406     <div id="method-Ext.Component-disable"></div>/**
1407      * Disable this component and fire the 'disable' event.
1408      * @return {Ext.Component} this
1409      */
1410     disable : function(/* private */ silent){
1411         if(this.rendered){
1412             this.onDisable();
1413         }
1414         this.disabled = true;
1415         if(silent !== true){
1416             this.fireEvent('disable', this);
1417         }
1418         return this;
1419     },
1420
1421     // private
1422     onDisable : function(){
1423         this.getActionEl().addClass(this.disabledClass);
1424         this.el.dom.disabled = true;
1425     },
1426
1427     <div id="method-Ext.Component-enable"></div>/**
1428      * Enable this component and fire the 'enable' event.
1429      * @return {Ext.Component} this
1430      */
1431     enable : function(){
1432         if(this.rendered){
1433             this.onEnable();
1434         }
1435         this.disabled = false;
1436         this.fireEvent('enable', this);
1437         return this;
1438     },
1439
1440     // private
1441     onEnable : function(){
1442         this.getActionEl().removeClass(this.disabledClass);
1443         this.el.dom.disabled = false;
1444     },
1445
1446     <div id="method-Ext.Component-setDisabled"></div>/**
1447      * Convenience function for setting disabled/enabled by boolean.
1448      * @param {Boolean} disabled
1449      * @return {Ext.Component} this
1450      */
1451     setDisabled : function(disabled){
1452         return this[disabled ? 'disable' : 'enable']();
1453     },
1454
1455     <div id="method-Ext.Component-show"></div>/**
1456      * Show this component.  Listen to the '{@link #beforeshow}' event and return
1457      * <tt>false</tt> to cancel showing the component.  Fires the '{@link #show}'
1458      * event after showing the component.
1459      * @return {Ext.Component} this
1460      */
1461     show : function(){
1462         if(this.fireEvent('beforeshow', this) !== false){
1463             this.hidden = false;
1464             if(this.autoRender){
1465                 this.render(Ext.isBoolean(this.autoRender) ? Ext.getBody() : this.autoRender);
1466             }
1467             if(this.rendered){
1468                 this.onShow();
1469             }
1470             this.fireEvent('show', this);
1471         }
1472         return this;
1473     },
1474
1475     // private
1476     onShow : function(){
1477         this.getVisibilityEl().removeClass('x-hide-' + this.hideMode);
1478     },
1479
1480     <div id="method-Ext.Component-hide"></div>/**
1481      * Hide this component.  Listen to the '{@link #beforehide}' event and return
1482      * <tt>false</tt> to cancel hiding the component.  Fires the '{@link #hide}'
1483      * event after hiding the component. Note this method is called internally if
1484      * the component is configured to be <code>{@link #hidden}</code>.
1485      * @return {Ext.Component} this
1486      */
1487     hide : function(){
1488         if(this.fireEvent('beforehide', this) !== false){
1489             this.doHide();
1490             this.fireEvent('hide', this);
1491         }
1492         return this;
1493     },
1494
1495     // private
1496     doHide: function(){
1497         this.hidden = true;
1498         if(this.rendered){
1499             this.onHide();
1500         }
1501     },
1502
1503     // private
1504     onHide : function(){
1505         this.getVisibilityEl().addClass('x-hide-' + this.hideMode);
1506     },
1507
1508     // private
1509     getVisibilityEl : function(){
1510         return this.hideParent ? this.container : this.getActionEl();
1511     },
1512
1513     <div id="method-Ext.Component-setVisible"></div>/**
1514      * Convenience function to hide or show this component by boolean.
1515      * @param {Boolean} visible True to show, false to hide
1516      * @return {Ext.Component} this
1517      */
1518     setVisible : function(visible){
1519         return this[visible ? 'show' : 'hide']();
1520     },
1521
1522     <div id="method-Ext.Component-isVisible"></div>/**
1523      * Returns true if this component is visible.
1524      * @return {Boolean} True if this component is visible, false otherwise.
1525      */
1526     isVisible : function(){
1527         return this.rendered && this.getVisibilityEl().isVisible();
1528     },
1529
1530     <div id="method-Ext.Component-cloneConfig"></div>/**
1531      * Clone the current component using the original config values passed into this instance by default.
1532      * @param {Object} overrides A new config containing any properties to override in the cloned version.
1533      * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
1534      * @return {Ext.Component} clone The cloned copy of this component
1535      */
1536     cloneConfig : function(overrides){
1537         overrides = overrides || {};
1538         var id = overrides.id || Ext.id();
1539         var cfg = Ext.applyIf(overrides, this.initialConfig);
1540         cfg.id = id; // prevent dup id
1541         return new this.constructor(cfg);
1542     },
1543
1544     <div id="method-Ext.Component-getXType"></div>/**
1545      * Gets the xtype for this component as registered with {@link Ext.ComponentMgr}. For a list of all
1546      * available xtypes, see the {@link Ext.Component} header. Example usage:
1547      * <pre><code>
1548 var t = new Ext.form.TextField();
1549 alert(t.getXType());  // alerts 'textfield'
1550 </code></pre>
1551      * @return {String} The xtype
1552      */
1553     getXType : function(){
1554         return this.constructor.xtype;
1555     },
1556
1557     <div id="method-Ext.Component-isXType"></div>/**
1558      * <p>Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
1559      * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).</p>
1560      * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
1561      * to participate in determination of inherited xtypes.</b></p>
1562      * <p>For a list of all available xtypes, see the {@link Ext.Component} header.</p>
1563      * <p>Example usage:</p>
1564      * <pre><code>
1565 var t = new Ext.form.TextField();
1566 var isText = t.isXType('textfield');        // true
1567 var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
1568 var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
1569 </code></pre>
1570      * @param {String} xtype The xtype to check for this Component
1571      * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
1572      * the default), or true to check whether this Component is directly of the specified xtype.
1573      * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
1574      */
1575     isXType : function(xtype, shallow){
1576         //assume a string by default
1577         if (Ext.isFunction(xtype)){
1578             xtype = xtype.xtype; //handle being passed the class, e.g. Ext.Component
1579         }else if (Ext.isObject(xtype)){
1580             xtype = xtype.constructor.xtype; //handle being passed an instance
1581         }
1582
1583         return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 : this.constructor.xtype == xtype;
1584     },
1585
1586     <div id="method-Ext.Component-getXTypes"></div>/**
1587      * <p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
1588      * available xtypes, see the {@link Ext.Component} header.</p>
1589      * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
1590      * to participate in determination of inherited xtypes.</b></p>
1591      * <p>Example usage:</p>
1592      * <pre><code>
1593 var t = new Ext.form.TextField();
1594 alert(t.getXTypes());  // alerts 'component/box/field/textfield'
1595 </code></pre>
1596      * @return {String} The xtype hierarchy string
1597      */
1598     getXTypes : function(){
1599         var tc = this.constructor;
1600         if(!tc.xtypes){
1601             var c = [], sc = this;
1602             while(sc && sc.constructor.xtype){
1603                 c.unshift(sc.constructor.xtype);
1604                 sc = sc.constructor.superclass;
1605             }
1606             tc.xtypeChain = c;
1607             tc.xtypes = c.join('/');
1608         }
1609         return tc.xtypes;
1610     },
1611
1612     <div id="method-Ext.Component-findParentBy"></div>/**
1613      * Find a container above this component at any level by a custom function. If the passed function returns
1614      * true, the container will be returned.
1615      * @param {Function} fn The custom function to call with the arguments (container, this component).
1616      * @return {Ext.Container} The first Container for which the custom function returns true
1617      */
1618     findParentBy : function(fn) {
1619         for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt);
1620         return p || null;
1621     },
1622
1623     <div id="method-Ext.Component-findParentByType"></div>/**
1624      * Find a container above this component at any level by xtype or class
1625      * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
1626      * @return {Ext.Container} The first Container which matches the given xtype or class
1627      */
1628     findParentByType : function(xtype) {
1629         return Ext.isFunction(xtype) ?
1630             this.findParentBy(function(p){
1631                 return p.constructor === xtype;
1632             }) :
1633             this.findParentBy(function(p){
1634                 return p.constructor.xtype === xtype;
1635             });
1636     },
1637
1638     // protected
1639     getPositionEl : function(){
1640         return this.positionEl || this.el;
1641     },
1642
1643     // private
1644     purgeListeners : function(){
1645         Ext.Component.superclass.purgeListeners.call(this);
1646         if(this.mons){
1647             this.on('beforedestroy', this.clearMons, this, {single: true});
1648         }
1649     },
1650
1651     // private
1652     clearMons : function(){
1653         Ext.each(this.mons, function(m){
1654             m.item.un(m.ename, m.fn, m.scope);
1655         }, this);
1656         this.mons = [];
1657     },
1658
1659     // private
1660     createMons: function(){
1661         if(!this.mons){
1662             this.mons = [];
1663             this.on('beforedestroy', this.clearMons, this, {single: true});
1664         }
1665     },
1666
1667     <div id="method-Ext.Component-mon"></div>/**
1668      * <p>Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
1669      * is destroyed. Usage:</p><code><pre>
1670 myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
1671 </pre></code>
1672      * <p>or:</p><code><pre>
1673 myGridPanel.mon(myGridPanel.getSelectionModel(), {
1674     selectionchange: handleSelectionChange,
1675     buffer: 50
1676 });
1677 </pre></code>
1678      * @param {Observable|Element} item The item to which to add a listener/listeners.
1679      * @param {Object|String} ename The event name, or an object containing event name properties.
1680      * @param {Function} fn Optional. If the <code>ename</code> parameter was an event name, this
1681      * is the handler function.
1682      * @param {Object} scope Optional. If the <code>ename</code> parameter was an event name, this
1683      * is the scope (<code>this</code> reference) in which the handler function is executed.
1684      * @param {Object} opt Optional. If the <code>ename</code> parameter was an event name, this
1685      * is the {@link Ext.util.Observable#addListener addListener} options.
1686      */
1687     mon : function(item, ename, fn, scope, opt){
1688         this.createMons();
1689         if(Ext.isObject(ename)){
1690             var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
1691
1692             var o = ename;
1693             for(var e in o){
1694                 if(propRe.test(e)){
1695                     continue;
1696                 }
1697                 if(Ext.isFunction(o[e])){
1698                     // shared options
1699                     this.mons.push({
1700                         item: item, ename: e, fn: o[e], scope: o.scope
1701                     });
1702                     item.on(e, o[e], o.scope, o);
1703                 }else{
1704                     // individual options
1705                     this.mons.push({
1706                         item: item, ename: e, fn: o[e], scope: o.scope
1707                     });
1708                     item.on(e, o[e]);
1709                 }
1710             }
1711             return;
1712         }
1713
1714         this.mons.push({
1715             item: item, ename: ename, fn: fn, scope: scope
1716         });
1717         item.on(ename, fn, scope, opt);
1718     },
1719
1720     <div id="method-Ext.Component-mun"></div>/**
1721      * Removes listeners that were added by the {@link #mon} method.
1722      * @param {Observable|Element} item The item from which to remove a listener/listeners.
1723      * @param {Object|String} ename The event name, or an object containing event name properties.
1724      * @param {Function} fn Optional. If the <code>ename</code> parameter was an event name, this
1725      * is the handler function.
1726      * @param {Object} scope Optional. If the <code>ename</code> parameter was an event name, this
1727      * is the scope (<code>this</code> reference) in which the handler function is executed.
1728      */
1729     mun : function(item, ename, fn, scope){
1730         var found, mon;
1731         this.createMons();
1732         for(var i = 0, len = this.mons.length; i < len; ++i){
1733             mon = this.mons[i];
1734             if(item === mon.item && ename == mon.ename && fn === mon.fn && scope === mon.scope){
1735                 this.mons.splice(i, 1);
1736                 item.un(ename, fn, scope);
1737                 found = true;
1738                 break;
1739             }
1740         }
1741         return found;
1742     },
1743
1744     <div id="method-Ext.Component-nextSibling"></div>/**
1745      * Returns the next component in the owning container
1746      * @return Ext.Component
1747      */
1748     nextSibling : function(){
1749         if(this.ownerCt){
1750             var index = this.ownerCt.items.indexOf(this);
1751             if(index != -1 && index+1 < this.ownerCt.items.getCount()){
1752                 return this.ownerCt.items.itemAt(index+1);
1753             }
1754         }
1755         return null;
1756     },
1757
1758     <div id="method-Ext.Component-previousSibling"></div>/**
1759      * Returns the previous component in the owning container
1760      * @return Ext.Component
1761      */
1762     previousSibling : function(){
1763         if(this.ownerCt){
1764             var index = this.ownerCt.items.indexOf(this);
1765             if(index > 0){
1766                 return this.ownerCt.items.itemAt(index-1);
1767             }
1768         }
1769         return null;
1770     },
1771
1772     <div id="method-Ext.Component-getBubbleTarget"></div>/**
1773      * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
1774      * @return {Ext.Container} the Container which owns this Component.
1775      */
1776     getBubbleTarget : function(){
1777         return this.ownerCt;
1778     }
1779 });
1780
1781 Ext.reg('component', Ext.Component);</pre>    
1782 </body>
1783 </html>