docs/source/AbstractComponent.html

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