docs/source/Component.html

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