docs/source/AbstractComponent.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-AbstractComponent'>/**
  19 </span> * @class Ext.AbstractComponent
  20  * &lt;p&gt;An abstract base class which provides shared methods for Components across the Sencha product line.&lt;/p&gt;
  21  * &lt;p&gt;Please refer to sub class's documentation&lt;/p&gt;
  22  */
  23
  24 Ext.define('Ext.AbstractComponent', {
  25
  26     /* Begin Definitions */
  27
  28     mixins: {
  29         observable: 'Ext.util.Observable',
  30         animate: 'Ext.util.Animate',
  31         state: 'Ext.state.Stateful'
  32     },
  33
  34     requires: [
  35         'Ext.PluginManager',
  36         'Ext.ComponentManager',
  37         'Ext.core.Element',
  38         'Ext.core.DomHelper',
  39         'Ext.XTemplate',
  40         'Ext.ComponentQuery',
  41         'Ext.LoadMask',
  42         'Ext.ComponentLoader',
  43         'Ext.EventManager',
  44         'Ext.layout.Layout',
  45         'Ext.layout.component.Auto'
  46     ],
  47
  48     // Please remember to add dependencies whenever you use it
  49     // I had to fix these many times already
  50     uses: [
  51         'Ext.ZIndexManager'
  52     ],
  53
  54     statics: {
  55         AUTO_ID: 1000
  56     },
  57
  58     /* End Definitions */
  59
  60     isComponent: true,
  61
  62     getAutoId: function() {
  63         return ++Ext.AbstractComponent.AUTO_ID;
  64     },
  65
  66
  67 <span id='Ext-AbstractComponent-cfg-id'>    /**
  68 </span>     * @cfg {String} id
  69      * &lt;p&gt;The &lt;b&gt;&lt;u&gt;unique id of this component instance&lt;/u&gt;&lt;/b&gt; (defaults to an {@link #getId auto-assigned id}).&lt;/p&gt;
  70      * &lt;p&gt;It should not be necessary to use this configuration except for singleton objects in your application.
  71      * Components created with an id may be accessed globally using {@link Ext#getCmp Ext.getCmp}.&lt;/p&gt;
  72      * &lt;p&gt;Instead of using assigned ids, use the {@link #itemId} config, and {@link Ext.ComponentQuery ComponentQuery} which
  73      * provides selector-based searching for Sencha Components analogous to DOM querying. The {@link Ext.container.Container Container}
  74      * class contains {@link Ext.container.Container#down shortcut methods} to query its descendant Components by selector.&lt;/p&gt;
  75      * &lt;p&gt;Note that this id will also be used as the element id for the containing HTML element
  76      * that is rendered to the page for this component. This allows you to write id-based CSS
  77      * rules to style the specific instance of this component uniquely, and also to select
  78      * sub-elements using this component's id as the parent.&lt;/p&gt;
  79      * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to avoid complications imposed by a unique &lt;tt&gt;id&lt;/tt&gt; also see &lt;code&gt;{@link #itemId}&lt;/code&gt;.&lt;/p&gt;
  80      * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to access the container of a Component see &lt;code&gt;{@link #ownerCt}&lt;/code&gt;.&lt;/p&gt;
  81      */
  82
  83 <span id='Ext-AbstractComponent-cfg-itemId'>    /**
  84 </span>     * @cfg {String} itemId
  85      * &lt;p&gt;An &lt;tt&gt;itemId&lt;/tt&gt; can be used as an alternative way to get a reference to a component
  86      * when no object reference is available.  Instead of using an &lt;code&gt;{@link #id}&lt;/code&gt; with
  87      * {@link Ext}.{@link Ext#getCmp getCmp}, use &lt;code&gt;itemId&lt;/code&gt; with
  88      * {@link Ext.container.Container}.{@link Ext.container.Container#getComponent getComponent} which will retrieve
  89      * &lt;code&gt;itemId&lt;/code&gt;'s or &lt;tt&gt;{@link #id}&lt;/tt&gt;'s. Since &lt;code&gt;itemId&lt;/code&gt;'s are an index to the
  90      * container's internal MixedCollection, the &lt;code&gt;itemId&lt;/code&gt; is scoped locally to the container --
  91      * avoiding potential conflicts with {@link Ext.ComponentManager} which requires a &lt;b&gt;unique&lt;/b&gt;
  92      * &lt;code&gt;{@link #id}&lt;/code&gt;.&lt;/p&gt;
  93      * &lt;pre&gt;&lt;code&gt;
  94 var c = new Ext.panel.Panel({ //
  95     {@link Ext.Component#height height}: 300,
  96     {@link #renderTo}: document.body,
  97     {@link Ext.container.Container#layout layout}: 'auto',
  98     {@link Ext.container.Container#items items}: [
  99         {
 100             itemId: 'p1',
 101             {@link Ext.panel.Panel#title title}: 'Panel 1',
 102             {@link Ext.Component#height height}: 150
 103         },
 104         {
 105             itemId: 'p2',
 106             {@link Ext.panel.Panel#title title}: 'Panel 2',
 107             {@link Ext.Component#height height}: 150
 108         }
 109     ]
 110 })
 111 p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
 112 p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling
 113      * &lt;/code&gt;&lt;/pre&gt;
 114      * &lt;p&gt;Also see &lt;tt&gt;{@link #id}&lt;/tt&gt;, &lt;code&gt;{@link Ext.container.Container#query}&lt;/code&gt;,
 115      * &lt;code&gt;{@link Ext.container.Container#down}&lt;/code&gt; and &lt;code&gt;{@link Ext.container.Container#child}&lt;/code&gt;.&lt;/p&gt;
 116      * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to access the container of an item see &lt;tt&gt;{@link #ownerCt}&lt;/tt&gt;.&lt;/p&gt;
 117      */
 118
 119 <span id='Ext-AbstractComponent-property-ownerCt'>    /**
 120 </span>     * This Component's owner {@link Ext.container.Container Container} (defaults to undefined, and is set automatically when
 121      * this Component is added to a Container).  Read-only.
 122      * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to access items within the Container see &lt;tt&gt;{@link #itemId}&lt;/tt&gt;.&lt;/p&gt;
 123      * @type Ext.Container
 124      * @property ownerCt
 125      */
 126
 127 <span id='Ext-AbstractComponent-property-layoutManagedWidth'>     /**
 128 </span>      * @private
 129       * Flag set by the container layout to which this Component is added.
 130       * If the layout manages this Component's width, it sets the value to 1.
 131       * If it does NOT manage the width, it sets it to 2.
 132       * If the layout MAY affect the width, but only if the owning Container has a fixed width, this is set to 0.
 133       * @type boolean
 134       * @property layoutManagedWidth
 135       */
 136
 137 <span id='Ext-AbstractComponent-property-layoutManagedHeight'>     /**
 138 </span>      * @private
 139       * Flag set by the container layout to which this Component is added.
 140       * If the layout manages this Component's height, it sets the value to 1.
 141       * If it does NOT manage the height, it sets it to 2.
 142       * If the layout MAY affect the height, but only if the owning Container has a fixed height, this is set to 0.
 143       * @type boolean
 144       * @property layoutManagedHeight
 145       */
 146
 147 <span id='Ext-AbstractComponent-cfg-autoEl'>    /**
 148 </span>     * @cfg {Mixed} autoEl
 149      * &lt;p&gt;A tag name or {@link Ext.core.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
 150      * encapsulate this Component.&lt;/p&gt;
 151      * &lt;p&gt;You do not normally need to specify this. For the base classes {@link Ext.Component} and {@link Ext.container.Container},
 152      * this defaults to &lt;b&gt;&lt;tt&gt;'div'&lt;/tt&gt;&lt;/b&gt;. The more complex Sencha classes use a more complex
 153      * DOM structure specified by their own {@link #renderTpl}s.&lt;/p&gt;
 154      * &lt;p&gt;This is intended to allow the developer to create application-specific utility Components encapsulated by
 155      * different DOM elements. Example usage:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
 156 {
 157     xtype: 'component',
 158     autoEl: {
 159         tag: 'img',
 160         src: 'http://www.example.com/example.jpg'
 161     }
 162 }, {
 163     xtype: 'component',
 164     autoEl: {
 165         tag: 'blockquote',
 166         html: 'autoEl is cool!'
 167     }
 168 }, {
 169     xtype: 'container',
 170     autoEl: 'ul',
 171     cls: 'ux-unordered-list',
 172     items: {
 173         xtype: 'component',
 174         autoEl: 'li',
 175         html: 'First list item'
 176     }
 177 }
 178 &lt;/code&gt;&lt;/pre&gt;
 179      */
 180
 181 <span id='Ext-AbstractComponent-cfg-renderTpl'>    /**
 182 </span>     * @cfg {Mixed} renderTpl
 183      * &lt;p&gt;An {@link Ext.XTemplate XTemplate} used to create the internal structure inside this Component's
 184      * encapsulating {@link #getEl Element}.&lt;/p&gt;
 185      * &lt;p&gt;You do not normally need to specify this. For the base classes {@link Ext.Component}
 186      * and {@link Ext.container.Container}, this defaults to &lt;b&gt;&lt;code&gt;null&lt;/code&gt;&lt;/b&gt; which means that they will be initially rendered
 187      * with no internal structure; they render their {@link #getEl Element} empty. The more specialized ExtJS and Touch classes
 188      * which use a more complex DOM structure, provide their own template definitions.&lt;/p&gt;
 189      * &lt;p&gt;This is intended to allow the developer to create application-specific utility Components with customized
 190      * internal structure.&lt;/p&gt;
 191      * &lt;p&gt;Upon rendering, any created child elements may be automatically imported into object properties using the
 192      * {@link #renderSelectors} option.&lt;/p&gt;
 193      */
 194     renderTpl: null,
 195
 196 <span id='Ext-AbstractComponent-cfg-renderSelectors'>    /**
 197 </span>     * @cfg {Object} renderSelectors
 198
 199 An object containing properties specifying {@link Ext.DomQuery DomQuery} selectors which identify child elements
 200 created by the render process.
 201
 202 After the Component's internal structure is rendered according to the {@link #renderTpl}, this object is iterated through,
 203 and the found Elements are added as properties to the Component using the `renderSelector` property name.
 204
 205 For example, a Component which rendered an image, and description into its element might use the following properties
 206 coded into its prototype:
 207
 208     renderTpl: '&amp;lt;img src=&quot;{imageUrl}&quot; class=&quot;x-image-component-img&quot;&gt;&amp;lt;div class=&quot;x-image-component-desc&quot;&gt;{description}&amp;gt;/div&amp;lt;',
 209
 210     renderSelectors: {
 211         image: 'img.x-image-component-img',
 212         descEl: 'div.x-image-component-desc'
 213     }
 214
 215 After rendering, the Component would have a property &lt;code&gt;image&lt;/code&gt; referencing its child `img` Element,
 216 and a property `descEl` referencing the `div` Element which contains the description.
 217
 218      * @markdown
 219      */
 220
 221 <span id='Ext-AbstractComponent-cfg-renderTo'>    /**
 222 </span>     * @cfg {Mixed} renderTo
 223      * &lt;p&gt;Specify the id of the element, a DOM element or an existing Element that this component
 224      * will be rendered into.&lt;/p&gt;&lt;div&gt;&lt;ul&gt;
 225      * &lt;li&gt;&lt;b&gt;Notes&lt;/b&gt; : &lt;ul&gt;
 226      * &lt;div class=&quot;sub-desc&quot;&gt;Do &lt;u&gt;not&lt;/u&gt; use this option if the Component is to be a child item of
 227      * a {@link Ext.container.Container Container}. It is the responsibility of the
 228      * {@link Ext.container.Container Container}'s {@link Ext.container.Container#layout layout manager}
 229      * to render and manage its child items.&lt;/div&gt;
 230      * &lt;div class=&quot;sub-desc&quot;&gt;When using this config, a call to render() is not required.&lt;/div&gt;
 231      * &lt;/ul&gt;&lt;/li&gt;
 232      * &lt;/ul&gt;&lt;/div&gt;
 233      * &lt;p&gt;See &lt;code&gt;{@link #render}&lt;/code&gt; also.&lt;/p&gt;
 234      */
 235
 236 <span id='Ext-AbstractComponent-cfg-frame'>    /**
 237 </span>     * @cfg {Boolean} frame
 238      * &lt;p&gt;Specify as &lt;code&gt;true&lt;/code&gt; to have the Component inject framing elements within the Component at render time to
 239      * provide a graphical rounded frame around the Component content.&lt;/p&gt;
 240      * &lt;p&gt;This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet Explorer
 241      * prior to version 9 which do not support rounded corners natively.&lt;/p&gt;
 242      * &lt;p&gt;The extra space taken up by this framing is available from the read only property {@link #frameSize}.&lt;/p&gt;
 243      */
 244
 245 <span id='Ext-AbstractComponent-property-frameSize'>    /**
 246 </span>     * &lt;p&gt;Read-only property indicating the width of any framing elements which were added within the encapsulating element
 247      * to provide graphical, rounded borders. See the {@link #frame} config.&lt;/p&gt;
 248      * &lt;p&gt; This is an object containing the frame width in pixels for all four sides of the Component containing
 249      * the following properties:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 250      * &lt;li&gt;&lt;code&gt;top&lt;/code&gt; The width of the top framing element in pixels.&lt;/li&gt;
 251      * &lt;li&gt;&lt;code&gt;right&lt;/code&gt; The width of the right framing element in pixels.&lt;/li&gt;
 252      * &lt;li&gt;&lt;code&gt;bottom&lt;/code&gt; The width of the bottom framing element in pixels.&lt;/li&gt;
 253      * &lt;li&gt;&lt;code&gt;left&lt;/code&gt; The width of the left framing element in pixels.&lt;/li&gt;
 254      * &lt;/ul&gt;&lt;/div&gt;
 255      * @property frameSize
 256      * @type {Object}
 257      */
 258
 259 <span id='Ext-AbstractComponent-cfg-componentLayout'>    /**
 260 </span>     * @cfg {String/Object} componentLayout
 261      * &lt;p&gt;The sizing and positioning of a Component's internal Elements is the responsibility of
 262      * the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.&lt;/p&gt;
 263      * &lt;p&gt;Generally, developers will not use this configuration as all provided Components which need their internal
 264      * elements sizing (Such as {@link Ext.form.field.Base input fields}) come with their own componentLayout managers.&lt;/p&gt;
 265      * &lt;p&gt;The {@link Ext.layout.container.Auto default layout manager} will be used on instances of the base Ext.Component class
 266      * which simply sizes the Component's encapsulating element to the height and width specified in the {@link #setSize} method.&lt;/p&gt;
 267      */
 268
 269 <span id='Ext-AbstractComponent-cfg-tpl'>    /**
 270 </span>     * @cfg {Mixed} tpl
 271      * An &lt;bold&gt;{@link Ext.Template}&lt;/bold&gt;, &lt;bold&gt;{@link Ext.XTemplate}&lt;/bold&gt;
 272      * or an array of strings to form an Ext.XTemplate.
 273      * Used in conjunction with the &lt;code&gt;{@link #data}&lt;/code&gt; and
 274      * &lt;code&gt;{@link #tplWriteMode}&lt;/code&gt; configurations.
 275      */
 276
 277 <span id='Ext-AbstractComponent-cfg-data'>    /**
 278 </span>     * @cfg {Mixed} data
 279      * The initial set of data to apply to the &lt;code&gt;{@link #tpl}&lt;/code&gt; to
 280      * update the content area of the Component.
 281      */
 282
 283 <span id='Ext-AbstractComponent-cfg-tplWriteMode'>    /**
 284 </span>     * @cfg {String} tplWriteMode The Ext.(X)Template method to use when
 285      * updating the content area of the Component. Defaults to &lt;code&gt;'overwrite'&lt;/code&gt;
 286      * (see &lt;code&gt;{@link Ext.XTemplate#overwrite}&lt;/code&gt;).
 287      */
 288     tplWriteMode: 'overwrite',
 289
 290 <span id='Ext-AbstractComponent-cfg-baseCls'>    /**
 291 </span>     * @cfg {String} baseCls
 292      * The base CSS class to apply to this components's element. This will also be prepended to
 293      * elements within this component like Panel's body will get a class x-panel-body. This means
 294      * that if you create a subclass of Panel, and you want it to get all the Panels styling for the
 295      * element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this
 296      * component.
 297      */
 298     baseCls: Ext.baseCSSPrefix + 'component',
 299
 300 <span id='Ext-AbstractComponent-cfg-componentCls'>    /**
 301 </span>     * @cfg {String} componentCls
 302      * CSS Class to be added to a components root level element to give distinction to it
 303      * via styling.
 304      */
 305
 306 <span id='Ext-AbstractComponent-cfg-cls'>    /**
 307 </span>     * @cfg {String} cls
 308      * An optional extra CSS class that will be added to this component's Element (defaults to '').  This can be
 309      * useful for adding customized styles to the component or any of its children using standard CSS rules.
 310      */
 311
 312 <span id='Ext-AbstractComponent-cfg-overCls'>    /**
 313 </span>     * @cfg {String} overCls
 314      * An optional extra CSS class that will be added to this component's Element when the mouse moves
 315      * over the Element, and removed when the mouse moves out. (defaults to '').  This can be
 316      * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
 317      */
 318
 319 <span id='Ext-AbstractComponent-cfg-disabledCls'>    /**
 320 </span>     * @cfg {String} disabledCls
 321      * CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.
 322      */
 323     disabledCls: Ext.baseCSSPrefix + 'item-disabled',
 324
 325 <span id='Ext-AbstractComponent-cfg-ui'>    /**
 326 </span>     * @cfg {String/Array} ui
 327      * A set style for a component. Can be a string or an Array of multiple strings (UIs)
 328      */
 329     ui: 'default',
 330
 331 <span id='Ext-AbstractComponent-cfg-uiCls'>    /**
 332 </span>     * @cfg {Array} uiCls
 333      * An array of of classNames which are currently applied to this component
 334      * @private
 335      */
 336     uiCls: [],
 337
 338 <span id='Ext-AbstractComponent-cfg-style'>    /**
 339 </span>     * @cfg {String} style
 340      * A custom style specification to be applied to this component's Element.  Should be a valid argument to
 341      * {@link Ext.core.Element#applyStyles}.
 342      * &lt;pre&gt;&lt;code&gt;
 343         new Ext.panel.Panel({
 344             title: 'Some Title',
 345             renderTo: Ext.getBody(),
 346             width: 400, height: 300,
 347             layout: 'form',
 348             items: [{
 349                 xtype: 'textarea',
 350                 style: {
 351                     width: '95%',
 352                     marginBottom: '10px'
 353                 }
 354             },
 355             new Ext.button.Button({
 356                 text: 'Send',
 357                 minWidth: '100',
 358                 style: {
 359                     marginBottom: '10px'
 360                 }
 361             })
 362             ]
 363         });
 364      &lt;/code&gt;&lt;/pre&gt;
 365      */
 366
 367 <span id='Ext-AbstractComponent-cfg-width'>    /**
 368 </span>     * @cfg {Number} width
 369      * The width of this component in pixels.
 370      */
 371
 372 <span id='Ext-AbstractComponent-cfg-height'>    /**
 373 </span>     * @cfg {Number} height
 374      * The height of this component in pixels.
 375      */
 376
 377 <span id='Ext-AbstractComponent-cfg-border'>    /**
 378 </span>     * @cfg {Number/String} border
 379      * Specifies the border for this component. The border can be a single numeric value to apply to all sides or
 380      * it can be a CSS style specification for each style, for example: '10 5 3 10'.
 381      */
 382
 383 <span id='Ext-AbstractComponent-cfg-padding'>    /**
 384 </span>     * @cfg {Number/String} padding
 385      * Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or
 386      * it can be a CSS style specification for each style, for example: '10 5 3 10'.
 387      */
 388
 389 <span id='Ext-AbstractComponent-cfg-margin'>    /**
 390 </span>     * @cfg {Number/String} margin
 391      * Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or
 392      * it can be a CSS style specification for each style, for example: '10 5 3 10'.
 393      */
 394
 395 <span id='Ext-AbstractComponent-cfg-hidden'>    /**
 396 </span>     * @cfg {Boolean} hidden
 397      * Defaults to false.
 398      */
 399     hidden: false,
 400
 401 <span id='Ext-AbstractComponent-cfg-disabled'>    /**
 402 </span>     * @cfg {Boolean} disabled
 403      * Defaults to false.
 404      */
 405     disabled: false,
 406
 407 <span id='Ext-AbstractComponent-cfg-draggable'>    /**
 408 </span>     * @cfg {Boolean} draggable
 409      * Allows the component to be dragged.
 410      */
 411
 412 <span id='Ext-AbstractComponent-property-draggable'>    /**
 413 </span>     * Read-only property indicating whether or not the component can be dragged
 414      * @property draggable
 415      * @type {Boolean}
 416      */
 417     draggable: false,
 418
 419 <span id='Ext-AbstractComponent-cfg-floating'>    /**
 420 </span>     * @cfg {Boolean} floating
 421      * Create the Component as a floating and use absolute positioning.
 422      * Defaults to false.
 423      */
 424     floating: false,
 425
 426 <span id='Ext-AbstractComponent-cfg-hideMode'>    /**
 427 </span>     * @cfg {String} hideMode
 428      * A String which specifies how this Component's encapsulating DOM element will be hidden.
 429      * Values may be&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 430      * &lt;li&gt;&lt;code&gt;'display'&lt;/code&gt; : The Component will be hidden using the &lt;code&gt;display: none&lt;/code&gt; style.&lt;/li&gt;
 431      * &lt;li&gt;&lt;code&gt;'visibility'&lt;/code&gt; : The Component will be hidden using the &lt;code&gt;visibility: hidden&lt;/code&gt; style.&lt;/li&gt;
 432      * &lt;li&gt;&lt;code&gt;'offsets'&lt;/code&gt; : The Component will be hidden by absolutely positioning it out of the visible area of the document. This
 433      * is useful when a hidden Component must maintain measurable dimensions. Hiding using &lt;code&gt;display&lt;/code&gt; results
 434      * in a Component having zero dimensions.&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
 435      * Defaults to &lt;code&gt;'display'&lt;/code&gt;.
 436      */
 437     hideMode: 'display',
 438
 439 <span id='Ext-AbstractComponent-cfg-contentEl'>    /**
 440 </span>     * @cfg {String} contentEl
 441      * &lt;p&gt;Optional. Specify an existing HTML element, or the &lt;code&gt;id&lt;/code&gt; of an existing HTML element to use as the content
 442      * for this component.&lt;/p&gt;
 443      * &lt;ul&gt;
 444      * &lt;li&gt;&lt;b&gt;Description&lt;/b&gt; :
 445      * &lt;div class=&quot;sub-desc&quot;&gt;This config option is used to take an existing HTML element and place it in the layout element
 446      * of a new component (it simply moves the specified DOM element &lt;i&gt;after the Component is rendered&lt;/i&gt; to use as the content.&lt;/div&gt;&lt;/li&gt;
 447      * &lt;li&gt;&lt;b&gt;Notes&lt;/b&gt; :
 448      * &lt;div class=&quot;sub-desc&quot;&gt;The specified HTML element is appended to the layout element of the component &lt;i&gt;after any configured
 449      * {@link #html HTML} has been inserted&lt;/i&gt;, and so the document will not contain this element at the time the {@link #render} event is fired.&lt;/div&gt;
 450      * &lt;div class=&quot;sub-desc&quot;&gt;The specified HTML element used will not participate in any &lt;code&gt;&lt;b&gt;{@link Ext.container.Container#layout layout}&lt;/b&gt;&lt;/code&gt;
 451      * scheme that the Component may use. It is just HTML. Layouts operate on child &lt;code&gt;&lt;b&gt;{@link Ext.container.Container#items items}&lt;/b&gt;&lt;/code&gt;.&lt;/div&gt;
 452      * &lt;div class=&quot;sub-desc&quot;&gt;Add either the &lt;code&gt;x-hidden&lt;/code&gt; or the &lt;code&gt;x-hide-display&lt;/code&gt; CSS class to
 453      * prevent a brief flicker of the content before it is rendered to the panel.&lt;/div&gt;&lt;/li&gt;
 454      * &lt;/ul&gt;
 455      */
 456
 457 <span id='Ext-AbstractComponent-cfg-html'>    /**
 458 </span>     * @cfg {String/Object} html
 459      * An HTML fragment, or a {@link Ext.core.DomHelper DomHelper} specification to use as the layout element
 460      * content (defaults to ''). The HTML content is added after the component is rendered,
 461      * so the document will not contain this HTML at the time the {@link #render} event is fired.
 462      * This content is inserted into the body &lt;i&gt;before&lt;/i&gt; any configured {@link #contentEl} is appended.
 463      */
 464
 465 <span id='Ext-AbstractComponent-cfg-styleHtmlContent'>    /**
 466 </span>     * @cfg {Boolean} styleHtmlContent
 467      * True to automatically style the html inside the content target of this component (body for panels).
 468      * Defaults to false.
 469      */
 470     styleHtmlContent: false,
 471
 472 <span id='Ext-AbstractComponent-cfg-styleHtmlCls'>    /**
 473 </span>     * @cfg {String} styleHtmlCls
 474      * The class that is added to the content target when you set styleHtmlContent to true.
 475      * Defaults to 'x-html'
 476      */
 477     styleHtmlCls: Ext.baseCSSPrefix + 'html',
 478
 479 <span id='Ext-AbstractComponent-cfg-minHeight'>    /**
 480 </span>     * @cfg {Number} minHeight
 481      * &lt;p&gt;The minimum value in pixels which this Component will set its height to.&lt;/p&gt;
 482      * &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
 483      */
 484 <span id='Ext-AbstractComponent-cfg-minWidth'>    /**
 485 </span>     * @cfg {Number} minWidth
 486      * &lt;p&gt;The minimum value in pixels which this Component will set its width to.&lt;/p&gt;
 487      * &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
 488      */
 489 <span id='Ext-AbstractComponent-cfg-maxHeight'>    /**
 490 </span>     * @cfg {Number} maxHeight
 491      * &lt;p&gt;The maximum value in pixels which this Component will set its height to.&lt;/p&gt;
 492      * &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
 493      */
 494 <span id='Ext-AbstractComponent-cfg-maxWidth'>    /**
 495 </span>     * @cfg {Number} maxWidth
 496      * &lt;p&gt;The maximum value in pixels which this Component will set its width to.&lt;/p&gt;
 497      * &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
 498      */
 499
 500 <span id='Ext-AbstractComponent-cfg-loader'>    /**
 501 </span>     * @cfg {Ext.ComponentLoader/Object} loader
 502      * A configuration object or an instance of a {@link Ext.ComponentLoader} to load remote
 503      * content for this Component.
 504      */
 505
 506      // @private
 507      allowDomMove: true,
 508
 509 <span id='Ext-AbstractComponent-cfg-autoShow'>     /**
 510 </span>      * @cfg {Boolean} autoShow True to automatically show the component upon creation.
 511       * This config option may only be used for {@link #floating} components or components
 512       * that use {@link #autoRender}. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
 513       */
 514      autoShow: false,
 515
 516 <span id='Ext-AbstractComponent-cfg-autoRender'>    /**
 517 </span>     * @cfg {Mixed} autoRender
 518      * &lt;p&gt;This config is intended mainly for {@link #floating} Components which may or may not be shown. Instead
 519      * of using {@link #renderTo} in the configuration, and rendering upon construction, this allows a Component
 520      * to render itself upon first &lt;i&gt;{@link #show}&lt;/i&gt;.&lt;/p&gt;
 521      * &lt;p&gt;Specify as &lt;code&gt;true&lt;/code&gt; to have this Component render to the document body upon first show.&lt;/p&gt;
 522      * &lt;p&gt;Specify as an element, or the ID of an element to have this Component render to a specific element upon first show.&lt;/p&gt;
 523      * &lt;p&gt;&lt;b&gt;This defaults to &lt;code&gt;true&lt;/code&gt; for the {@link Ext.window.Window Window} class.&lt;/b&gt;&lt;/p&gt;
 524      */
 525      autoRender: false,
 526
 527      needsLayout: false,
 528
 529 <span id='Ext-AbstractComponent-cfg-plugins'>    /**
 530 </span>     * @cfg {Object/Array} plugins
 531      * An object or array of objects that will provide custom functionality for this component.  The only
 532      * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
 533      * When a component is created, if any plugins are available, the component will call the init method on each
 534      * plugin, passing a reference to itself.  Each plugin can then call methods or respond to events on the
 535      * component as needed to provide its functionality.
 536      */
 537
 538 <span id='Ext-AbstractComponent-property-rendered'>    /**
 539 </span>     * Read-only property indicating whether or not the component has been rendered.
 540      * @property rendered
 541      * @type {Boolean}
 542      */
 543     rendered: false,
 544
 545     weight: 0,
 546
 547     trimRe: /^\s+|\s+$/g,
 548     spacesRe: /\s+/,
 549
 550
 551 <span id='Ext-AbstractComponent-property-maskOnDisable'>    /**
 552 </span>     * This is an internal flag that you use when creating custom components.
 553      * By default this is set to true which means that every component gets a mask when its disabled.
 554      * Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false
 555      * since they want to implement custom disable logic.
 556      * @property maskOnDisable
 557      * @type {Boolean}
 558      */
 559     maskOnDisable: true,
 560
 561 <span id='Ext-AbstractComponent-method-constructor'>    /**
 562 </span>     * Creates new Component.
 563      * @param {Object} config  (optional) Config object.
 564      */
 565     constructor : function(config) {
 566         var me = this,
 567             i, len;
 568
 569         config = config || {};
 570         me.initialConfig = config;
 571         Ext.apply(me, config);
 572
 573         me.addEvents(
 574 <span id='Ext-AbstractComponent-event-beforeactivate'>            /**
 575 </span>             * @event beforeactivate
 576              * Fires before a Component has been visually activated.
 577              * Returning false from an event listener can prevent the activate
 578              * from occurring.
 579              * @param {Ext.Component} this
 580              */
 581              'beforeactivate',
 582 <span id='Ext-AbstractComponent-event-activate'>            /**
 583 </span>             * @event activate
 584              * Fires after a Component has been visually activated.
 585              * @param {Ext.Component} this
 586              */
 587              'activate',
 588 <span id='Ext-AbstractComponent-event-beforedeactivate'>            /**
 589 </span>             * @event beforedeactivate
 590              * Fires before a Component has been visually deactivated.
 591              * Returning false from an event listener can prevent the deactivate
 592              * from occurring.
 593              * @param {Ext.Component} this
 594              */
 595              'beforedeactivate',
 596 <span id='Ext-AbstractComponent-event-deactivate'>            /**
 597 </span>             * @event deactivate
 598              * Fires after a Component has been visually deactivated.
 599              * @param {Ext.Component} this
 600              */
 601              'deactivate',
 602 <span id='Ext-AbstractComponent-event-added'>            /**
 603 </span>             * @event added
 604              * Fires after a Component had been added to a Container.
 605              * @param {Ext.Component} this
 606              * @param {Ext.container.Container} container Parent Container
 607              * @param {Number} pos position of Component
 608              */
 609              'added',
 610 <span id='Ext-AbstractComponent-event-disable'>            /**
 611 </span>             * @event disable
 612              * Fires after the component is disabled.
 613              * @param {Ext.Component} this
 614              */
 615              'disable',
 616 <span id='Ext-AbstractComponent-event-enable'>            /**
 617 </span>             * @event enable
 618              * Fires after the component is enabled.
 619              * @param {Ext.Component} this
 620              */
 621              'enable',
 622 <span id='Ext-AbstractComponent-event-beforeshow'>            /**
 623 </span>             * @event beforeshow
 624              * Fires before the component is shown when calling the {@link #show} method.
 625              * Return false from an event handler to stop the show.
 626              * @param {Ext.Component} this
 627              */
 628              'beforeshow',
 629 <span id='Ext-AbstractComponent-event-show'>            /**
 630 </span>             * @event show
 631              * Fires after the component is shown when calling the {@link #show} method.
 632              * @param {Ext.Component} this
 633              */
 634              'show',
 635 <span id='Ext-AbstractComponent-event-beforehide'>            /**
 636 </span>             * @event beforehide
 637              * Fires before the component is hidden when calling the {@link #hide} method.
 638              * Return false from an event handler to stop the hide.
 639              * @param {Ext.Component} this
 640              */
 641              'beforehide',
 642 <span id='Ext-AbstractComponent-event-hide'>            /**
 643 </span>             * @event hide
 644              * Fires after the component is hidden.
 645              * Fires after the component is hidden when calling the {@link #hide} method.
 646              * @param {Ext.Component} this
 647              */
 648              'hide',
 649 <span id='Ext-AbstractComponent-event-removed'>            /**
 650 </span>             * @event removed
 651              * Fires when a component is removed from an Ext.container.Container
 652              * @param {Ext.Component} this
 653              * @param {Ext.container.Container} ownerCt Container which holds the component
 654              */
 655              'removed',
 656 <span id='Ext-AbstractComponent-event-beforerender'>            /**
 657 </span>             * @event beforerender
 658              * Fires before the component is {@link #rendered}. Return false from an
 659              * event handler to stop the {@link #render}.
 660              * @param {Ext.Component} this
 661              */
 662              'beforerender',
 663 <span id='Ext-AbstractComponent-event-render'>            /**
 664 </span>             * @event render
 665              * Fires after the component markup is {@link #rendered}.
 666              * @param {Ext.Component} this
 667              */
 668              'render',
 669 <span id='Ext-AbstractComponent-event-afterrender'>            /**
 670 </span>             * @event afterrender
 671              * &lt;p&gt;Fires after the component rendering is finished.&lt;/p&gt;
 672              * &lt;p&gt;The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed
 673              * by any afterRender method defined for the Component.&lt;/p&gt;
 674              * @param {Ext.Component} this
 675              */
 676              'afterrender',
 677 <span id='Ext-AbstractComponent-event-beforedestroy'>            /**
 678 </span>             * @event beforedestroy
 679              * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the {@link #destroy}.
 680              * @param {Ext.Component} this
 681              */
 682              'beforedestroy',
 683 <span id='Ext-AbstractComponent-event-destroy'>            /**
 684 </span>             * @event destroy
 685              * Fires after the component is {@link #destroy}ed.
 686              * @param {Ext.Component} this
 687              */
 688              'destroy',
 689 <span id='Ext-AbstractComponent-event-resize'>            /**
 690 </span>             * @event resize
 691              * Fires after the component is resized.
 692              * @param {Ext.Component} this
 693              * @param {Number} adjWidth The box-adjusted width that was set
 694              * @param {Number} adjHeight The box-adjusted height that was set
 695              */
 696              'resize',
 697 <span id='Ext-AbstractComponent-event-move'>            /**
 698 </span>             * @event move
 699              * Fires after the component is moved.
 700              * @param {Ext.Component} this
 701              * @param {Number} x The new x position
 702              * @param {Number} y The new y position
 703              */
 704              'move'
 705         );
 706
 707         me.getId();
 708
 709         me.mons = [];
 710         me.additionalCls = [];
 711         me.renderData = me.renderData || {};
 712         me.renderSelectors = me.renderSelectors || {};
 713
 714         if (me.plugins) {
 715             me.plugins = [].concat(me.plugins);
 716             for (i = 0, len = me.plugins.length; i &lt; len; i++) {
 717                 me.plugins[i] = me.constructPlugin(me.plugins[i]);
 718             }
 719         }
 720
 721         me.initComponent();
 722
 723         // ititComponent gets a chance to change the id property before registering
 724         Ext.ComponentManager.register(me);
 725
 726         // Dont pass the config so that it is not applied to 'this' again
 727         me.mixins.observable.constructor.call(me);
 728         me.mixins.state.constructor.call(me, config);
 729
 730         // Save state on resize.
 731         this.addStateEvents('resize');
 732
 733         // Move this into Observable?
 734         if (me.plugins) {
 735             me.plugins = [].concat(me.plugins);
 736             for (i = 0, len = me.plugins.length; i &lt; len; i++) {
 737                 me.plugins[i] = me.initPlugin(me.plugins[i]);
 738             }
 739         }
 740
 741         me.loader = me.getLoader();
 742
 743         if (me.renderTo) {
 744             me.render(me.renderTo);
 745             // EXTJSIV-1935 - should be a way to do afterShow or something, but that
 746             // won't work. Likewise, rendering hidden and then showing (w/autoShow) has
 747             // implications to afterRender so we cannot do that.
 748         }
 749
 750         if (me.autoShow) {
 751             me.show();
 752         }
 753
 754         //&lt;debug&gt;
 755         if (Ext.isDefined(me.disabledClass)) {
 756             if (Ext.isDefined(Ext.global.console)) {
 757                 Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.');
 758             }
 759             me.disabledCls = me.disabledClass;
 760             delete me.disabledClass;
 761         }
 762         //&lt;/debug&gt;
 763     },
 764
 765     initComponent: Ext.emptyFn,
 766
 767 <span id='Ext-AbstractComponent-method-getState'>    /**
 768 </span>     * &lt;/p&gt;The supplied default state gathering method for the AbstractComponent class.&lt;/p&gt;
 769      * This method returns dimension setings such as &lt;code&gt;flex&lt;/code&gt;, &lt;code&gt;anchor&lt;/code&gt;, &lt;code&gt;width&lt;/code&gt;
 770      * and &lt;code&gt;height&lt;/code&gt; along with &lt;code&gt;collapsed&lt;/code&gt; state.&lt;/p&gt;
 771      * &lt;p&gt;Subclasses which implement more complex state should call the superclass's implementation, and apply their state
 772      * to the result if this basic state is to be saved.&lt;/p&gt;
 773      * &lt;p&gt;Note that Component state will only be saved if the Component has a {@link #stateId} and there as a StateProvider
 774      * configured for the document.&lt;/p&gt;
 775      */
 776     getState: function() {
 777         var me = this,
 778             layout = me.ownerCt ? (me.shadowOwnerCt || me.ownerCt).getLayout() : null,
 779             state = {
 780                 collapsed: me.collapsed
 781             },
 782             width = me.width,
 783             height = me.height,
 784             cm = me.collapseMemento,
 785             anchors;
 786
 787         // If a Panel-local collapse has taken place, use remembered values as the dimensions.
 788         // TODO: remove this coupling with Panel's privates! All collapse/expand logic should be refactored into one place.
 789         if (me.collapsed &amp;&amp; cm) {
 790             if (Ext.isDefined(cm.data.width)) {
 791                 width = cm.width;
 792             }
 793             if (Ext.isDefined(cm.data.height)) {
 794                 height = cm.height;
 795             }
 796         }
 797
 798         // If we have flex, only store the perpendicular dimension.
 799         if (layout &amp;&amp; me.flex) {
 800             state.flex = me.flex;
 801             state[layout.perpendicularPrefix] = me['get' + layout.perpendicularPrefixCap]();
 802         }
 803         // If we have anchor, only store dimensions which are *not* being anchored
 804         else if (layout &amp;&amp; me.anchor) {
 805             state.anchor = me.anchor;
 806             anchors = me.anchor.split(' ').concat(null);
 807             if (!anchors[0]) {
 808                 if (me.width) {
 809                     state.width = width;
 810                 }
 811             }
 812             if (!anchors[1]) {
 813                 if (me.height) {
 814                     state.height = height;
 815                 }
 816             }
 817         }
 818         // Store dimensions.
 819         else {
 820             if (me.width) {
 821                 state.width = width;
 822             }
 823             if (me.height) {
 824                 state.height = height;
 825             }
 826         }
 827
 828         // Don't save dimensions if they are unchanged from the original configuration.
 829         if (state.width == me.initialConfig.width) {
 830             delete state.width;
 831         }
 832         if (state.height == me.initialConfig.height) {
 833             delete state.height;
 834         }
 835
 836         // If a Box layout was managing the perpendicular dimension, don't save that dimension
 837         if (layout &amp;&amp; layout.align &amp;&amp; (layout.align.indexOf('stretch') !== -1)) {
 838             delete state[layout.perpendicularPrefix];
 839         }
 840         return state;
 841     },
 842
 843     show: Ext.emptyFn,
 844
 845     animate: function(animObj) {
 846         var me = this,
 847             to;
 848
 849         animObj = animObj || {};
 850         to = animObj.to || {};
 851
 852         if (Ext.fx.Manager.hasFxBlock(me.id)) {
 853             return me;
 854         }
 855         // Special processing for animating Component dimensions.
 856         if (!animObj.dynamic &amp;&amp; (to.height || to.width)) {
 857             var curWidth = me.getWidth(),
 858                 w = curWidth,
 859                 curHeight = me.getHeight(),
 860                 h = curHeight,
 861                 needsResize = false;
 862
 863             if (to.height &amp;&amp; to.height &gt; curHeight) {
 864                 h = to.height;
 865                 needsResize = true;
 866             }
 867             if (to.width &amp;&amp; to.width &gt; curWidth) {
 868                 w = to.width;
 869                 needsResize = true;
 870             }
 871
 872             // If any dimensions are being increased, we must resize the internal structure
 873             // of the Component, but then clip it by sizing its encapsulating element back to original dimensions.
 874             // The animation will then progressively reveal the larger content.
 875             if (needsResize) {
 876                 var clearWidth = !Ext.isNumber(me.width),
 877                     clearHeight = !Ext.isNumber(me.height);
 878
 879                 me.componentLayout.childrenChanged = true;
 880                 me.setSize(w, h, me.ownerCt);
 881                 me.el.setSize(curWidth, curHeight);
 882                 if (clearWidth) {
 883                     delete me.width;
 884                 }
 885                 if (clearHeight) {
 886                     delete me.height;
 887                 }
 888             }
 889         }
 890         return me.mixins.animate.animate.apply(me, arguments);
 891     },
 892
 893 <span id='Ext-AbstractComponent-method-findLayoutController'>    /**
 894 </span>     * &lt;p&gt;This method finds the topmost active layout who's processing will eventually determine the size and position of this
 895      * Component.&lt;p&gt;
 896      * &lt;p&gt;This method is useful when dynamically adding Components into Containers, and some processing must take place after the
 897      * final sizing and positioning of the Component has been performed.&lt;/p&gt;
 898      * @returns
 899      */
 900     findLayoutController: function() {
 901         return this.findParentBy(function(c) {
 902             // Return true if we are at the root of the Container tree
 903             // or this Container's layout is busy but the next one up is not.
 904             return !c.ownerCt || (c.layout.layoutBusy &amp;&amp; !c.ownerCt.layout.layoutBusy);
 905         });
 906     },
 907
 908     onShow : function() {
 909         // Layout if needed
 910         var needsLayout = this.needsLayout;
 911         if (Ext.isObject(needsLayout)) {
 912             this.doComponentLayout(needsLayout.width, needsLayout.height, needsLayout.isSetSize, needsLayout.ownerCt);
 913         }
 914     },
 915
 916     constructPlugin: function(plugin) {
 917         if (plugin.ptype &amp;&amp; typeof plugin.init != 'function') {
 918             plugin.cmp = this;
 919             plugin = Ext.PluginManager.create(plugin);
 920         }
 921         else if (typeof plugin == 'string') {
 922             plugin = Ext.PluginManager.create({
 923                 ptype: plugin,
 924                 cmp: this
 925             });
 926         }
 927         return plugin;
 928     },
 929
 930     // @private
 931     initPlugin : function(plugin) {
 932         plugin.init(this);
 933
 934         return plugin;
 935     },
 936
 937 <span id='Ext-AbstractComponent-method-doAutoRender'>    /**
 938 </span>     * Handles autoRender.
 939      * Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that
 940      * ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body
 941      */
 942     doAutoRender: function() {
 943         var me = this;
 944         if (me.floating) {
 945             me.render(document.body);
 946         } else {
 947             me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender);
 948         }
 949     },
 950
 951     // @private
 952     render : function(container, position) {
 953         var me = this;
 954
 955         if (!me.rendered &amp;&amp; me.fireEvent('beforerender', me) !== false) {
 956             // If this.el is defined, we want to make sure we are dealing with
 957             // an Ext Element.
 958             if (me.el) {
 959                 me.el = Ext.get(me.el);
 960             }
 961
 962             // Perform render-time processing for floating Components
 963             if (me.floating) {
 964                 me.onFloatRender();
 965             }
 966
 967             container = me.initContainer(container);
 968
 969             me.onRender(container, position);
 970
 971             // Tell the encapsulating element to hide itself in the way the Component is configured to hide
 972             // This means DISPLAY, VISIBILITY or OFFSETS.
 973             me.el.setVisibilityMode(Ext.core.Element[me.hideMode.toUpperCase()]);
 974
 975             if (me.overCls) {
 976                 me.el.hover(me.addOverCls, me.removeOverCls, me);
 977             }
 978
 979             me.fireEvent('render', me);
 980
 981             me.initContent();
 982
 983             me.afterRender(container);
 984             me.fireEvent('afterrender', me);
 985
 986             me.initEvents();
 987
 988             if (me.hidden) {
 989                 // Hiding during the render process should not perform any ancillary
 990                 // actions that the full hide process does; It is not hiding, it begins in a hidden state.'
 991                 // So just make the element hidden according to the configured hideMode
 992                 me.el.hide();
 993             }
 994
 995             if (me.disabled) {
 996                 // pass silent so the event doesn't fire the first time.
 997                 me.disable(true);
 998             }
 999         }
1000         return me;
1001     },
1002
1003     // @private
1004     onRender : function(container, position) {
1005         var me = this,
1006             el = me.el,
1007             styles = me.initStyles(),
1008             renderTpl, renderData, i;
1009
1010         position = me.getInsertPosition(position);
1011
1012         if (!el) {
1013             if (position) {
1014                 el = Ext.core.DomHelper.insertBefore(position, me.getElConfig(), true);
1015             }
1016             else {
1017                 el = Ext.core.DomHelper.append(container, me.getElConfig(), true);
1018             }
1019         }
1020         else if (me.allowDomMove !== false) {
1021             if (position) {
1022                 container.dom.insertBefore(el.dom, position);
1023             } else {
1024                 container.dom.appendChild(el.dom);
1025             }
1026         }
1027
1028         if (Ext.scopeResetCSS &amp;&amp; !me.ownerCt) {
1029             // If this component's el is the body element, we add the reset class to the html tag
1030             if (el.dom == Ext.getBody().dom) {
1031                 el.parent().addCls(Ext.baseCSSPrefix + 'reset');
1032             }
1033             else {
1034                 // Else we wrap this element in an element that adds the reset class.
1035                 me.resetEl = el.wrap({
1036                     cls: Ext.baseCSSPrefix + 'reset'
1037                 });
1038             }
1039         }
1040
1041         me.setUI(me.ui);
1042
1043         el.addCls(me.initCls());
1044         el.setStyle(styles);
1045
1046         // Here we check if the component has a height set through style or css.
1047         // If it does then we set the this.height to that value and it won't be
1048         // considered an auto height component
1049         // if (this.height === undefined) {
1050         //     var height = el.getHeight();
1051         //     // This hopefully means that the panel has an explicit height set in style or css
1052         //     if (height - el.getPadding('tb') - el.getBorderWidth('tb') &gt; 0) {
1053         //         this.height = height;
1054         //     }
1055         // }
1056
1057         me.el = el;
1058
1059         me.initFrame();
1060
1061         renderTpl = me.initRenderTpl();
1062         if (renderTpl) {
1063             renderData = me.initRenderData();
1064             renderTpl.append(me.getTargetEl(), renderData);
1065         }
1066
1067         me.applyRenderSelectors();
1068
1069         me.rendered = true;
1070     },
1071
1072     // @private
1073     afterRender : function() {
1074         var me = this,
1075             pos,
1076             xy;
1077
1078         me.getComponentLayout();
1079
1080         // Set the size if a size is configured, or if this is the outermost Container
1081         if (!me.ownerCt || (me.height || me.width)) {
1082             me.setSize(me.width, me.height);
1083         }
1084
1085         // For floaters, calculate x and y if they aren't defined by aligning
1086         // the sized element to the center of either the container or the ownerCt
1087         if (me.floating &amp;&amp; (me.x === undefined || me.y === undefined)) {
1088             if (me.floatParent) {
1089                 xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
1090                 pos = me.floatParent.getTargetEl().translatePoints(xy[0], xy[1]);
1091             } else {
1092                 xy = me.el.getAlignToXY(me.container, 'c-c');
1093                 pos = me.container.translatePoints(xy[0], xy[1]);
1094             }
1095             me.x = me.x === undefined ? pos.left: me.x;
1096             me.y = me.y === undefined ? pos.top: me.y;
1097         }
1098
1099         if (Ext.isDefined(me.x) || Ext.isDefined(me.y)) {
1100             me.setPosition(me.x, me.y);
1101         }
1102
1103         if (me.styleHtmlContent) {
1104             me.getTargetEl().addCls(me.styleHtmlCls);
1105         }
1106     },
1107
1108     frameCls: Ext.baseCSSPrefix + 'frame',
1109
1110     frameElementCls: {
1111         tl: [],
1112         tc: [],
1113         tr: [],
1114         ml: [],
1115         mc: [],
1116         mr: [],
1117         bl: [],
1118         bc: [],
1119         br: []
1120     },
1121
1122     frameTpl: [
1123         '&lt;tpl if=&quot;top&quot;&gt;',
1124             '&lt;tpl if=&quot;left&quot;&gt;&lt;div class=&quot;{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tl&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tl}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
1125                 '&lt;tpl if=&quot;right&quot;&gt;&lt;div class=&quot;{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tr&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tr}; padding-right: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
1126                     '&lt;div class=&quot;{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/div&gt;',
1127                 '&lt;tpl if=&quot;right&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
1128             '&lt;tpl if=&quot;left&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
1129         '&lt;/tpl&gt;',
1130         '&lt;tpl if=&quot;left&quot;&gt;&lt;div class=&quot;{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-ml&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {ml}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
1131             '&lt;tpl if=&quot;right&quot;&gt;&lt;div class=&quot;{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mr&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {mr}; padding-right: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
1132                 '&lt;div class=&quot;{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mc&lt;/tpl&gt;&lt;/tpl&gt;&quot; role=&quot;presentation&quot;&gt;&lt;/div&gt;',
1133             '&lt;tpl if=&quot;right&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
1134         '&lt;tpl if=&quot;left&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
1135         '&lt;tpl if=&quot;bottom&quot;&gt;',
1136             '&lt;tpl if=&quot;left&quot;&gt;&lt;div class=&quot;{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bl&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {bl}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
1137                 '&lt;tpl if=&quot;right&quot;&gt;&lt;div class=&quot;{frameCls}-br {baseCls}-br {baseCls}-{ui}-br&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-br&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {br}; padding-right: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
1138                     '&lt;div class=&quot;{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {bc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/div&gt;',
1139                 '&lt;tpl if=&quot;right&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
1140             '&lt;tpl if=&quot;left&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
1141         '&lt;/tpl&gt;'
1142     ],
1143
1144     frameTableTpl: [
1145         '&lt;table&gt;&lt;tbody&gt;',
1146             '&lt;tpl if=&quot;top&quot;&gt;',
1147                 '&lt;tr&gt;',
1148                     '&lt;tpl if=&quot;left&quot;&gt;&lt;td class=&quot;{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tl&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tl}; padding-left:{frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
1149                     '&lt;td class=&quot;{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;',
1150                     '&lt;tpl if=&quot;right&quot;&gt;&lt;td class=&quot;{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tr&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tr}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
1151                 '&lt;/tr&gt;',
1152             '&lt;/tpl&gt;',
1153             '&lt;tr&gt;',
1154                 '&lt;tpl if=&quot;left&quot;&gt;&lt;td class=&quot;{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-ml&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {ml}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
1155                 '&lt;td class=&quot;{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: 0 0;&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;',
1156                 '&lt;tpl if=&quot;right&quot;&gt;&lt;td class=&quot;{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mr&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {mr}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
1157             '&lt;/tr&gt;',
1158             '&lt;tpl if=&quot;bottom&quot;&gt;',
1159                 '&lt;tr&gt;',
1160                     '&lt;tpl if=&quot;left&quot;&gt;&lt;td class=&quot;{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bl&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {bl}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
1161                     '&lt;td class=&quot;{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {bc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;',
1162                     '&lt;tpl if=&quot;right&quot;&gt;&lt;td class=&quot;{frameCls}-br {baseCls}-br {baseCls}-{ui}-br&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-br&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {br}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
1163                 '&lt;/tr&gt;',
1164             '&lt;/tpl&gt;',
1165         '&lt;/tbody&gt;&lt;/table&gt;'
1166     ],
1167
1168 <span id='Ext-AbstractComponent-method-initFrame'>    /**
1169 </span>     * @private
1170      */
1171     initFrame : function() {
1172         if (Ext.supports.CSS3BorderRadius) {
1173             return false;
1174         }
1175
1176         var me = this,
1177             frameInfo = me.getFrameInfo(),
1178             frameWidth = frameInfo.width,
1179             frameTpl = me.getFrameTpl(frameInfo.table);
1180
1181         if (me.frame) {
1182             // Here we render the frameTpl to this component. This inserts the 9point div or the table framing.
1183             frameTpl.insertFirst(me.el, Ext.apply({}, {
1184                 ui:         me.ui,
1185                 uiCls:      me.uiCls,
1186                 frameCls:   me.frameCls,
1187                 baseCls:    me.baseCls,
1188                 frameWidth: frameWidth,
1189                 top:        !!frameInfo.top,
1190                 left:       !!frameInfo.left,
1191                 right:      !!frameInfo.right,
1192                 bottom:     !!frameInfo.bottom
1193             }, me.getFramePositions(frameInfo)));
1194
1195             // The frameBody is returned in getTargetEl, so that layouts render items to the correct target.=
1196             me.frameBody = me.el.down('.' + me.frameCls + '-mc');
1197
1198             // Add the render selectors for each of the frame elements
1199             Ext.apply(me.renderSelectors, {
1200                 frameTL: '.' + me.baseCls + '-tl',
1201                 frameTC: '.' + me.baseCls + '-tc',
1202                 frameTR: '.' + me.baseCls + '-tr',
1203                 frameML: '.' + me.baseCls + '-ml',
1204                 frameMC: '.' + me.baseCls + '-mc',
1205                 frameMR: '.' + me.baseCls + '-mr',
1206                 frameBL: '.' + me.baseCls + '-bl',
1207                 frameBC: '.' + me.baseCls + '-bc',
1208                 frameBR: '.' + me.baseCls + '-br'
1209             });
1210         }
1211     },
1212
1213     updateFrame: function() {
1214         if (Ext.supports.CSS3BorderRadius) {
1215             return false;
1216         }
1217
1218         var me = this,
1219             wasTable = this.frameSize &amp;&amp; this.frameSize.table,
1220             oldFrameTL = this.frameTL,
1221             oldFrameBL = this.frameBL,
1222             oldFrameML = this.frameML,
1223             oldFrameMC = this.frameMC,
1224             newMCClassName;
1225
1226         this.initFrame();
1227
1228         if (oldFrameMC) {
1229             if (me.frame) {
1230                 // Reapply render selectors
1231                 delete me.frameTL;
1232                 delete me.frameTC;
1233                 delete me.frameTR;
1234                 delete me.frameML;
1235                 delete me.frameMC;
1236                 delete me.frameMR;
1237                 delete me.frameBL;
1238                 delete me.frameBC;
1239                 delete me.frameBR;
1240                 this.applyRenderSelectors();
1241
1242                 // Store the class names set on the new mc
1243                 newMCClassName = this.frameMC.dom.className;
1244
1245                 // Replace the new mc with the old mc
1246                 oldFrameMC.insertAfter(this.frameMC);
1247                 this.frameMC.remove();
1248
1249                 // Restore the reference to the old frame mc as the framebody
1250                 this.frameBody = this.frameMC = oldFrameMC;
1251
1252                 // Apply the new mc classes to the old mc element
1253                 oldFrameMC.dom.className = newMCClassName;
1254
1255                 // Remove the old framing
1256                 if (wasTable) {
1257                     me.el.query('&gt; table')[1].remove();
1258                 }
1259                 else {
1260                     if (oldFrameTL) {
1261                         oldFrameTL.remove();
1262                     }
1263                     if (oldFrameBL) {
1264                         oldFrameBL.remove();
1265                     }
1266                     oldFrameML.remove();
1267                 }
1268             }
1269             else {
1270                 // We were framed but not anymore. Move all content from the old frame to the body
1271
1272             }
1273         }
1274         else if (me.frame) {
1275             this.applyRenderSelectors();
1276         }
1277     },
1278
1279     getFrameInfo: function() {
1280         if (Ext.supports.CSS3BorderRadius) {
1281             return false;
1282         }
1283
1284         var me = this,
1285             left = me.el.getStyle('background-position-x'),
1286             top = me.el.getStyle('background-position-y'),
1287             info, frameInfo = false, max;
1288
1289         // Some browsers dont support background-position-x and y, so for those
1290         // browsers let's split background-position into two parts.
1291         if (!left &amp;&amp; !top) {
1292             info = me.el.getStyle('background-position').split(' ');
1293             left = info[0];
1294             top = info[1];
1295         }
1296
1297         // We actually pass a string in the form of '[type][tl][tr]px [type][br][bl]px' as
1298         // the background position of this.el from the css to indicate to IE that this component needs
1299         // framing. We parse it here and change the markup accordingly.
1300         if (parseInt(left, 10) &gt;= 1000000 &amp;&amp; parseInt(top, 10) &gt;= 1000000) {
1301             max = Math.max;
1302
1303             frameInfo = {
1304                 // Table markup starts with 110, div markup with 100.
1305                 table: left.substr(0, 3) == '110',
1306
1307                 // Determine if we are dealing with a horizontal or vertical component
1308                 vertical: top.substr(0, 3) == '110',
1309
1310                 // Get and parse the different border radius sizes
1311                 top:    max(left.substr(3, 2), left.substr(5, 2)),
1312                 right:  max(left.substr(5, 2), top.substr(3, 2)),
1313                 bottom: max(top.substr(3, 2), top.substr(5, 2)),
1314                 left:   max(top.substr(5, 2), left.substr(3, 2))
1315             };
1316
1317             frameInfo.width = max(frameInfo.top, frameInfo.right, frameInfo.bottom, frameInfo.left);
1318
1319             // Just to be sure we set the background image of the el to none.
1320             me.el.setStyle('background-image', 'none');
1321         }
1322
1323         // This happens when you set frame: true explicitly without using the x-frame mixin in sass.
1324         // This way IE can't figure out what sizes to use and thus framing can't work.
1325         if (me.frame === true &amp;&amp; !frameInfo) {
1326             //&lt;debug error&gt;
1327             Ext.Error.raise(&quot;You have set frame: true explicity on this component while it doesn't have any &quot; +
1328                             &quot;framing defined in the CSS template. In this case IE can't figure out what sizes &quot; +
1329                             &quot;to use and thus framing on this component will be disabled.&quot;);
1330             //&lt;/debug&gt;
1331         }
1332
1333         me.frame = me.frame || !!frameInfo;
1334         me.frameSize = frameInfo || false;
1335
1336         return frameInfo;
1337     },
1338
1339     getFramePositions: function(frameInfo) {
1340         var me = this,
1341             frameWidth = frameInfo.width,
1342             dock = me.dock,
1343             positions, tc, bc, ml, mr;
1344
1345         if (frameInfo.vertical) {
1346             tc = '0 -' + (frameWidth * 0) + 'px';
1347             bc = '0 -' + (frameWidth * 1) + 'px';
1348
1349             if (dock &amp;&amp; dock == &quot;right&quot;) {
1350                 tc = 'right -' + (frameWidth * 0) + 'px';
1351                 bc = 'right -' + (frameWidth * 1) + 'px';
1352             }
1353
1354             positions = {
1355                 tl: '0 -' + (frameWidth * 0) + 'px',
1356                 tr: '0 -' + (frameWidth * 1) + 'px',
1357                 bl: '0 -' + (frameWidth * 2) + 'px',
1358                 br: '0 -' + (frameWidth * 3) + 'px',
1359
1360                 ml: '-' + (frameWidth * 1) + 'px 0',
1361                 mr: 'right 0',
1362
1363                 tc: tc,
1364                 bc: bc
1365             };
1366         } else {
1367             ml = '-' + (frameWidth * 0) + 'px 0';
1368             mr = 'right 0';
1369
1370             if (dock &amp;&amp; dock == &quot;bottom&quot;) {
1371                 ml = 'left bottom';
1372                 mr = 'right bottom';
1373             }
1374
1375             positions = {
1376                 tl: '0 -' + (frameWidth * 2) + 'px',
1377                 tr: 'right -' + (frameWidth * 3) + 'px',
1378                 bl: '0 -' + (frameWidth * 4) + 'px',
1379                 br: 'right -' + (frameWidth * 5) + 'px',
1380
1381                 ml: ml,
1382                 mr: mr,
1383
1384                 tc: '0 -' + (frameWidth * 0) + 'px',
1385                 bc: '0 -' + (frameWidth * 1) + 'px'
1386             };
1387         }
1388
1389         return positions;
1390     },
1391
1392 <span id='Ext-AbstractComponent-method-getFrameTpl'>    /**
1393 </span>     * @private
1394      */
1395     getFrameTpl : function(table) {
1396         return table ? this.getTpl('frameTableTpl') : this.getTpl('frameTpl');
1397     },
1398
1399 <span id='Ext-AbstractComponent-method-initCls'>    /**
1400 </span>     * &lt;p&gt;Creates an array of class names from the configurations to add to this Component's &lt;code&gt;el&lt;/code&gt; on render.&lt;/p&gt;
1401      * &lt;p&gt;Private, but (possibly) used by ComponentQuery for selection by class name if Component is not rendered.&lt;/p&gt;
1402      * @return {Array} An array of class names with which the Component's element will be rendered.
1403      * @private
1404      */
1405     initCls: function() {
1406         var me = this,
1407             cls = [];
1408
1409         cls.push(me.baseCls);
1410
1411         //&lt;deprecated since=0.99&gt;
1412         if (Ext.isDefined(me.cmpCls)) {
1413             if (Ext.isDefined(Ext.global.console)) {
1414                 Ext.global.console.warn('Ext.Component: cmpCls has been deprecated. Please use componentCls.');
1415             }
1416             me.componentCls = me.cmpCls;
1417             delete me.cmpCls;
1418         }
1419         //&lt;/deprecated&gt;
1420
1421         if (me.componentCls) {
1422             cls.push(me.componentCls);
1423         } else {
1424             me.componentCls = me.baseCls;
1425         }
1426         if (me.cls) {
1427             cls.push(me.cls);
1428             delete me.cls;
1429         }
1430
1431         return cls.concat(me.additionalCls);
1432     },
1433
1434 <span id='Ext-AbstractComponent-method-setUI'>    /**
1435 </span>     * Sets the UI for the component. This will remove any existing UIs on the component. It will also
1436      * loop through any uiCls set on the component and rename them so they include the new UI
1437      * @param {String} ui The new UI for the component
1438      */
1439     setUI: function(ui) {
1440         var me = this,
1441             oldUICls = Ext.Array.clone(me.uiCls),
1442             newUICls = [],
1443             classes = [],
1444             cls,
1445             i;
1446
1447         //loop through all exisiting uiCls and update the ui in them
1448         for (i = 0; i &lt; oldUICls.length; i++) {
1449             cls = oldUICls[i];
1450
1451             classes = classes.concat(me.removeClsWithUI(cls, true));
1452             newUICls.push(cls);
1453         }
1454
1455         if (classes.length) {
1456             me.removeCls(classes);
1457         }
1458
1459         //remove the UI from the element
1460         me.removeUIFromElement();
1461
1462         //set the UI
1463         me.ui = ui;
1464
1465         //add the new UI to the elemend
1466         me.addUIToElement();
1467
1468         //loop through all exisiting uiCls and update the ui in them
1469         classes = [];
1470         for (i = 0; i &lt; newUICls.length; i++) {
1471             cls = newUICls[i];
1472             classes = classes.concat(me.addClsWithUI(cls, true));
1473         }
1474
1475         if (classes.length) {
1476             me.addCls(classes);
1477         }
1478     },
1479
1480 <span id='Ext-AbstractComponent-method-addClsWithUI'>    /**
1481 </span>     * Adds a cls to the uiCls array, which will also call {@link #addUIClsToElement} and adds
1482      * to all elements of this component.
1483      * @param {String/Array} cls A string or an array of strings to add to the uiCls
1484      * @param (Boolean) skip True to skip adding it to the class and do it later (via the return)
1485      */
1486     addClsWithUI: function(cls, skip) {
1487         var me = this,
1488             classes = [],
1489             i;
1490
1491         if (!Ext.isArray(cls)) {
1492             cls = [cls];
1493         }
1494
1495         for (i = 0; i &lt; cls.length; i++) {
1496             if (cls[i] &amp;&amp; !me.hasUICls(cls[i])) {
1497                 me.uiCls = Ext.Array.clone(me.uiCls);
1498                 me.uiCls.push(cls[i]);
1499
1500                 classes = classes.concat(me.addUIClsToElement(cls[i]));
1501             }
1502         }
1503
1504         if (skip !== true) {
1505             me.addCls(classes);
1506         }
1507
1508         return classes;
1509     },
1510
1511 <span id='Ext-AbstractComponent-method-removeClsWithUI'>    /**
1512 </span>     * Removes a cls to the uiCls array, which will also call {@link #removeUIClsFromElement} and removes
1513      * it from all elements of this component.
1514      * @param {String/Array} cls A string or an array of strings to remove to the uiCls
1515      */
1516     removeClsWithUI: function(cls, skip) {
1517         var me = this,
1518             classes = [],
1519             i;
1520
1521         if (!Ext.isArray(cls)) {
1522             cls = [cls];
1523         }
1524
1525         for (i = 0; i &lt; cls.length; i++) {
1526             if (cls[i] &amp;&amp; me.hasUICls(cls[i])) {
1527                 me.uiCls = Ext.Array.remove(me.uiCls, cls[i]);
1528
1529                 classes = classes.concat(me.removeUIClsFromElement(cls[i]));
1530             }
1531         }
1532
1533         if (skip !== true) {
1534             me.removeCls(classes);
1535         }
1536
1537         return classes;
1538     },
1539
1540 <span id='Ext-AbstractComponent-method-hasUICls'>    /**
1541 </span>     * Checks if there is currently a specified uiCls
1542      * @param {String} cls The cls to check
1543      */
1544     hasUICls: function(cls) {
1545         var me = this,
1546             uiCls = me.uiCls || [];
1547
1548         return Ext.Array.contains(uiCls, cls);
1549     },
1550
1551 <span id='Ext-AbstractComponent-method-addUIClsToElement'>    /**
1552 </span>     * Method which adds a specified UI + uiCls to the components element.
1553      * Can be overridden to remove the UI from more than just the components element.
1554      * @param {String} ui The UI to remove from the element
1555      */
1556     addUIClsToElement: function(cls, force) {
1557         var me = this,
1558             result = [],
1559             frameElementCls = me.frameElementCls;
1560
1561         result.push(Ext.baseCSSPrefix + cls);
1562         result.push(me.baseCls + '-' + cls);
1563         result.push(me.baseCls + '-' + me.ui + '-' + cls);
1564
1565         if (!force &amp;&amp; me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
1566             // define each element of the frame
1567             var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
1568                 classes, i, j, el;
1569
1570             // loop through each of them, and if they are defined add the ui
1571             for (i = 0; i &lt; els.length; i++) {
1572                 el = me['frame' + els[i].toUpperCase()];
1573                 classes = [me.baseCls + '-' + me.ui + '-' + els[i], me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i]];
1574                 if (el &amp;&amp; el.dom) {
1575                     el.addCls(classes);
1576                 } else {
1577                     for (j = 0; j &lt; classes.length; j++) {
1578                         if (Ext.Array.indexOf(frameElementCls[els[i]], classes[j]) == -1) {
1579                             frameElementCls[els[i]].push(classes[j]);
1580                         }
1581                     }
1582                 }
1583             }
1584         }
1585
1586         me.frameElementCls = frameElementCls;
1587
1588         return result;
1589     },
1590
1591 <span id='Ext-AbstractComponent-method-removeUIClsFromElement'>    /**
1592 </span>     * Method which removes a specified UI + uiCls from the components element.
1593      * The cls which is added to the element will be: `this.baseCls + '-' + ui`
1594      * @param {String} ui The UI to add to the element
1595      */
1596     removeUIClsFromElement: function(cls, force) {
1597         var me = this,
1598             result = [],
1599             frameElementCls = me.frameElementCls;
1600
1601         result.push(Ext.baseCSSPrefix + cls);
1602         result.push(me.baseCls + '-' + cls);
1603         result.push(me.baseCls + '-' + me.ui + '-' + cls);
1604
1605         if (!force &amp;&amp; me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
1606             // define each element of the frame
1607             var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
1608                 i, el;
1609             cls = me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i];
1610             // loop through each of them, and if they are defined add the ui
1611             for (i = 0; i &lt; els.length; i++) {
1612                 el = me['frame' + els[i].toUpperCase()];
1613                 if (el &amp;&amp; el.dom) {
1614                     el.removeCls(cls);
1615                 } else {
1616                     Ext.Array.remove(frameElementCls[els[i]], cls);
1617                 }
1618             }
1619         }
1620
1621         me.frameElementCls = frameElementCls;
1622
1623         return result;
1624     },
1625
1626 <span id='Ext-AbstractComponent-method-addUIToElement'>    /**
1627 </span>     * Method which adds a specified UI to the components element.
1628      * @private
1629      */
1630     addUIToElement: function(force) {
1631         var me = this,
1632             frameElementCls = me.frameElementCls;
1633
1634         me.addCls(me.baseCls + '-' + me.ui);
1635
1636         if (me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
1637             // define each element of the frame
1638             var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
1639                 i, el, cls;
1640
1641             // loop through each of them, and if they are defined add the ui
1642             for (i = 0; i &lt; els.length; i++) {
1643                 el = me['frame' + els[i].toUpperCase()];
1644                 cls = me.baseCls + '-' + me.ui + '-' + els[i];
1645                 if (el) {
1646                     el.addCls(cls);
1647                 } else {
1648                     if (!Ext.Array.contains(frameElementCls[els[i]], cls)) {
1649                         frameElementCls[els[i]].push(cls);
1650                     }
1651                 }
1652             }
1653         }
1654     },
1655
1656 <span id='Ext-AbstractComponent-method-removeUIFromElement'>    /**
1657 </span>     * Method which removes a specified UI from the components element.
1658      * @private
1659      */
1660     removeUIFromElement: function() {
1661         var me = this,
1662             frameElementCls = me.frameElementCls;
1663
1664         me.removeCls(me.baseCls + '-' + me.ui);
1665
1666         if (me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
1667             // define each element of the frame
1668             var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
1669                 i, j, el, cls;
1670
1671             // loop through each of them, and if they are defined add the ui
1672             for (i = 0; i &lt; els.length; i++) {
1673                 el = me['frame' + els[i].toUpperCase()];
1674                 cls = me.baseCls + '-' + me.ui + '-' + els[i];
1675
1676                 if (el) {
1677                     el.removeCls(cls);
1678                 } else {
1679                     Ext.Array.remove(frameElementCls[els[i]], cls);
1680                 }
1681             }
1682         }
1683     },
1684
1685     getElConfig : function() {
1686         var result = this.autoEl || {tag: 'div'};
1687         result.id = this.id;
1688         return result;
1689     },
1690
1691 <span id='Ext-AbstractComponent-method-getInsertPosition'>    /**
1692 </span>     * This function takes the position argument passed to onRender and returns a
1693      * DOM element that you can use in the insertBefore.
1694      * @param {String/Number/Element/HTMLElement} position Index, element id or element you want
1695      * to put this component before.
1696      * @return {HTMLElement} DOM element that you can use in the insertBefore
1697      */
1698     getInsertPosition: function(position) {
1699         // Convert the position to an element to insert before
1700         if (position !== undefined) {
1701             if (Ext.isNumber(position)) {
1702                 position = this.container.dom.childNodes[position];
1703             }
1704             else {
1705                 position = Ext.getDom(position);
1706             }
1707         }
1708
1709         return position;
1710     },
1711
1712 <span id='Ext-AbstractComponent-method-initContainer'>    /**
1713 </span>     * Adds ctCls to container.
1714      * @return {Ext.core.Element} The initialized container
1715      * @private
1716      */
1717     initContainer: function(container) {
1718         var me = this;
1719
1720         // If you render a component specifying the el, we get the container
1721         // of the el, and make sure we dont move the el around in the dom
1722         // during the render
1723         if (!container &amp;&amp; me.el) {
1724             container = me.el.dom.parentNode;
1725             me.allowDomMove = false;
1726         }
1727
1728         me.container = Ext.get(container);
1729
1730         if (me.ctCls) {
1731             me.container.addCls(me.ctCls);
1732         }
1733
1734         return me.container;
1735     },
1736
1737 <span id='Ext-AbstractComponent-method-initRenderData'>    /**
1738 </span>     * Initialized the renderData to be used when rendering the renderTpl.
1739      * @return {Object} Object with keys and values that are going to be applied to the renderTpl
1740      * @private
1741      */
1742     initRenderData: function() {
1743         var me = this;
1744
1745         return Ext.applyIf(me.renderData, {
1746             ui: me.ui,
1747             uiCls: me.uiCls,
1748             baseCls: me.baseCls,
1749             componentCls: me.componentCls,
1750             frame: me.frame
1751         });
1752     },
1753
1754 <span id='Ext-AbstractComponent-method-getTpl'>    /**
1755 </span>     * @private
1756      */
1757     getTpl: function(name) {
1758         var me = this,
1759             prototype = me.self.prototype,
1760             ownerPrototype,
1761             tpl;
1762
1763         if (me.hasOwnProperty(name)) {
1764             tpl = me[name];
1765             if (tpl &amp;&amp; !(tpl instanceof Ext.XTemplate)) {
1766                 me[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
1767             }
1768
1769             return me[name];
1770         }
1771
1772         if (!(prototype[name] instanceof Ext.XTemplate)) {
1773             ownerPrototype = prototype;
1774
1775             do {
1776                 if (ownerPrototype.hasOwnProperty(name)) {
1777                     tpl = ownerPrototype[name];
1778                     if (tpl &amp;&amp; !(tpl instanceof Ext.XTemplate)) {
1779                         ownerPrototype[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
1780                         break;
1781                     }
1782                 }
1783
1784                 ownerPrototype = ownerPrototype.superclass;
1785             } while (ownerPrototype);
1786         }
1787
1788         return prototype[name];
1789     },
1790
1791 <span id='Ext-AbstractComponent-method-initRenderTpl'>    /**
1792 </span>     * Initializes the renderTpl.
1793      * @return {Ext.XTemplate} The renderTpl XTemplate instance.
1794      * @private
1795      */
1796     initRenderTpl: function() {
1797         return this.getTpl('renderTpl');
1798     },
1799
1800 <span id='Ext-AbstractComponent-method-initStyles'>    /**
1801 </span>     * Function description
1802      * @return {String} A CSS style string with style, padding, margin and border.
1803      * @private
1804      */
1805     initStyles: function() {
1806         var style = {},
1807             me = this,
1808             Element = Ext.core.Element;
1809
1810         if (Ext.isString(me.style)) {
1811             style = Element.parseStyles(me.style);
1812         } else {
1813             style = Ext.apply({}, me.style);
1814         }
1815
1816         // Convert the padding, margin and border properties from a space seperated string
1817         // into a proper style string
1818         if (me.padding !== undefined) {
1819             style.padding = Element.unitizeBox((me.padding === true) ? 5 : me.padding);
1820         }
1821
1822         if (me.margin !== undefined) {
1823             style.margin = Element.unitizeBox((me.margin === true) ? 5 : me.margin);
1824         }
1825
1826         delete me.style;
1827         return style;
1828     },
1829
1830 <span id='Ext-AbstractComponent-method-initContent'>    /**
1831 </span>     * Initializes this components contents. It checks for the properties
1832      * html, contentEl and tpl/data.
1833      * @private
1834      */
1835     initContent: function() {
1836         var me = this,
1837             target = me.getTargetEl(),
1838             contentEl,
1839             pre;
1840
1841         if (me.html) {
1842             target.update(Ext.core.DomHelper.markup(me.html));
1843             delete me.html;
1844         }
1845
1846         if (me.contentEl) {
1847             contentEl = Ext.get(me.contentEl);
1848             pre = Ext.baseCSSPrefix;
1849             contentEl.removeCls([pre + 'hidden', pre + 'hide-display', pre + 'hide-offsets', pre + 'hide-nosize']);
1850             target.appendChild(contentEl.dom);
1851         }
1852
1853         if (me.tpl) {
1854             // Make sure this.tpl is an instantiated XTemplate
1855             if (!me.tpl.isTemplate) {
1856                 me.tpl = Ext.create('Ext.XTemplate', me.tpl);
1857             }
1858
1859             if (me.data) {
1860                 me.tpl[me.tplWriteMode](target, me.data);
1861                 delete me.data;
1862             }
1863         }
1864     },
1865
1866     // @private
1867     initEvents : function() {
1868         var me = this,
1869             afterRenderEvents = me.afterRenderEvents,
1870             el,
1871             property,
1872             fn = function(listeners){
1873                 me.mon(el, listeners);
1874             };
1875         if (afterRenderEvents) {
1876             for (property in afterRenderEvents) {
1877                 if (afterRenderEvents.hasOwnProperty(property)) {
1878                     el = me[property];
1879                     if (el &amp;&amp; el.on) {
1880                         Ext.each(afterRenderEvents[property], fn);
1881                     }
1882                 }
1883             }
1884         }
1885     },
1886
1887 <span id='Ext-AbstractComponent-method-applyRenderSelectors'>    /**
1888 </span>     * Sets references to elements inside the component. E.g body -&gt; x-panel-body
1889      * @private
1890      */
1891     applyRenderSelectors: function() {
1892         var selectors = this.renderSelectors || {},
1893             el = this.el.dom,
1894             selector;
1895
1896         for (selector in selectors) {
1897             if (selectors.hasOwnProperty(selector) &amp;&amp; selectors[selector]) {
1898                 this[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], el));
1899             }
1900         }
1901     },
1902
1903 <span id='Ext-AbstractComponent-method-is'>    /**
1904 </span>     * Tests whether this Component matches the selector string.
1905      * @param {String} selector The selector string to test against.
1906      * @return {Boolean} True if this Component matches the selector.
1907      */
1908     is: function(selector) {
1909         return Ext.ComponentQuery.is(this, selector);
1910     },
1911
1912 <span id='Ext-AbstractComponent-method-up'>    /**
1913 </span>     * &lt;p&gt;Walks up the &lt;code&gt;ownerCt&lt;/code&gt; axis looking for an ancestor Container which matches
1914      * the passed simple selector.&lt;/p&gt;
1915      * &lt;p&gt;Example:&lt;pre&gt;&lt;code&gt;
1916 var owningTabPanel = grid.up('tabpanel');
1917 &lt;/code&gt;&lt;/pre&gt;
1918      * @param {String} selector Optional. The simple selector to test.
1919      * @return {Container} The matching ancestor Container (or &lt;code&gt;undefined&lt;/code&gt; if no match was found).
1920      */
1921     up: function(selector) {
1922         var result = this.ownerCt;
1923         if (selector) {
1924             for (; result; result = result.ownerCt) {
1925                 if (Ext.ComponentQuery.is(result, selector)) {
1926                     return result;
1927                 }
1928             }
1929         }
1930         return result;
1931     },
1932
1933 <span id='Ext-AbstractComponent-method-nextSibling'>    /**
1934 </span>     * &lt;p&gt;Returns the next sibling of this Component.&lt;/p&gt;
1935      * &lt;p&gt;Optionally selects the next sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.&lt;/p&gt;
1936      * &lt;p&gt;May also be refered to as &lt;code&gt;&lt;b&gt;next()&lt;/b&gt;&lt;/code&gt;&lt;/p&gt;
1937      * &lt;p&gt;Note that this is limited to siblings, and if no siblings of the item match, &lt;code&gt;null&lt;/code&gt; is returned. Contrast with {@link #nextNode}&lt;/p&gt;
1938      * @param {String} selector Optional A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following items.
1939      * @returns The next sibling (or the next sibling which matches the selector). Returns null if there is no matching sibling.
1940      */
1941     nextSibling: function(selector) {
1942         var o = this.ownerCt, it, last, idx, c;
1943         if (o) {
1944             it = o.items;
1945             idx = it.indexOf(this) + 1;
1946             if (idx) {
1947                 if (selector) {
1948                     for (last = it.getCount(); idx &lt; last; idx++) {
1949                         if ((c = it.getAt(idx)).is(selector)) {
1950                             return c;
1951                         }
1952                     }
1953                 } else {
1954                     if (idx &lt; it.getCount()) {
1955                         return it.getAt(idx);
1956                     }
1957                 }
1958             }
1959         }
1960         return null;
1961     },
1962
1963 <span id='Ext-AbstractComponent-method-previousSibling'>    /**
1964 </span>     * &lt;p&gt;Returns the previous sibling of this Component.&lt;/p&gt;
1965      * &lt;p&gt;Optionally selects the previous sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.&lt;/p&gt;
1966      * &lt;p&gt;May also be refered to as &lt;code&gt;&lt;b&gt;prev()&lt;/b&gt;&lt;/code&gt;&lt;/p&gt;
1967      * &lt;p&gt;Note that this is limited to siblings, and if no siblings of the item match, &lt;code&gt;null&lt;/code&gt; is returned. Contrast with {@link #previousNode}&lt;/p&gt;
1968      * @param {String} selector Optional. A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding items.
1969      * @returns The previous sibling (or the previous sibling which matches the selector). Returns null if there is no matching sibling.
1970      */
1971     previousSibling: function(selector) {
1972         var o = this.ownerCt, it, idx, c;
1973         if (o) {
1974             it = o.items;
1975             idx = it.indexOf(this);
1976             if (idx != -1) {
1977                 if (selector) {
1978                     for (--idx; idx &gt;= 0; idx--) {
1979                         if ((c = it.getAt(idx)).is(selector)) {
1980                             return c;
1981                         }
1982                     }
1983                 } else {
1984                     if (idx) {
1985                         return it.getAt(--idx);
1986                     }
1987                 }
1988             }
1989         }
1990         return null;
1991     },
1992
1993 <span id='Ext-AbstractComponent-method-previousNode'>    /**
1994 </span>     * &lt;p&gt;Returns the previous node in the Component tree in tree traversal order.&lt;/p&gt;
1995      * &lt;p&gt;Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will
1996      * walk the tree in reverse order to attempt to find a match. Contrast with {@link #previousSibling}.&lt;/p&gt;
1997      * @param {String} selector Optional. A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding nodes.
1998      * @returns The previous node (or the previous node which matches the selector). Returns null if there is no matching node.
1999      */
2000     previousNode: function(selector, includeSelf) {
2001         var node = this,
2002             result,
2003             it, len, i;
2004
2005         // If asked to include self, test me
2006         if (includeSelf &amp;&amp; node.is(selector)) {
2007             return node;
2008         }
2009
2010         result = this.prev(selector);
2011         if (result) {
2012             return result;
2013         }
2014
2015         if (node.ownerCt) {
2016             for (it = node.ownerCt.items.items, i = Ext.Array.indexOf(it, node) - 1; i &gt; -1; i--) {
2017                 if (it[i].query) {
2018                     result = it[i].query(selector);
2019                     result = result[result.length - 1];
2020                     if (result) {
2021                         return result;
2022                     }
2023                 }
2024             }
2025             return node.ownerCt.previousNode(selector, true);
2026         }
2027     },
2028
2029 <span id='Ext-AbstractComponent-method-nextNode'>    /**
2030 </span>     * &lt;p&gt;Returns the next node in the Component tree in tree traversal order.&lt;/p&gt;
2031      * &lt;p&gt;Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will
2032      * walk the tree to attempt to find a match. Contrast with {@link #nextSibling}.&lt;/p&gt;
2033      * @param {String} selector Optional A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following nodes.
2034      * @returns The next node (or the next node which matches the selector). Returns null if there is no matching node.
2035      */
2036     nextNode: function(selector, includeSelf) {
2037         var node = this,
2038             result,
2039             it, len, i;
2040
2041         // If asked to include self, test me
2042         if (includeSelf &amp;&amp; node.is(selector)) {
2043             return node;
2044         }
2045
2046         result = this.next(selector);
2047         if (result) {
2048             return result;
2049         }
2050
2051         if (node.ownerCt) {
2052             for (it = node.ownerCt.items, i = it.indexOf(node) + 1, it = it.items, len = it.length; i &lt; len; i++) {
2053                 if (it[i].down) {
2054                     result = it[i].down(selector);
2055                     if (result) {
2056                         return result;
2057                     }
2058                 }
2059             }
2060             return node.ownerCt.nextNode(selector);
2061         }
2062     },
2063
2064 <span id='Ext-AbstractComponent-method-getId'>    /**
2065 </span>     * Retrieves the id of this component.
2066      * Will autogenerate an id if one has not already been set.
2067      */
2068     getId : function() {
2069         return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));
2070     },
2071
2072     getItemId : function() {
2073         return this.itemId || this.id;
2074     },
2075
2076 <span id='Ext-AbstractComponent-method-getEl'>    /**
2077 </span>     * Retrieves the top level element representing this component.
2078      */
2079     getEl : function() {
2080         return this.el;
2081     },
2082
2083 <span id='Ext-AbstractComponent-method-getTargetEl'>    /**
2084 </span>     * This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.
2085      * @private
2086      */
2087     getTargetEl: function() {
2088         return this.frameBody || this.el;
2089     },
2090
2091 <span id='Ext-AbstractComponent-method-isXType'>    /**
2092 </span>     * &lt;p&gt;Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
2093      * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).&lt;/p&gt;
2094      * &lt;p&gt;&lt;b&gt;If using your own subclasses, be aware that a Component must register its own xtype
2095      * to participate in determination of inherited xtypes.&lt;/b&gt;&lt;/p&gt;
2096      * &lt;p&gt;For a list of all available xtypes, see the {@link Ext.Component} header.&lt;/p&gt;
2097      * &lt;p&gt;Example usage:&lt;/p&gt;
2098      * &lt;pre&gt;&lt;code&gt;
2099 var t = new Ext.form.field.Text();
2100 var isText = t.isXType('textfield');        // true
2101 var isBoxSubclass = t.isXType('field');       // true, descended from Ext.form.field.Base
2102 var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance
2103 &lt;/code&gt;&lt;/pre&gt;
2104      * @param {String} xtype The xtype to check for this Component
2105      * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
2106      * the default), or true to check whether this Component is directly of the specified xtype.
2107      * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
2108      */
2109     isXType: function(xtype, shallow) {
2110         //assume a string by default
2111         if (Ext.isFunction(xtype)) {
2112             xtype = xtype.xtype;
2113             //handle being passed the class, e.g. Ext.Component
2114         } else if (Ext.isObject(xtype)) {
2115             xtype = xtype.statics().xtype;
2116             //handle being passed an instance
2117         }
2118
2119         return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1: this.self.xtype == xtype;
2120     },
2121
2122 <span id='Ext-AbstractComponent-method-getXTypes'>    /**
2123 </span>     * &lt;p&gt;Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
2124      * available xtypes, see the {@link Ext.Component} header.&lt;/p&gt;
2125      * &lt;p&gt;&lt;b&gt;If using your own subclasses, be aware that a Component must register its own xtype
2126      * to participate in determination of inherited xtypes.&lt;/b&gt;&lt;/p&gt;
2127      * &lt;p&gt;Example usage:&lt;/p&gt;
2128      * &lt;pre&gt;&lt;code&gt;
2129 var t = new Ext.form.field.Text();
2130 alert(t.getXTypes());  // alerts 'component/field/textfield'
2131 &lt;/code&gt;&lt;/pre&gt;
2132      * @return {String} The xtype hierarchy string
2133      */
2134     getXTypes: function() {
2135         var self = this.self,
2136             xtypes      = [],
2137             parentPrototype  = this,
2138             xtype;
2139
2140         if (!self.xtypes) {
2141             while (parentPrototype &amp;&amp; Ext.getClass(parentPrototype)) {
2142                 xtype = Ext.getClass(parentPrototype).xtype;
2143
2144                 if (xtype !== undefined) {
2145                     xtypes.unshift(xtype);
2146                 }
2147
2148                 parentPrototype = parentPrototype.superclass;
2149             }
2150
2151             self.xtypeChain = xtypes;
2152             self.xtypes = xtypes.join('/');
2153         }
2154
2155         return self.xtypes;
2156     },
2157
2158 <span id='Ext-AbstractComponent-method-update'>    /**
2159 </span>     * Update the content area of a component.
2160      * @param {Mixed} htmlOrData
2161      * If this component has been configured with a template via the tpl config
2162      * then it will use this argument as data to populate the template.
2163      * If this component was not configured with a template, the components
2164      * content area will be updated via Ext.core.Element update
2165      * @param {Boolean} loadScripts
2166      * (optional) Only legitimate when using the html configuration. Defaults to false
2167      * @param {Function} callback
2168      * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading
2169      */
2170     update : function(htmlOrData, loadScripts, cb) {
2171         var me = this;
2172
2173         if (me.tpl &amp;&amp; !Ext.isString(htmlOrData)) {
2174             me.data = htmlOrData;
2175             if (me.rendered) {
2176                 me.tpl[me.tplWriteMode](me.getTargetEl(), htmlOrData || {});
2177             }
2178         } else {
2179             me.html = Ext.isObject(htmlOrData) ? Ext.core.DomHelper.markup(htmlOrData) : htmlOrData;
2180             if (me.rendered) {
2181                 me.getTargetEl().update(me.html, loadScripts, cb);
2182             }
2183         }
2184
2185         if (me.rendered) {
2186             me.doComponentLayout();
2187         }
2188     },
2189
2190 <span id='Ext-AbstractComponent-method-setVisible'>    /**
2191 </span>     * Convenience function to hide or show this component by boolean.
2192      * @param {Boolean} visible True to show, false to hide
2193      * @return {Ext.Component} this
2194      */
2195     setVisible : function(visible) {
2196         return this[visible ? 'show': 'hide']();
2197     },
2198
2199 <span id='Ext-AbstractComponent-method-isVisible'>    /**
2200 </span>     * Returns true if this component is visible.
2201      * @param {Boolean} deep. &lt;p&gt;Optional. Pass &lt;code&gt;true&lt;/code&gt; to interrogate the visibility status of all
2202      * parent Containers to determine whether this Component is truly visible to the user.&lt;/p&gt;
2203      * &lt;p&gt;Generally, to determine whether a Component is hidden, the no argument form is needed. For example
2204      * when creating dynamically laid out UIs in a hidden Container before showing them.&lt;/p&gt;
2205      * @return {Boolean} True if this component is visible, false otherwise.
2206      */
2207     isVisible: function(deep) {
2208         var me = this,
2209             child = me,
2210             visible = !me.hidden,
2211             ancestor = me.ownerCt;
2212
2213         // Clear hiddenOwnerCt property
2214         me.hiddenAncestor = false;
2215         if (me.destroyed) {
2216             return false;
2217         }
2218
2219         if (deep &amp;&amp; visible &amp;&amp; me.rendered &amp;&amp; ancestor) {
2220             while (ancestor) {
2221                 // If any ancestor is hidden, then this is hidden.
2222                 // If an ancestor Panel (only Panels have a collapse method) is collapsed,
2223                 // then its layoutTarget (body) is hidden, so this is hidden unless its within a
2224                 // docked item; they are still visible when collapsed (Unless they themseves are hidden)
2225                 if (ancestor.hidden || (ancestor.collapsed &amp;&amp;
2226                         !(ancestor.getDockedItems &amp;&amp; Ext.Array.contains(ancestor.getDockedItems(), child)))) {
2227                     // Store hiddenOwnerCt property if needed
2228                     me.hiddenAncestor = ancestor;
2229                     visible = false;
2230                     break;
2231                 }
2232                 child = ancestor;
2233                 ancestor = ancestor.ownerCt;
2234             }
2235         }
2236         return visible;
2237     },
2238
2239 <span id='Ext-AbstractComponent-method-enable'>    /**
2240 </span>     * Enable the component
2241      * @param {Boolean} silent
2242      * Passing false will supress the 'enable' event from being fired.
2243      */
2244     enable: function(silent) {
2245         var me = this;
2246
2247         if (me.rendered) {
2248             me.el.removeCls(me.disabledCls);
2249             me.el.dom.disabled = false;
2250             me.onEnable();
2251         }
2252
2253         me.disabled = false;
2254
2255         if (silent !== true) {
2256             me.fireEvent('enable', me);
2257         }
2258
2259         return me;
2260     },
2261
2262 <span id='Ext-AbstractComponent-method-disable'>    /**
2263 </span>     * Disable the component.
2264      * @param {Boolean} silent
2265      * Passing true, will supress the 'disable' event from being fired.
2266      */
2267     disable: function(silent) {
2268         var me = this;
2269
2270         if (me.rendered) {
2271             me.el.addCls(me.disabledCls);
2272             me.el.dom.disabled = true;
2273             me.onDisable();
2274         }
2275
2276         me.disabled = true;
2277
2278         if (silent !== true) {
2279             me.fireEvent('disable', me);
2280         }
2281
2282         return me;
2283     },
2284
2285     // @private
2286     onEnable: function() {
2287         if (this.maskOnDisable) {
2288             this.el.unmask();
2289         }
2290     },
2291
2292     // @private
2293     onDisable : function() {
2294         if (this.maskOnDisable) {
2295             this.el.mask();
2296         }
2297     },
2298
2299 <span id='Ext-AbstractComponent-method-isDisabled'>    /**
2300 </span>     * Method to determine whether this Component is currently disabled.
2301      * @return {Boolean} the disabled state of this Component.
2302      */
2303     isDisabled : function() {
2304         return this.disabled;
2305     },
2306
2307 <span id='Ext-AbstractComponent-method-setDisabled'>    /**
2308 </span>     * Enable or disable the component.
2309      * @param {Boolean} disabled
2310      */
2311     setDisabled : function(disabled) {
2312         return this[disabled ? 'disable': 'enable']();
2313     },
2314
2315 <span id='Ext-AbstractComponent-method-isHidden'>    /**
2316 </span>     * Method to determine whether this Component is currently set to hidden.
2317      * @return {Boolean} the hidden state of this Component.
2318      */
2319     isHidden : function() {
2320         return this.hidden;
2321     },
2322
2323 <span id='Ext-AbstractComponent-method-addCls'>    /**
2324 </span>     * Adds a CSS class to the top level element representing this component.
2325      * @param {String} cls The CSS class name to add
2326      * @return {Ext.Component} Returns the Component to allow method chaining.
2327      */
2328     addCls : function(className) {
2329         var me = this;
2330         if (!className) {
2331             return me;
2332         }
2333         if (!Ext.isArray(className)){
2334             className = className.replace(me.trimRe, '').split(me.spacesRe);
2335         }
2336         if (me.rendered) {
2337             me.el.addCls(className);
2338         }
2339         else {
2340             me.additionalCls = Ext.Array.unique(me.additionalCls.concat(className));
2341         }
2342         return me;
2343     },
2344
2345 <span id='Ext-AbstractComponent-method-addClass'>    /**
2346 </span>     * @deprecated 4.0 Replaced by {@link #addCls}
2347      * Adds a CSS class to the top level element representing this component.
2348      * @param {String} cls The CSS class name to add
2349      * @return {Ext.Component} Returns the Component to allow method chaining.
2350      */
2351     addClass : function() {
2352         return this.addCls.apply(this, arguments);
2353     },
2354
2355 <span id='Ext-AbstractComponent-method-removeCls'>    /**
2356 </span>     * Removes a CSS class from the top level element representing this component.
2357      * @returns {Ext.Component} Returns the Component to allow method chaining.
2358      */
2359     removeCls : function(className) {
2360         var me = this;
2361
2362         if (!className) {
2363             return me;
2364         }
2365         if (!Ext.isArray(className)){
2366             className = className.replace(me.trimRe, '').split(me.spacesRe);
2367         }
2368         if (me.rendered) {
2369             me.el.removeCls(className);
2370         }
2371         else if (me.additionalCls.length) {
2372             Ext.each(className, function(cls) {
2373                 Ext.Array.remove(me.additionalCls, cls);
2374             });
2375         }
2376         return me;
2377     },
2378
2379     //&lt;debug&gt;
2380     removeClass : function() {
2381         if (Ext.isDefined(Ext.global.console)) {
2382             Ext.global.console.warn('Ext.Component: removeClass has been deprecated. Please use removeCls.');
2383         }
2384         return this.removeCls.apply(this, arguments);
2385     },
2386     //&lt;/debug&gt;
2387
2388     addOverCls: function() {
2389         var me = this;
2390         if (!me.disabled) {
2391             me.el.addCls(me.overCls);
2392         }
2393     },
2394
2395     removeOverCls: function() {
2396         this.el.removeCls(this.overCls);
2397     },
2398
2399     addListener : function(element, listeners, scope, options) {
2400         var me = this,
2401             fn,
2402             option;
2403
2404         if (Ext.isString(element) &amp;&amp; (Ext.isObject(listeners) || options &amp;&amp; options.element)) {
2405             if (options.element) {
2406                 fn = listeners;
2407
2408                 listeners = {};
2409                 listeners[element] = fn;
2410                 element = options.element;
2411                 if (scope) {
2412                     listeners.scope = scope;
2413                 }
2414
2415                 for (option in options) {
2416                     if (options.hasOwnProperty(option)) {
2417                         if (me.eventOptionsRe.test(option)) {
2418                             listeners[option] = options[option];
2419                         }
2420                     }
2421                 }
2422             }
2423
2424             // At this point we have a variable called element,
2425             // and a listeners object that can be passed to on
2426             if (me[element] &amp;&amp; me[element].on) {
2427                 me.mon(me[element], listeners);
2428             } else {
2429                 me.afterRenderEvents = me.afterRenderEvents || {};
2430                 if (!me.afterRenderEvents[element]) {
2431                     me.afterRenderEvents[element] = [];
2432                 }
2433                 me.afterRenderEvents[element].push(listeners);
2434             }
2435         }
2436
2437         return me.mixins.observable.addListener.apply(me, arguments);
2438     },
2439
2440     // inherit docs
2441     removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
2442         var me = this,
2443             element = managedListener.options ? managedListener.options.element : null;
2444
2445         if (element) {
2446             element = me[element];
2447             if (element &amp;&amp; element.un) {
2448                 if (isClear || (managedListener.item === item &amp;&amp; managedListener.ename === ename &amp;&amp; (!fn || managedListener.fn === fn) &amp;&amp; (!scope || managedListener.scope === scope))) {
2449                     element.un(managedListener.ename, managedListener.fn, managedListener.scope);
2450                     if (!isClear) {
2451                         Ext.Array.remove(me.managedListeners, managedListener);
2452                     }
2453                 }
2454             }
2455         } else {
2456             return me.mixins.observable.removeManagedListenerItem.apply(me, arguments);
2457         }
2458     },
2459
2460 <span id='Ext-AbstractComponent-method-getBubbleTarget'>    /**
2461 </span>     * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
2462      * @return {Ext.container.Container} the Container which owns this Component.
2463      */
2464     getBubbleTarget : function() {
2465         return this.ownerCt;
2466     },
2467
2468 <span id='Ext-AbstractComponent-method-isFloating'>    /**
2469 </span>     * Method to determine whether this Component is floating.
2470      * @return {Boolean} the floating state of this component.
2471      */
2472     isFloating : function() {
2473         return this.floating;
2474     },
2475
2476 <span id='Ext-AbstractComponent-method-isDraggable'>    /**
2477 </span>     * Method to determine whether this Component is draggable.
2478      * @return {Boolean} the draggable state of this component.
2479      */
2480     isDraggable : function() {
2481         return !!this.draggable;
2482     },
2483
2484 <span id='Ext-AbstractComponent-method-isDroppable'>    /**
2485 </span>     * Method to determine whether this Component is droppable.
2486      * @return {Boolean} the droppable state of this component.
2487      */
2488     isDroppable : function() {
2489         return !!this.droppable;
2490     },
2491
2492 <span id='Ext-AbstractComponent-method-onAdded'>    /**
2493 </span>     * @private
2494      * Method to manage awareness of when components are added to their
2495      * respective Container, firing an added event.
2496      * References are established at add time rather than at render time.
2497      * @param {Ext.container.Container} container Container which holds the component
2498      * @param {number} pos Position at which the component was added
2499      */
2500     onAdded : function(container, pos) {
2501         this.ownerCt = container;
2502         this.fireEvent('added', this, container, pos);
2503     },
2504
2505 <span id='Ext-AbstractComponent-method-onRemoved'>    /**
2506 </span>     * @private
2507      * Method to manage awareness of when components are removed from their
2508      * respective Container, firing an removed event. References are properly
2509      * cleaned up after removing a component from its owning container.
2510      */
2511     onRemoved : function() {
2512         var me = this;
2513
2514         me.fireEvent('removed', me, me.ownerCt);
2515         delete me.ownerCt;
2516     },
2517
2518     // @private
2519     beforeDestroy : Ext.emptyFn,
2520     // @private
2521     // @private
2522     onResize : Ext.emptyFn,
2523
2524 <span id='Ext-AbstractComponent-method-setSize'>    /**
2525 </span>     * Sets the width and height of this Component. This method fires the {@link #resize} event. This method can accept
2526      * either width and height as separate arguments, or you can pass a size object like &lt;code&gt;{width:10, height:20}&lt;/code&gt;.
2527      * @param {Mixed} width The new width to set. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
2528      * &lt;li&gt;A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).&lt;/li&gt;
2529      * &lt;li&gt;A String used to set the CSS width style.&lt;/li&gt;
2530      * &lt;li&gt;A size object in the format &lt;code&gt;{width: widthValue, height: heightValue}&lt;/code&gt;.&lt;/li&gt;
2531      * &lt;li&gt;&lt;code&gt;undefined&lt;/code&gt; to leave the width unchanged.&lt;/li&gt;
2532      * &lt;/ul&gt;&lt;/div&gt;
2533      * @param {Mixed} height The new height to set (not required if a size object is passed as the first arg).
2534      * This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
2535      * &lt;li&gt;A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).&lt;/li&gt;
2536      * &lt;li&gt;A String used to set the CSS height style. Animation may &lt;b&gt;not&lt;/b&gt; be used.&lt;/li&gt;
2537      * &lt;li&gt;&lt;code&gt;undefined&lt;/code&gt; to leave the height unchanged.&lt;/li&gt;
2538      * &lt;/ul&gt;&lt;/div&gt;
2539      * @return {Ext.Component} this
2540      */
2541     setSize : function(width, height) {
2542         var me = this,
2543             layoutCollection;
2544
2545         // support for standard size objects
2546         if (Ext.isObject(width)) {
2547             height = width.height;
2548             width  = width.width;
2549         }
2550
2551         // Constrain within configured maxima
2552         if (Ext.isNumber(width)) {
2553             width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
2554         }
2555         if (Ext.isNumber(height)) {
2556             height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
2557         }
2558
2559         if (!me.rendered || !me.isVisible()) {
2560             // If an ownerCt is hidden, add my reference onto the layoutOnShow stack.  Set the needsLayout flag.
2561             if (me.hiddenAncestor) {
2562                 layoutCollection = me.hiddenAncestor.layoutOnShow;
2563                 layoutCollection.remove(me);
2564                 layoutCollection.add(me);
2565             }
2566             me.needsLayout = {
2567                 width: width,
2568                 height: height,
2569                 isSetSize: true
2570             };
2571             if (!me.rendered) {
2572                 me.width  = (width !== undefined) ? width : me.width;
2573                 me.height = (height !== undefined) ? height : me.height;
2574             }
2575             return me;
2576         }
2577         me.doComponentLayout(width, height, true);
2578
2579         return me;
2580     },
2581
2582     isFixedWidth: function() {
2583         var me = this,
2584             layoutManagedWidth = me.layoutManagedWidth;
2585
2586         if (Ext.isDefined(me.width) || layoutManagedWidth == 1) {
2587             return true;
2588         }
2589         if (layoutManagedWidth == 2) {
2590             return false;
2591         }
2592         return (me.ownerCt &amp;&amp; me.ownerCt.isFixedWidth());
2593     },
2594
2595     isFixedHeight: function() {
2596         var me = this,
2597             layoutManagedHeight = me.layoutManagedHeight;
2598
2599         if (Ext.isDefined(me.height) || layoutManagedHeight == 1) {
2600             return true;
2601         }
2602         if (layoutManagedHeight == 2) {
2603             return false;
2604         }
2605         return (me.ownerCt &amp;&amp; me.ownerCt.isFixedHeight());
2606     },
2607
2608     setCalculatedSize : function(width, height, callingContainer) {
2609         var me = this,
2610             layoutCollection;
2611
2612         // support for standard size objects
2613         if (Ext.isObject(width)) {
2614             callingContainer = width.ownerCt;
2615             height = width.height;
2616             width  = width.width;
2617         }
2618
2619         // Constrain within configured maxima
2620         if (Ext.isNumber(width)) {
2621             width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
2622         }
2623         if (Ext.isNumber(height)) {
2624             height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
2625         }
2626
2627         if (!me.rendered || !me.isVisible()) {
2628             // If an ownerCt is hidden, add my reference onto the layoutOnShow stack.  Set the needsLayout flag.
2629             if (me.hiddenAncestor) {
2630                 layoutCollection = me.hiddenAncestor.layoutOnShow;
2631                 layoutCollection.remove(me);
2632                 layoutCollection.add(me);
2633             }
2634             me.needsLayout = {
2635                 width: width,
2636                 height: height,
2637                 isSetSize: false,
2638                 ownerCt: callingContainer
2639             };
2640             return me;
2641         }
2642         me.doComponentLayout(width, height, false, callingContainer);
2643
2644         return me;
2645     },
2646
2647 <span id='Ext-AbstractComponent-method-doComponentLayout'>    /**
2648 </span>     * This method needs to be called whenever you change something on this component that requires the Component's
2649      * layout to be recalculated.
2650      * @return {Ext.container.Container} this
2651      */
2652     doComponentLayout : function(width, height, isSetSize, callingContainer) {
2653         var me = this,
2654             componentLayout = me.getComponentLayout(),
2655             lastComponentSize = componentLayout.lastComponentSize || {
2656                 width: undefined,
2657                 height: undefined
2658             };
2659
2660         // collapsed state is not relevant here, so no testing done.
2661         // Only Panels have a collapse method, and that just sets the width/height such that only
2662         // a single docked Header parallel to the collapseTo side are visible, and the Panel body is hidden.
2663         if (me.rendered &amp;&amp; componentLayout) {
2664
2665
2666             // If no width passed, then only insert a value if the Component is NOT ALLOWED to autowidth itself.
2667             if (!Ext.isDefined(width)) {
2668                 if (me.isFixedWidth()) {
2669                     width = Ext.isDefined(me.width) ? me.width : lastComponentSize.width;
2670                 }
2671             }
2672
2673             // If no height passed, then only insert a value if the Component is NOT ALLOWED to autoheight itself.
2674             if (!Ext.isDefined(height)) {
2675                 if (me.isFixedHeight()) {
2676                     height = Ext.isDefined(me.height) ? me.height : lastComponentSize.height;
2677                 }
2678             }
2679
2680             if (isSetSize) {
2681                 me.width = width;
2682                 me.height = height;
2683             }
2684
2685             componentLayout.layout(width, height, isSetSize, callingContainer);
2686         }
2687         return me;
2688     },
2689
2690 <span id='Ext-AbstractComponent-method-forceComponentLayout'>    /**
2691 </span>     * Forces this component to redo its componentLayout.
2692      */
2693     forceComponentLayout: function () {
2694         this.doComponentLayout();
2695     },
2696
2697     // @private
2698     setComponentLayout : function(layout) {
2699         var currentLayout = this.componentLayout;
2700         if (currentLayout &amp;&amp; currentLayout.isLayout &amp;&amp; currentLayout != layout) {
2701             currentLayout.setOwner(null);
2702         }
2703         this.componentLayout = layout;
2704         layout.setOwner(this);
2705     },
2706
2707     getComponentLayout : function() {
2708         var me = this;
2709
2710         if (!me.componentLayout || !me.componentLayout.isLayout) {
2711             me.setComponentLayout(Ext.layout.Layout.create(me.componentLayout, 'autocomponent'));
2712         }
2713         return me.componentLayout;
2714     },
2715
2716 <span id='Ext-AbstractComponent-method-afterComponentLayout'>    /**
2717 </span>     * @param {Number} adjWidth The box-adjusted width that was set
2718      * @param {Number} adjHeight The box-adjusted height that was set
2719      * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently
2720      * @param {Ext.Component} callingContainer Container requesting the layout. Only used when isSetSize is false.
2721      */
2722     afterComponentLayout: function(width, height, isSetSize, callingContainer) {
2723         this.fireEvent('resize', this, width, height);
2724     },
2725
2726 <span id='Ext-AbstractComponent-method-beforeComponentLayout'>    /**
2727 </span>     * Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout
2728      * from being executed.
2729      * @param {Number} adjWidth The box-adjusted width that was set
2730      * @param {Number} adjHeight The box-adjusted height that was set
2731      * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently
2732      * @param {Ext.Component} callingContainer Container requesting sent the layout. Only used when isSetSize is false.
2733      */
2734     beforeComponentLayout: function(width, height, isSetSize, callingContainer) {
2735         return true;
2736     },
2737
2738 <span id='Ext-AbstractComponent-method-setPosition'>    /**
2739 </span>     * Sets the left and top of the component.  To set the page XY position instead, use
2740      * {@link Ext.Component#setPagePosition setPagePosition}.
2741      * This method fires the {@link #move} event.
2742      * @param {Number} left The new left
2743      * @param {Number} top The new top
2744      * @return {Ext.Component} this
2745      */
2746     setPosition : function(x, y) {
2747         var me = this;
2748
2749         if (Ext.isObject(x)) {
2750             y = x.y;
2751             x = x.x;
2752         }
2753
2754         if (!me.rendered) {
2755             return me;
2756         }
2757
2758         if (x !== undefined || y !== undefined) {
2759             me.el.setBox(x, y);
2760             me.onPosition(x, y);
2761             me.fireEvent('move', me, x, y);
2762         }
2763         return me;
2764     },
2765
2766     /* @private
2767      * Called after the component is moved, this method is empty by default but can be implemented by any
2768      * subclass that needs to perform custom logic after a move occurs.
2769      * @param {Number} x The new x position
2770      * @param {Number} y The new y position
2771      */
2772     onPosition: Ext.emptyFn,
2773
2774 <span id='Ext-AbstractComponent-method-setWidth'>    /**
2775 </span>     * Sets the width of the component.  This method fires the {@link #resize} event.
2776      * @param {Number} width The new width to setThis may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
2777      * &lt;li&gt;A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).&lt;/li&gt;
2778      * &lt;li&gt;A String used to set the CSS width style.&lt;/li&gt;
2779      * &lt;/ul&gt;&lt;/div&gt;
2780      * @return {Ext.Component} this
2781      */
2782     setWidth : function(width) {
2783         return this.setSize(width);
2784     },
2785
2786 <span id='Ext-AbstractComponent-method-setHeight'>    /**
2787 </span>     * Sets the height of the component.  This method fires the {@link #resize} event.
2788      * @param {Number} height The new height to set. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
2789      * &lt;li&gt;A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).&lt;/li&gt;
2790      * &lt;li&gt;A String used to set the CSS height style.&lt;/li&gt;
2791      * &lt;li&gt;&lt;i&gt;undefined&lt;/i&gt; to leave the height unchanged.&lt;/li&gt;
2792      * &lt;/ul&gt;&lt;/div&gt;
2793      * @return {Ext.Component} this
2794      */
2795     setHeight : function(height) {
2796         return this.setSize(undefined, height);
2797     },
2798
2799 <span id='Ext-AbstractComponent-method-getSize'>    /**
2800 </span>     * Gets the current size of the component's underlying element.
2801      * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
2802      */
2803     getSize : function() {
2804         return this.el.getSize();
2805     },
2806
2807 <span id='Ext-AbstractComponent-method-getWidth'>    /**
2808 </span>     * Gets the current width of the component's underlying element.
2809      * @return {Number}
2810      */
2811     getWidth : function() {
2812         return this.el.getWidth();
2813     },
2814
2815 <span id='Ext-AbstractComponent-method-getHeight'>    /**
2816 </span>     * Gets the current height of the component's underlying element.
2817      * @return {Number}
2818      */
2819     getHeight : function() {
2820         return this.el.getHeight();
2821     },
2822
2823 <span id='Ext-AbstractComponent-method-getLoader'>    /**
2824 </span>     * Gets the {@link Ext.ComponentLoader} for this Component.
2825      * @return {Ext.ComponentLoader} The loader instance, null if it doesn't exist.
2826      */
2827     getLoader: function(){
2828         var me = this,
2829             autoLoad = me.autoLoad ? (Ext.isObject(me.autoLoad) ? me.autoLoad : {url: me.autoLoad}) : null,
2830             loader = me.loader || autoLoad;
2831
2832         if (loader) {
2833             if (!loader.isLoader) {
2834                 me.loader = Ext.create('Ext.ComponentLoader', Ext.apply({
2835                     target: me,
2836                     autoLoad: autoLoad
2837                 }, loader));
2838             } else {
2839                 loader.setTarget(me);
2840             }
2841             return me.loader;
2842
2843         }
2844         return null;
2845     },
2846
2847 <span id='Ext-AbstractComponent-method-setLoading'>    /**
2848 </span>     * This method allows you to show or hide a LoadMask on top of this component.
2849      * @param {Boolean/Object/String} load True to show the default LoadMask, a config object
2850      * that will be passed to the LoadMask constructor, or a message String to show. False to
2851      * hide the current LoadMask.
2852      * @param {Boolean} targetEl True to mask the targetEl of this Component instead of the this.el.
2853      * For example, setting this to true on a Panel will cause only the body to be masked. (defaults to false)
2854      * @return {Ext.LoadMask} The LoadMask instance that has just been shown.
2855      */
2856     setLoading : function(load, targetEl) {
2857         var me = this,
2858             config;
2859
2860         if (me.rendered) {
2861             if (load !== false &amp;&amp; !me.collapsed) {
2862                 if (Ext.isObject(load)) {
2863                     config = load;
2864                 }
2865                 else if (Ext.isString(load)) {
2866                     config = {msg: load};
2867                 }
2868                 else {
2869                     config = {};
2870                 }
2871                 me.loadMask = me.loadMask || Ext.create('Ext.LoadMask', targetEl ? me.getTargetEl() : me.el, config);
2872                 me.loadMask.show();
2873             } else if (me.loadMask) {
2874                 Ext.destroy(me.loadMask);
2875                 me.loadMask = null;
2876             }
2877         }
2878
2879         return me.loadMask;
2880     },
2881
2882 <span id='Ext-AbstractComponent-method-setDocked'>    /**
2883 </span>     * Sets the dock position of this component in its parent panel. Note that
2884      * this only has effect if this item is part of the dockedItems collection
2885      * of a parent that has a DockLayout (note that any Panel has a DockLayout
2886      * by default)
2887      * @return {Component} this
2888      */
2889     setDocked : function(dock, layoutParent) {
2890         var me = this;
2891
2892         me.dock = dock;
2893         if (layoutParent &amp;&amp; me.ownerCt &amp;&amp; me.rendered) {
2894             me.ownerCt.doComponentLayout();
2895         }
2896         return me;
2897     },
2898
2899     onDestroy : function() {
2900         var me = this;
2901
2902         if (me.monitorResize &amp;&amp; Ext.EventManager.resizeEvent) {
2903             Ext.EventManager.resizeEvent.removeListener(me.setSize, me);
2904         }
2905         Ext.destroy(me.componentLayout, me.loadMask);
2906     },
2907
2908 <span id='Ext-AbstractComponent-method-destroy'>    /**
2909 </span>     * Destroys the Component.
2910      */
2911     destroy : function() {
2912         var me = this;
2913
2914         if (!me.isDestroyed) {
2915             if (me.fireEvent('beforedestroy', me) !== false) {
2916                 me.destroying = true;
2917                 me.beforeDestroy();
2918
2919                 if (me.floating) {
2920                     delete me.floatParent;
2921                     // A zIndexManager is stamped into a *floating* Component when it is added to a Container.
2922                     // If it has no zIndexManager at render time, it is assigned to the global Ext.WindowManager instance.
2923                     if (me.zIndexManager) {
2924                         me.zIndexManager.unregister(me);
2925                     }
2926                 } else if (me.ownerCt &amp;&amp; me.ownerCt.remove) {
2927                     me.ownerCt.remove(me, false);
2928                 }
2929
2930                 me.onDestroy();
2931
2932                 // Attempt to destroy all plugins
2933                 Ext.destroy(me.plugins);
2934
2935                 if (me.rendered) {
2936                     me.el.remove();
2937                 }
2938
2939                 Ext.ComponentManager.unregister(me);
2940                 me.fireEvent('destroy', me);
2941
2942                 me.mixins.state.destroy.call(me);
2943
2944                 me.clearListeners();
2945                 me.destroying = false;
2946                 me.isDestroyed = true;
2947             }
2948         }
2949     },
2950
2951 <span id='Ext-AbstractComponent-method-getPlugin'>    /**
2952 </span>     * Retrieves a plugin by its pluginId which has been bound to this
2953      * component.
2954      * @returns {Ext.AbstractPlugin} pluginInstance
2955      */
2956     getPlugin: function(pluginId) {
2957         var i = 0,
2958             plugins = this.plugins,
2959             ln = plugins.length;
2960         for (; i &lt; ln; i++) {
2961             if (plugins[i].pluginId === pluginId) {
2962                 return plugins[i];
2963             }
2964         }
2965     },
2966
2967 <span id='Ext-AbstractComponent-method-isDescendantOf'>    /**
2968 </span>     * Determines whether this component is the descendant of a particular container.
2969      * @param {Ext.Container} container
2970      * @returns {Boolean} isDescendant
2971      */
2972     isDescendantOf: function(container) {
2973         return !!this.findParentBy(function(p){
2974             return p === container;
2975         });
2976     }
2977 }, function() {
2978     this.createAlias({
2979         on: 'addListener',
2980         prev: 'previousSibling',
2981         next: 'nextSibling'
2982     });
2983 });
2984 </pre>
2985 </body>
2986 </html>