docs/source/Component.html

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