src/widgets/Component.js

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