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