src/widgets/Component.js

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