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