docs/source/AbstractComponent.html

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