X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..refs/heads/master:/docs/source/AbstractComponent.html diff --git a/docs/source/AbstractComponent.html b/docs/source/AbstractComponent.html index a36fbdf3..bf4dd30d 100644 --- a/docs/source/AbstractComponent.html +++ b/docs/source/AbstractComponent.html @@ -1,13 +1,33 @@ -Sencha Documentation Project
/**
- * @class Ext.AbstractComponent
- * <p>An abstract base class which provides shared methods for Components across the Sencha product line.</p>
- * <p>Please refer to sub class's documentation</p>
- * @constructor
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
+ * An abstract base class which provides shared methods for Components across the Sencha product line.
+ *
+ * Please refer to sub class's documentation
+ * @private
  */
-
 Ext.define('Ext.AbstractComponent', {
 
     /* Begin Definitions */
+    requires: [
+        'Ext.ComponentQuery',
+        'Ext.ComponentManager'
+    ],
 
     mixins: {
         observable: 'Ext.util.Observable',
@@ -15,23 +35,20 @@ Ext.define('Ext.AbstractComponent', {
         state: 'Ext.state.Stateful'
     },
 
-    requires: [
+    // The "uses" property specifies class which are used in an instantiated AbstractComponent.
+    // They do *not* have to be loaded before this class may be defined - that is what "requires" is for.
+    uses: [
         'Ext.PluginManager',
         'Ext.ComponentManager',
-        'Ext.core.Element',
-        'Ext.core.DomHelper',
+        'Ext.Element',
+        'Ext.DomHelper',
         'Ext.XTemplate',
         'Ext.ComponentQuery',
-        'Ext.LoadMask',
         'Ext.ComponentLoader',
         'Ext.EventManager',
         'Ext.layout.Layout',
-        'Ext.layout.component.Auto'
-    ],
-
-    // Please remember to add dependencies whenever you use it
-    // I had to fix these many times already
-    uses: [
+        'Ext.layout.component.Auto',
+        'Ext.LoadMask',
         'Ext.ZIndexManager'
     ],
 
@@ -47,283 +64,420 @@ Ext.define('Ext.AbstractComponent', {
         return ++Ext.AbstractComponent.AUTO_ID;
     },
 
+
     /**
      * @cfg {String} id
-     * <p>The <b><u>unique id of this component instance</u></b> (defaults to an {@link #getId auto-assigned id}).</p>
-     * <p>It should not be necessary to use this configuration except for singleton objects in your application.
-     * Components created with an id may be accessed globally using {@link Ext#getCmp Ext.getCmp}.</p>
-     * <p>Instead of using assigned ids, use the {@link #itemId} config, and {@link Ext.ComponentQuery ComponentQuery} which
-     * provides selector-based searching for Sencha Components analogous to DOM querying. The {@link Ext.container.Container Container}
-     * class contains {@link Ext.container.Container#down shortcut methods} to query its descendant Components by selector.</p>
-     * <p>Note that this id will also be used as the element id for the containing HTML element
-     * that is rendered to the page for this component. This allows you to write id-based CSS
-     * rules to style the specific instance of this component uniquely, and also to select
-     * sub-elements using this component's id as the parent.</p>
-     * <p><b>Note</b>: to avoid complications imposed by a unique <tt>id</tt> also see <code>{@link #itemId}</code>.</p>
-     * <p><b>Note</b>: to access the container of a Component see <code>{@link #ownerCt}</code>.</p>
+     * The **unique id of this component instance.**
+     *
+     * It should not be necessary to use this configuration except for singleton objects in your application. Components
+     * created with an id may be accessed globally using {@link Ext#getCmp Ext.getCmp}.
+     *
+     * Instead of using assigned ids, use the {@link #itemId} config, and {@link Ext.ComponentQuery ComponentQuery}
+     * which provides selector-based searching for Sencha Components analogous to DOM querying. The {@link
+     * Ext.container.Container Container} class contains {@link Ext.container.Container#down shortcut methods} to query
+     * its descendant Components by selector.
+     *
+     * Note that this id will also be used as the element id for the containing HTML element that is rendered to the
+     * page for this component. This allows you to write id-based CSS rules to style the specific instance of this
+     * component uniquely, and also to select sub-elements using this component's id as the parent.
+     *
+     * **Note**: to avoid complications imposed by a unique id also see `{@link #itemId}`.
+     *
+     * **Note**: to access the container of a Component see `{@link #ownerCt}`.
+     *
+     * Defaults to an {@link #getId auto-assigned id}.
      */
 
     /**
      * @cfg {String} itemId
-     * <p>An <tt>itemId</tt> can be used as an alternative way to get a reference to a component
-     * when no object reference is available.  Instead of using an <code>{@link #id}</code> with
-     * {@link Ext}.{@link Ext#getCmp getCmp}, use <code>itemId</code> with
+     * An itemId can be used as an alternative way to get a reference to a component when no object reference is
+     * available. Instead of using an `{@link #id}` with {@link Ext}.{@link Ext#getCmp getCmp}, use `itemId` with
      * {@link Ext.container.Container}.{@link Ext.container.Container#getComponent getComponent} which will retrieve
-     * <code>itemId</code>'s or <tt>{@link #id}</tt>'s. Since <code>itemId</code>'s are an index to the
-     * container's internal MixedCollection, the <code>itemId</code> is scoped locally to the container --
-     * avoiding potential conflicts with {@link Ext.ComponentManager} which requires a <b>unique</b>
-     * <code>{@link #id}</code>.</p>
-     * <pre><code>
-var c = new Ext.panel.Panel({ //
-    {@link Ext.Component#height height}: 300,
-    {@link #renderTo}: document.body,
-    {@link Ext.container.Container#layout layout}: 'auto',
-    {@link Ext.container.Container#items items}: [
-        {
-            itemId: 'p1',
-            {@link Ext.panel.Panel#title title}: 'Panel 1',
-            {@link Ext.Component#height height}: 150
-        },
-        {
-            itemId: 'p2',
-            {@link Ext.panel.Panel#title title}: 'Panel 2',
-            {@link Ext.Component#height height}: 150
-        }
-    ]
-})
-p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
-p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling
-     * </code></pre>
-     * <p>Also see <tt>{@link #id}</tt>, <code>{@link #query}</code>, <code>{@link #down}</code> and <code>{@link #child}</code>.</p>
-     * <p><b>Note</b>: to access the container of an item see <tt>{@link #ownerCt}</tt>.</p>
+     * `itemId`'s or {@link #id}'s. Since `itemId`'s are an index to the container's internal MixedCollection, the
+     * `itemId` is scoped locally to the container -- avoiding potential conflicts with {@link Ext.ComponentManager}
+     * which requires a **unique** `{@link #id}`.
+     *
+     *     var c = new Ext.panel.Panel({ //
+     *         {@link Ext.Component#height height}: 300,
+     *         {@link #renderTo}: document.body,
+     *         {@link Ext.container.Container#layout layout}: 'auto',
+     *         {@link Ext.container.Container#items items}: [
+     *             {
+     *                 itemId: 'p1',
+     *                 {@link Ext.panel.Panel#title title}: 'Panel 1',
+     *                 {@link Ext.Component#height height}: 150
+     *             },
+     *             {
+     *                 itemId: 'p2',
+     *                 {@link Ext.panel.Panel#title title}: 'Panel 2',
+     *                 {@link Ext.Component#height height}: 150
+     *             }
+     *         ]
+     *     })
+     *     p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
+     *     p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling
+     *
+     * Also see {@link #id}, `{@link Ext.container.Container#query}`, `{@link Ext.container.Container#down}` and
+     * `{@link Ext.container.Container#child}`.
+     *
+     * **Note**: to access the container of an item see {@link #ownerCt}.
      */
 
     /**
-     * This Component's owner {@link Ext.container.Container Container} (defaults to undefined, and is set automatically when
-     * this Component is added to a Container).  Read-only.
-     * <p><b>Note</b>: to access items within the Container see <tt>{@link #itemId}</tt>.</p>
-     * @type Ext.Container
-     * @property ownerCt
+     * @property {Ext.Container} ownerCt
+     * This Component's owner {@link Ext.container.Container Container} (is set automatically
+     * when this Component is added to a Container). Read-only.
+     *
+     * **Note**: to access items within the Container see {@link #itemId}.
+     */
+
+    /**
+     * @property {Boolean} layoutManagedWidth
+     * @private
+     * Flag set by the container layout to which this Component is added.
+     * If the layout manages this Component's width, it sets the value to 1.
+     * If it does NOT manage the width, it sets it to 2.
+     * If the layout MAY affect the width, but only if the owning Container has a fixed width, this is set to 0.
+     */
+
+    /**
+     * @property {Boolean} layoutManagedHeight
+     * @private
+     * Flag set by the container layout to which this Component is added.
+     * If the layout manages this Component's height, it sets the value to 1.
+     * If it does NOT manage the height, it sets it to 2.
+     * If the layout MAY affect the height, but only if the owning Container has a fixed height, this is set to 0.
      */
 
     /**
-     * @cfg {Mixed} autoEl
-     * <p>A tag name or {@link Ext.core.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
-     * encapsulate this Component.</p>
-     * <p>You do not normally need to specify this. For the base classes {@link Ext.Component} and {@link Ext.container.Container},
-     * this defaults to <b><tt>'div'</tt></b>. The more complex Sencha classes use a more complex
-     * DOM structure specified by their own {@link #renderTpl}s.</p>
-     * <p>This is intended to allow the developer to create application-specific utility Components encapsulated by
-     * different DOM elements. Example usage:</p><pre><code>
-{
-    xtype: 'component',
-    autoEl: {
-        tag: 'img',
-        src: 'http://www.example.com/example.jpg'
-    }
-}, {
-    xtype: 'component',
-    autoEl: {
-        tag: 'blockquote',
-        html: 'autoEl is cool!'
-    }
-}, {
-    xtype: 'container',
-    autoEl: 'ul',
-    cls: 'ux-unordered-list',
-    items: {
-        xtype: 'component',
-        autoEl: 'li',
-        html: 'First list item'
-    }
-}
-</code></pre>
+     * @cfg {String/Object} autoEl
+     * A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
+     * encapsulate this Component.
+     *
+     * You do not normally need to specify this. For the base classes {@link Ext.Component} and
+     * {@link Ext.container.Container}, this defaults to **'div'**. The more complex Sencha classes use a more
+     * complex DOM structure specified by their own {@link #renderTpl}s.
+     *
+     * This is intended to allow the developer to create application-specific utility Components encapsulated by
+     * different DOM elements. Example usage:
+     *
+     *     {
+     *         xtype: 'component',
+     *         autoEl: {
+     *             tag: 'img',
+     *             src: 'http://www.example.com/example.jpg'
+     *         }
+     *     }, {
+     *         xtype: 'component',
+     *         autoEl: {
+     *             tag: 'blockquote',
+     *             html: 'autoEl is cool!'
+     *         }
+     *     }, {
+     *         xtype: 'container',
+     *         autoEl: 'ul',
+     *         cls: 'ux-unordered-list',
+     *         items: {
+     *             xtype: 'component',
+     *             autoEl: 'li',
+     *             html: 'First list item'
+     *         }
+     *     }
      */
 
     /**
-     * @cfg {Mixed} renderTpl
-     * <p>An {@link Ext.XTemplate XTemplate} used to create the internal structure inside this Component's
-     * encapsulating {@link #getEl Element}.</p>
-     * <p>You do not normally need to specify this. For the base classes {@link Ext.Component}
-     * and {@link Ext.container.Container}, this defaults to <b><code>null</code></b> which means that they will be initially rendered
-     * with no internal structure; they render their {@link #getEl Element} empty. The more specialized ExtJS and Touch classes
-     * which use a more complex DOM structure, provide their own template definitions.</p>
-     * <p>This is intended to allow the developer to create application-specific utility Components with customized
-     * internal structure.</p>
-     * <p>Upon rendering, any created child elements may be automatically imported into object properties using the
-     * {@link #renderSelectors} option.</p>
+     * @cfg {Ext.XTemplate/String/String[]} renderTpl
+     * An {@link Ext.XTemplate XTemplate} used to create the internal structure inside this Component's encapsulating
+     * {@link #getEl Element}.
+     *
+     * You do not normally need to specify this. For the base classes {@link Ext.Component} and
+     * {@link Ext.container.Container}, this defaults to **`null`** which means that they will be initially rendered
+     * with no internal structure; they render their {@link #getEl Element} empty. The more specialized ExtJS and Touch
+     * classes which use a more complex DOM structure, provide their own template definitions.
+     *
+     * This is intended to allow the developer to create application-specific utility Components with customized
+     * internal structure.
+     *
+     * Upon rendering, any created child elements may be automatically imported into object properties using the
+     * {@link #renderSelectors} and {@link #childEls} options.
      */
     renderTpl: null,
 
+    /**
+     * @cfg {Object} renderData
+     *
+     * The data used by {@link #renderTpl} in addition to the following property values of the component:
+     *
+     * - id
+     * - ui
+     * - uiCls
+     * - baseCls
+     * - componentCls
+     * - frame
+     *
+     * See {@link #renderSelectors} and {@link #childEls} for usage examples.
+     */
+
     /**
      * @cfg {Object} renderSelectors
-
-An object containing properties specifying {@link Ext.DomQuery DomQuery} selectors which identify child elements
-created by the render process.
-
-After the Component's internal structure is rendered according to the {@link #renderTpl}, this object is iterated through,
-and the found Elements are added as properties to the Component using the `renderSelector` property name.
-
-For example, a Component which rendered an image, and description into its element might use the following properties
-coded into its prototype:
-
-    renderTpl: '&lt;img src="{imageUrl}" class="x-image-component-img">&lt;div class="x-image-component-desc">{description}&gt;/div&lt;',
-
-    renderSelectors: {
-        image: 'img.x-image-component-img',
-        descEl: 'div.x-image-component-desc'
-    }
-
-After rendering, the Component would have a property <code>image</code> referencing its child `img` Element,
-and a property `descEl` referencing the `div` Element which contains the description.
-
-     * @markdown
+     * An object containing properties specifying {@link Ext.DomQuery DomQuery} selectors which identify child elements
+     * created by the render process.
+     *
+     * After the Component's internal structure is rendered according to the {@link #renderTpl}, this object is iterated through,
+     * and the found Elements are added as properties to the Component using the `renderSelector` property name.
+     *
+     * For example, a Component which renderes a title and description into its element:
+     *
+     *     Ext.create('Ext.Component', {
+     *         renderTo: Ext.getBody(),
+     *         renderTpl: [
+     *             '<h1 class="title">{title}</h1>',
+     *             '<p>{desc}</p>'
+     *         ],
+     *         renderData: {
+     *             title: "Error",
+     *             desc: "Something went wrong"
+     *         },
+     *         renderSelectors: {
+     *             titleEl: 'h1.title',
+     *             descEl: 'p'
+     *         },
+     *         listeners: {
+     *             afterrender: function(cmp){
+     *                 // After rendering the component will have a titleEl and descEl properties
+     *                 cmp.titleEl.setStyle({color: "red"});
+     *             }
+     *         }
+     *     });
+     *
+     * For a faster, but less flexible, alternative that achieves the same end result (properties for child elements on the
+     * Component after render), see {@link #childEls} and {@link #addChildEls}.
+     */
+
+    /**
+     * @cfg {Object[]} childEls
+     * An array describing the child elements of the Component. Each member of the array
+     * is an object with these properties:
+     *
+     * - `name` - The property name on the Component for the child element.
+     * - `itemId` - The id to combine with the Component's id that is the id of the child element.
+     * - `id` - The id of the child element.
+     *
+     * If the array member is a string, it is equivalent to `{ name: m, itemId: m }`.
+     *
+     * For example, a Component which renders a title and body text:
+     *
+     *     Ext.create('Ext.Component', {
+     *         renderTo: Ext.getBody(),
+     *         renderTpl: [
+     *             '<h1 id="{id}-title">{title}</h1>',
+     *             '<p>{msg}</p>',
+     *         ],
+     *         renderData: {
+     *             title: "Error",
+     *             msg: "Something went wrong"
+     *         },
+     *         childEls: ["title"],
+     *         listeners: {
+     *             afterrender: function(cmp){
+     *                 // After rendering the component will have a title property
+     *                 cmp.title.setStyle({color: "red"});
+     *             }
+     *         }
+     *     });
+     *
+     * A more flexible, but somewhat slower, approach is {@link #renderSelectors}.
      */
 
     /**
-     * @cfg {Mixed} renderTo
-     * <p>Specify the id of the element, a DOM element or an existing Element that this component
-     * will be rendered into.</p><div><ul>
-     * <li><b>Notes</b> : <ul>
-     * <div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of
-     * a {@link Ext.container.Container Container}. It is the responsibility of the
-     * {@link Ext.container.Container Container}'s {@link Ext.container.Container#layout layout manager}
-     * to render and manage its child items.</div>
-     * <div class="sub-desc">When using this config, a call to render() is not required.</div>
-     * </ul></li>
-     * </ul></div>
-     * <p>See <code>{@link #render}</code> also.</p>
+     * @cfg {String/HTMLElement/Ext.Element} renderTo
+     * Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.
+     *
+     * **Notes:**
+     *
+     * Do *not* use this option if the Component is to be a child item of a {@link Ext.container.Container Container}.
+     * It is the responsibility of the {@link Ext.container.Container Container}'s
+     * {@link Ext.container.Container#layout layout manager} to render and manage its child items.
+     *
+     * When using this config, a call to render() is not required.
+     *
+     * See `{@link #render}` also.
      */
 
     /**
      * @cfg {Boolean} frame
-     * <p>Specify as <code>true</code> to have the Component inject framing elements within the Component at render time to
-     * provide a graphical rounded frame around the Component content.</p>
-     * <p>This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet Explorer
-     * prior to version 9 which do not support rounded corners natively.</p>
-     * <p>The extra space taken up by this framing is available from the read only property {@link #frameSize}.</p>
+     * Specify as `true` to have the Component inject framing elements within the Component at render time to provide a
+     * graphical rounded frame around the Component content.
+     *
+     * This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet
+     * Explorer prior to version 9 which do not support rounded corners natively.
+     *
+     * The extra space taken up by this framing is available from the read only property {@link #frameSize}.
      */
 
     /**
-     * <p>Read-only property indicating the width of any framing elements which were added within the encapsulating element
-     * to provide graphical, rounded borders. See the {@link #frame} config.</p>
-     * <p> This is an object containing the frame width in pixels for all four sides of the Component containing
-     * the following properties:</p><div class="mdetail-params"><ul>
-     * <li><code>top</code> The width of the top framing element in pixels.</li>
-     * <li><code>right</code> The width of the right framing element in pixels.</li>
-     * <li><code>bottom</code> The width of the bottom framing element in pixels.</li>
-     * <li><code>left</code> The width of the left framing element in pixels.</li>
-     * </ul></div>
-     * @property frameSize
-     * @type {Object}
+     * @property {Object} frameSize
+     * Read-only property indicating the width of any framing elements which were added within the encapsulating element
+     * to provide graphical, rounded borders. See the {@link #frame} config.
+     *
+     * This is an object containing the frame width in pixels for all four sides of the Component containing the
+     * following properties:
+     *
+     * @property {Number} frameSize.top The width of the top framing element in pixels.
+     * @property {Number} frameSize.right The width of the right framing element in pixels.
+     * @property {Number} frameSize.bottom The width of the bottom framing element in pixels.
+     * @property {Number} frameSize.left The width of the left framing element in pixels.
      */
 
     /**
      * @cfg {String/Object} componentLayout
-     * <p>The sizing and positioning of a Component's internal Elements is the responsibility of
-     * the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.</p>
-     * <p>Generally, developers will not use this configuration as all provided Components which need their internal
-     * elements sizing (Such as {@link Ext.form.field.Base input fields}) come with their own componentLayout managers.</p>
-     * <p>The {@link Ext.layout.container.Auto default layout manager} will be used on instances of the base Ext.Component class
-     * which simply sizes the Component's encapsulating element to the height and width specified in the {@link #setSize} method.</p>
+     * The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout
+     * manager which sizes a Component's internal structure in response to the Component being sized.
+     *
+     * Generally, developers will not use this configuration as all provided Components which need their internal
+     * elements sizing (Such as {@link Ext.form.field.Base input fields}) come with their own componentLayout managers.
+     *
+     * The {@link Ext.layout.container.Auto default layout manager} will be used on instances of the base Ext.Component
+     * class which simply sizes the Component's encapsulating element to the height and width specified in the
+     * {@link #setSize} method.
      */
 
     /**
-     * @cfg {Mixed} tpl
-     * An <bold>{@link Ext.Template}</bold>, <bold>{@link Ext.XTemplate}</bold>
-     * or an array of strings to form an Ext.XTemplate.
-     * Used in conjunction with the <code>{@link #data}</code> and
-     * <code>{@link #tplWriteMode}</code> configurations.
+     * @cfg {Ext.XTemplate/Ext.Template/String/String[]} tpl
+     * An {@link Ext.Template}, {@link Ext.XTemplate} or an array of strings to form an Ext.XTemplate. Used in
+     * conjunction with the `{@link #data}` and `{@link #tplWriteMode}` configurations.
      */
 
     /**
-     * @cfg {Mixed} data
-     * The initial set of data to apply to the <code>{@link #tpl}</code> to
-     * update the content area of the Component.
+     * @cfg {Object} data
+     * The initial set of data to apply to the `{@link #tpl}` to update the content area of the Component.
+     */
+
+    /**
+     * @cfg {String} xtype
+     * The `xtype` configuration option can be used to optimize Component creation and rendering. It serves as a
+     * shortcut to the full componet name. For example, the component `Ext.button.Button` has an xtype of `button`.
+     *
+     * You can define your own xtype on a custom {@link Ext.Component component} by specifying the
+     * {@link Ext.Class#alias alias} config option with a prefix of `widget`. For example:
+     *
+     *     Ext.define('PressMeButton', {
+     *         extend: 'Ext.button.Button',
+     *         alias: 'widget.pressmebutton',
+     *         text: 'Press Me'
+     *     })
+     *
+     * Any Component can be created implicitly as an object config with an xtype specified, allowing it to be
+     * declared and passed into the rendering pipeline without actually being instantiated as an object. Not only is
+     * rendering deferred, but the actual creation of the object itself is also deferred, saving memory and resources
+     * until they are actually needed. In complex, nested layouts containing many Components, this can make a
+     * noticeable improvement in performance.
+     *
+     *     // Explicit creation of contained Components:
+     *     var panel = new Ext.Panel({
+     *        ...
+     *        items: [
+     *           Ext.create('Ext.button.Button', {
+     *              text: 'OK'
+     *           })
+     *        ]
+     *     };
+     *
+     *     // Implicit creation using xtype:
+     *     var panel = new Ext.Panel({
+     *        ...
+     *        items: [{
+     *           xtype: 'button',
+     *           text: 'OK'
+     *        }]
+     *     };
+     *
+     * In the first example, the button will always be created immediately during the panel's initialization. With
+     * many added Components, this approach could potentially slow the rendering of the page. In the second example,
+     * the button will not be created or rendered until the panel is actually displayed in the browser. If the panel
+     * is never displayed (for example, if it is a tab that remains hidden) then the button will never be created and
+     * will never consume any resources whatsoever.
      */
 
     /**
-     * @cfg {String} tplWriteMode The Ext.(X)Template method to use when
-     * updating the content area of the Component. Defaults to <code>'overwrite'</code>
-     * (see <code>{@link Ext.XTemplate#overwrite}</code>).
+     * @cfg {String} tplWriteMode
+     * The Ext.(X)Template method to use when updating the content area of the Component.
+     * See `{@link Ext.XTemplate#overwrite}` for information on default mode.
      */
     tplWriteMode: 'overwrite',
 
     /**
-     * @cfg {String} baseCls
-     * The base CSS class to apply to this components's element. This will also be prepended to
-     * elements within this component like Panel's body will get a class x-panel-body. This means
-     * that if you create a subclass of Panel, and you want it to get all the Panels styling for the
-     * element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this
-     * component.
+     * @cfg {String} [baseCls='x-component']
+     * The base CSS class to apply to this components's element. This will also be prepended to elements within this
+     * component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and
+     * you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use
+     * componentCls to add specific styling for this component.
      */
     baseCls: Ext.baseCSSPrefix + 'component',
 
     /**
      * @cfg {String} componentCls
-     * CSS Class to be added to a components root level element to give distinction to it
-     * via styling.
+     * CSS Class to be added to a components root level element to give distinction to it via styling.
      */
 
     /**
-     * @cfg {String} cls
-     * An optional extra CSS class that will be added to this component's Element (defaults to '').  This can be
-     * useful for adding customized styles to the component or any of its children using standard CSS rules.
+     * @cfg {String} [cls='']
+     * An optional extra CSS class that will be added to this component's Element. This can be useful
+     * for adding customized styles to the component or any of its children using standard CSS rules.
      */
 
     /**
-     * @cfg {String} overCls
-     * An optional extra CSS class that will be added to this component's Element when the mouse moves
-     * over the Element, and removed when the mouse moves out. (defaults to '').  This can be
-     * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
+     * @cfg {String} [overCls='']
+     * An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element,
+     * and removed when the mouse moves out. This can be useful for adding customized 'active' or 'hover' styles to the
+     * component or any of its children using standard CSS rules.
      */
 
     /**
-     * @cfg {String} disabledCls
+     * @cfg {String} [disabledCls='x-item-disabled']
      * CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.
      */
     disabledCls: Ext.baseCSSPrefix + 'item-disabled',
 
     /**
-     * @cfg {String/Array} ui
+     * @cfg {String/String[]} ui
      * A set style for a component. Can be a string or an Array of multiple strings (UIs)
      */
     ui: 'default',
-    
+
     /**
-     * @cfg {Array} uiCls
+     * @cfg {String[]} uiCls
      * An array of of classNames which are currently applied to this component
      * @private
      */
     uiCls: [],
-    
+
     /**
      * @cfg {String} style
-     * A custom style specification to be applied to this component's Element.  Should be a valid argument to
-     * {@link Ext.core.Element#applyStyles}.
-     * <pre><code>
-        new Ext.panel.Panel({
-            title: 'Some Title',
-            renderTo: Ext.getBody(),
-            width: 400, height: 300,
-            layout: 'form',
-            items: [{
-                xtype: 'textarea',
-                style: {
-                    width: '95%',
-                    marginBottom: '10px'
-                }
-            },
-            new Ext.button.Button({
-                text: 'Send',
-                minWidth: '100',
-                style: {
-                    marginBottom: '10px'
-                }
-            })
-            ]
-        });
-     </code></pre>
+     * A custom style specification to be applied to this component's Element. Should be a valid argument to
+     * {@link Ext.Element#applyStyles}.
+     *
+     *     new Ext.panel.Panel({
+     *         title: 'Some Title',
+     *         renderTo: Ext.getBody(),
+     *         width: 400, height: 300,
+     *         layout: 'form',
+     *         items: [{
+     *             xtype: 'textarea',
+     *             style: {
+     *                 width: '95%',
+     *                 marginBottom: '10px'
+     *             }
+     *         },
+     *         new Ext.button.Button({
+     *             text: 'Send',
+     *             minWidth: '100',
+     *             style: {
+     *                 marginBottom: '10px'
+     *             }
+     *         })
+     *         ]
+     *     });
      */
 
     /**
@@ -338,188 +492,209 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
     /**
      * @cfg {Number/String} border
-     * Specifies the border for this component. The border can be a single numeric value to apply to all sides or
-     * it can be a CSS style specification for each style, for example: '10 5 3 10'.
+     * Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can
+     * be a CSS style specification for each style, for example: '10 5 3 10'.
      */
 
     /**
      * @cfg {Number/String} padding
-     * Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or
-     * it can be a CSS style specification for each style, for example: '10 5 3 10'.
+     * Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it
+     * can be a CSS style specification for each style, for example: '10 5 3 10'.
      */
 
     /**
      * @cfg {Number/String} margin
-     * Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or
-     * it can be a CSS style specification for each style, for example: '10 5 3 10'.
+     * Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can
+     * be a CSS style specification for each style, for example: '10 5 3 10'.
      */
 
     /**
      * @cfg {Boolean} hidden
-     * Defaults to false.
+     * True to hide the component.
      */
     hidden: false,
 
     /**
      * @cfg {Boolean} disabled
-     * Defaults to false.
+     * True to disable the component.
      */
     disabled: false,
 
     /**
-     * @cfg {Boolean} draggable
+     * @cfg {Boolean} [draggable=false]
      * Allows the component to be dragged.
      */
 
     /**
-     * Read-only property indicating whether or not the component can be dragged
-     * @property draggable
-     * @type {Boolean}
+     * @property {Boolean} draggable
+     * Read-only property indicating whether or not the component can be dragged
      */
     draggable: false,
 
     /**
      * @cfg {Boolean} floating
      * Create the Component as a floating and use absolute positioning.
-     * Defaults to false.
+     *
+     * The z-index of floating Components is handled by a ZIndexManager. If you simply render a floating Component into the DOM, it will be managed
+     * by the global {@link Ext.WindowManager WindowManager}.
+     *
+     * If you include a floating Component as a child item of a Container, then upon render, ExtJS will seek an ancestor floating Component to house a new
+     * ZIndexManager instance to manage its descendant floaters. If no floating ancestor can be found, the global WindowManager will be used.
+     *
+     * When a floating Component which has a ZindexManager managing descendant floaters is destroyed, those descendant floaters will also be destroyed.
      */
     floating: false,
 
     /**
      * @cfg {String} hideMode
-     * A String which specifies how this Component's encapsulating DOM element will be hidden.
-     * Values may be<div class="mdetail-params"><ul>
-     * <li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>
-     * <li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>
-     * <li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document. This
-     * is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results
-     * in a Component having zero dimensions.</li></ul></div>
-     * Defaults to <code>'display'</code>.
+     * A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:
+     *
+     *   - `'display'` : The Component will be hidden using the `display: none` style.
+     *   - `'visibility'` : The Component will be hidden using the `visibility: hidden` style.
+     *   - `'offsets'` : The Component will be hidden by absolutely positioning it out of the visible area of the document.
+     *     This is useful when a hidden Component must maintain measurable dimensions. Hiding using `display` results in a
+     *     Component having zero dimensions.
      */
     hideMode: 'display',
 
     /**
      * @cfg {String} contentEl
-     * <p>Optional. Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content
-     * for this component.</p>
-     * <ul>
-     * <li><b>Description</b> :
-     * <div class="sub-desc">This config option is used to take an existing HTML element and place it in the layout element
-     * of a new component (it simply moves the specified DOM element <i>after the Component is rendered</i> to use as the content.</div></li>
-     * <li><b>Notes</b> :
-     * <div class="sub-desc">The specified HTML element is appended to the layout element of the component <i>after any configured
-     * {@link #html HTML} has been inserted</i>, and so the document will not contain this element at the time the {@link #render} event is fired.</div>
-     * <div class="sub-desc">The specified HTML element used will not participate in any <code><b>{@link Ext.container.Container#layout layout}</b></code>
-     * scheme that the Component may use. It is just HTML. Layouts operate on child <code><b>{@link Ext.container.Container#items items}</b></code>.</div>
-     * <div class="sub-desc">Add either the <code>x-hidden</code> or the <code>x-hide-display</code> CSS class to
-     * prevent a brief flicker of the content before it is rendered to the panel.</div></li>
-     * </ul>
+     * Specify an existing HTML element, or the `id` of an existing HTML element to use as the content for this component.
+     *
+     * This config option is used to take an existing HTML element and place it in the layout element of a new component
+     * (it simply moves the specified DOM element _after the Component is rendered_ to use as the content.
+     *
+     * **Notes:**
+     *
+     * The specified HTML element is appended to the layout element of the component _after any configured
+     * {@link #html HTML} has been inserted_, and so the document will not contain this element at the time
+     * the {@link #render} event is fired.
+     *
+     * The specified HTML element used will not participate in any **`{@link Ext.container.Container#layout layout}`**
+     * scheme that the Component may use. It is just HTML. Layouts operate on child
+     * **`{@link Ext.container.Container#items items}`**.
+     *
+     * Add either the `x-hidden` or the `x-hide-display` CSS class to prevent a brief flicker of the content before it
+     * is rendered to the panel.
      */
 
     /**
-     * @cfg {String/Object} html
-     * An HTML fragment, or a {@link Ext.core.DomHelper DomHelper} specification to use as the layout element
-     * content (defaults to ''). The HTML content is added after the component is rendered,
-     * so the document will not contain this HTML at the time the {@link #render} event is fired.
-     * This content is inserted into the body <i>before</i> any configured {@link #contentEl} is appended.
+     * @cfg {String/Object} [html='']
+     * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element content.
+     * The HTML content is added after the component is rendered, so the document will not contain this HTML at the time
+     * the {@link #render} event is fired. This content is inserted into the body _before_ any configured {@link #contentEl}
+     * is appended.
      */
 
     /**
-     * @cfg {String} styleHtmlContent
+     * @cfg {Boolean} styleHtmlContent
      * True to automatically style the html inside the content target of this component (body for panels).
-     * Defaults to false.
      */
     styleHtmlContent: false,
 
     /**
-     * @cfg {String} styleHtmlCls
+     * @cfg {String} [styleHtmlCls='x-html']
      * The class that is added to the content target when you set styleHtmlContent to true.
-     * Defaults to 'x-html'
      */
     styleHtmlCls: Ext.baseCSSPrefix + 'html',
 
     /**
      * @cfg {Number} minHeight
-     * <p>The minimum value in pixels which this Component will set its height to.</p>
-     * <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
+     * The minimum value in pixels which this Component will set its height to.
+     *
+     * **Warning:** This will override any size management applied by layout managers.
      */
     /**
      * @cfg {Number} minWidth
-     * <p>The minimum value in pixels which this Component will set its width to.</p>
-     * <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
+     * The minimum value in pixels which this Component will set its width to.
+     *
+     * **Warning:** This will override any size management applied by layout managers.
      */
     /**
      * @cfg {Number} maxHeight
-     * <p>The maximum value in pixels which this Component will set its height to.</p>
-     * <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
+     * The maximum value in pixels which this Component will set its height to.
+     *
+     * **Warning:** This will override any size management applied by layout managers.
      */
     /**
      * @cfg {Number} maxWidth
-     * <p>The maximum value in pixels which this Component will set its width to.</p>
-     * <p><b>Warning:</b> This will override any size management applied by layout managers.</p>
+     * The maximum value in pixels which this Component will set its width to.
+     *
+     * **Warning:** This will override any size management applied by layout managers.
      */
 
     /**
      * @cfg {Ext.ComponentLoader/Object} loader
-     * A configuration object or an instance of a {@link Ext.ComponentLoader} to load remote
-     * content for this Component.
+     * A configuration object or an instance of a {@link Ext.ComponentLoader} to load remote content for this Component.
      */
 
-     // @private
-     allowDomMove: true,
-
-     /**
-      * @cfg {Boolean} autoShow True to automatically show the component upon creation.
-      * This config option may only be used for {@link #floating} components or components
-      * that use {@link #autoRender}. Defaults to <tt>false</tt>.
-      */
-     autoShow: false,
+    /**
+     * @cfg {Boolean} autoShow
+     * True to automatically show the component upon creation. This config option may only be used for
+     * {@link #floating} components or components that use {@link #autoRender}. Defaults to false.
+     */
+    autoShow: false,
 
     /**
-     * @cfg {Mixed} autoRender
-     * <p>This config is intended mainly for {@link #floating} Components which may or may not be shown. Instead
-     * of using {@link #renderTo} in the configuration, and rendering upon construction, this allows a Component
-     * to render itself upon first <i>{@link #show}</i>.</p>
-     * <p>Specify as <code>true</code> to have this Component render to the document body upon first show.</p>
-     * <p>Specify as an element, or the ID of an element to have this Component render to a specific element upon first show.</p>
-     * <p><b>This defaults to <code>true</code> for the {@link Ext.window.Window Window} class.</b></p>
-     */
-     autoRender: false,
+     * @cfg {Boolean/String/HTMLElement/Ext.Element} autoRender
+     * This config is intended mainly for non-{@link #floating} Components which may or may not be shown. Instead of using
+     * {@link #renderTo} in the configuration, and rendering upon construction, this allows a Component to render itself
+     * upon first _{@link #show}_. If {@link #floating} is true, the value of this config is omited as if it is `true`.
+     *
+     * Specify as `true` to have this Component render to the document body upon first show.
+     *
+     * Specify as an element, or the ID of an element to have this Component render to a specific element upon first
+     * show.
+     *
+     * **This defaults to `true` for the {@link Ext.window.Window Window} class.**
+     */
+    autoRender: false,
+
+    needsLayout: false,
 
-     needsLayout: false,
+    // @private
+    allowDomMove: true,
 
     /**
-     * @cfg {Object/Array} plugins
-     * An object or array of objects that will provide custom functionality for this component.  The only
-     * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
-     * When a component is created, if any plugins are available, the component will call the init method on each
-     * plugin, passing a reference to itself.  Each plugin can then call methods or respond to events on the
-     * component as needed to provide its functionality.
+     * @cfg {Object/Object[]} plugins
+     * An object or array of objects that will provide custom functionality for this component. The only requirement for
+     * a valid plugin is that it contain an init method that accepts a reference of type Ext.Component. When a component
+     * is created, if any plugins are available, the component will call the init method on each plugin, passing a
+     * reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide
+     * its functionality.
      */
 
     /**
-     * Read-only property indicating whether or not the component has been rendered.
-     * @property rendered
-     * @type {Boolean}
+     * @property {Boolean} rendered
+     * Read-only property indicating whether or not the component has been rendered.
      */
     rendered: false,
 
+    /**
+     * @property {Number} componentLayoutCounter
+     * @private
+     * The number of component layout calls made on this object.
+     */
+    componentLayoutCounter: 0,
+
     weight: 0,
 
     trimRe: /^\s+|\s+$/g,
     spacesRe: /\s+/,
-    
-    
+
+
     /**
-     * This is an internal flag that you use when creating custom components.
-     * By default this is set to true which means that every component gets a mask when its disabled.
-     * Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false
-     * since they want to implement custom disable logic.
-     * @property maskOnDisable
-     * @type {Boolean}
-     */     
+     * @property {Boolean} maskOnDisable
+     * This is an internal flag that you use when creating custom components. By default this is set to true which means
+     * that every component gets a mask when its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab
+     * override this property to false since they want to implement custom disable logic.
+     */
     maskOnDisable: true,
 
+    /**
+     * Creates new Component.
+     * @param {Object} config  (optional) Config object.
+     */
     constructor : function(config) {
         var me = this,
             i, len;
@@ -531,32 +706,30 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         me.addEvents(
             /**
              * @event beforeactivate
-             * Fires before a Component has been visually activated.
-             * Returning false from an event listener can prevent the activate
-             * from occurring.
+             * Fires before a Component has been visually activated. Returning false from an event listener can prevent
+             * the activate from occurring.
              * @param {Ext.Component} this
              */
-             'beforeactivate',
+            'beforeactivate',
             /**
              * @event activate
              * Fires after a Component has been visually activated.
              * @param {Ext.Component} this
              */
-             'activate',
+            'activate',
             /**
              * @event beforedeactivate
-             * Fires before a Component has been visually deactivated.
-             * Returning false from an event listener can prevent the deactivate
-             * from occurring.
+             * Fires before a Component has been visually deactivated. Returning false from an event listener can
+             * prevent the deactivate from occurring.
              * @param {Ext.Component} this
              */
-             'beforedeactivate',
+            'beforedeactivate',
             /**
              * @event deactivate
              * Fires after a Component has been visually deactivated.
              * @param {Ext.Component} this
              */
-             'deactivate',
+            'deactivate',
             /**
              * @event added
              * Fires after a Component had been added to a Container.
@@ -564,86 +737,88 @@ and a property `descEl` referencing the `div` Element which contains the descrip
              * @param {Ext.container.Container} container Parent Container
              * @param {Number} pos position of Component
              */
-             'added',
+            'added',
             /**
              * @event disable
              * Fires after the component is disabled.
              * @param {Ext.Component} this
              */
-             'disable',
+            'disable',
             /**
              * @event enable
              * Fires after the component is enabled.
              * @param {Ext.Component} this
              */
-             'enable',
+            'enable',
             /**
              * @event beforeshow
-             * Fires before the component is shown when calling the {@link #show} method.
-             * Return false from an event handler to stop the show.
+             * Fires before the component is shown when calling the {@link #show} method. Return false from an event
+             * handler to stop the show.
              * @param {Ext.Component} this
              */
-             'beforeshow',
+            'beforeshow',
             /**
              * @event show
              * Fires after the component is shown when calling the {@link #show} method.
              * @param {Ext.Component} this
              */
-             'show',
+            'show',
             /**
              * @event beforehide
-             * Fires before the component is hidden when calling the {@link #hide} method.
-             * Return false from an event handler to stop the hide.
+             * Fires before the component is hidden when calling the {@link #hide} method. Return false from an event
+             * handler to stop the hide.
              * @param {Ext.Component} this
              */
-             'beforehide',
+            'beforehide',
             /**
              * @event hide
-             * Fires after the component is hidden.
-             * Fires after the component is hidden when calling the {@link #hide} method.
+             * Fires after the component is hidden. Fires after the component is hidden when calling the {@link #hide}
+             * method.
              * @param {Ext.Component} this
              */
-             'hide',
+            'hide',
             /**
              * @event removed
              * Fires when a component is removed from an Ext.container.Container
              * @param {Ext.Component} this
              * @param {Ext.container.Container} ownerCt Container which holds the component
              */
-             'removed',
+            'removed',
             /**
              * @event beforerender
-             * Fires before the component is {@link #rendered}. Return false from an
-             * event handler to stop the {@link #render}.
+             * Fires before the component is {@link #rendered}. Return false from an event handler to stop the
+             * {@link #render}.
              * @param {Ext.Component} this
              */
-             'beforerender',
+            'beforerender',
             /**
              * @event render
              * Fires after the component markup is {@link #rendered}.
              * @param {Ext.Component} this
              */
-             'render',
+            'render',
             /**
              * @event afterrender
-             * <p>Fires after the component rendering is finished.</p>
-             * <p>The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed
-             * by any afterRender method defined for the Component.</p>
+             * Fires after the component rendering is finished.
+             *
+             * The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed by any
+             * afterRender method defined for the Component.
              * @param {Ext.Component} this
              */
-             'afterrender',
+            'afterrender',
             /**
              * @event beforedestroy
-             * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the {@link #destroy}.
+             * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the
+             * {@link #destroy}.
              * @param {Ext.Component} this
              */
-             'beforedestroy',
+            'beforedestroy',
             /**
              * @event destroy
              * Fires after the component is {@link #destroy}ed.
              * @param {Ext.Component} this
              */
-             'destroy',
+            'destroy',
             /**
              * @event resize
              * Fires after the component is resized.
@@ -651,7 +826,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip
              * @param {Number} adjWidth The box-adjusted width that was set
              * @param {Number} adjHeight The box-adjusted height that was set
              */
-             'resize',
+            'resize',
             /**
              * @event move
              * Fires after the component is moved.
@@ -659,7 +834,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip
              * @param {Number} x The new x position
              * @param {Number} y The new y position
              */
-             'move'
+            'move'
         );
 
         me.getId();
@@ -671,11 +846,9 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
         if (me.plugins) {
             me.plugins = [].concat(me.plugins);
-            for (i = 0, len = me.plugins.length; i < len; i++) {
-                me.plugins[i] = me.constructPlugin(me.plugins[i]);
-            }
+            me.constructPlugins();
         }
-        
+
         me.initComponent();
 
         // ititComponent gets a chance to change the id property before registering
@@ -685,6 +858,9 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         me.mixins.observable.constructor.call(me);
         me.mixins.state.constructor.call(me, config);
 
+        // Save state on resize.
+        this.addStateEvents('resize');
+
         // Move this into Observable?
         if (me.plugins) {
             me.plugins = [].concat(me.plugins);
@@ -697,12 +873,15 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
         if (me.renderTo) {
             me.render(me.renderTo);
+            // EXTJSIV-1935 - should be a way to do afterShow or something, but that
+            // won't work. Likewise, rendering hidden and then showing (w/autoShow) has
+            // implications to afterRender so we cannot do that.
         }
 
         if (me.autoShow) {
             me.show();
         }
-        
+
         //<debug>
         if (Ext.isDefined(me.disabledClass)) {
             if (Ext.isDefined(Ext.global.console)) {
@@ -714,7 +893,100 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         //</debug>
     },
 
-    initComponent: Ext.emptyFn,
+    initComponent: function () {
+        // This is called again here to allow derived classes to add plugin configs to the
+        // plugins array before calling down to this, the base initComponent.
+        this.constructPlugins();
+    },
+
+    /**
+     * The supplied default state gathering method for the AbstractComponent class.
+     *
+     * This method returns dimension settings such as `flex`, `anchor`, `width` and `height` along with `collapsed`
+     * state.
+     *
+     * Subclasses which implement more complex state should call the superclass's implementation, and apply their state
+     * to the result if this basic state is to be saved.
+     *
+     * Note that Component state will only be saved if the Component has a {@link #stateId} and there as a StateProvider
+     * configured for the document.
+     *
+     * @return {Object}
+     */
+    getState: function() {
+        var me = this,
+            layout = me.ownerCt ? (me.shadowOwnerCt || me.ownerCt).getLayout() : null,
+            state = {
+                collapsed: me.collapsed
+            },
+            width = me.width,
+            height = me.height,
+            cm = me.collapseMemento,
+            anchors;
+
+        // If a Panel-local collapse has taken place, use remembered values as the dimensions.
+        // TODO: remove this coupling with Panel's privates! All collapse/expand logic should be refactored into one place.
+        if (me.collapsed && cm) {
+            if (Ext.isDefined(cm.data.width)) {
+                width = cm.width;
+            }
+            if (Ext.isDefined(cm.data.height)) {
+                height = cm.height;
+            }
+        }
+
+        // If we have flex, only store the perpendicular dimension.
+        if (layout && me.flex) {
+            state.flex = me.flex;
+            if (layout.perpendicularPrefix) {
+                state[layout.perpendicularPrefix] = me['get' + layout.perpendicularPrefixCap]();
+            } else {
+                //<debug>
+                if (Ext.isDefined(Ext.global.console)) {
+                    Ext.global.console.warn('Ext.Component: Specified a flex value on a component not inside a Box layout');
+                }
+                //</debug>
+            }
+        }
+        // If we have anchor, only store dimensions which are *not* being anchored
+        else if (layout && me.anchor) {
+            state.anchor = me.anchor;
+            anchors = me.anchor.split(' ').concat(null);
+            if (!anchors[0]) {
+                if (me.width) {
+                    state.width = width;
+                }
+            }
+            if (!anchors[1]) {
+                if (me.height) {
+                    state.height = height;
+                }
+            }
+        }
+        // Store dimensions.
+        else {
+            if (me.width) {
+                state.width = width;
+            }
+            if (me.height) {
+                state.height = height;
+            }
+        }
+
+        // Don't save dimensions if they are unchanged from the original configuration.
+        if (state.width == me.initialConfig.width) {
+            delete state.width;
+        }
+        if (state.height == me.initialConfig.height) {
+            delete state.height;
+        }
+
+        // If a Box layout was managing the perpendicular dimension, don't save that dimension
+        if (layout && layout.align && (layout.align.indexOf('stretch') !== -1)) {
+            delete state[layout.perpendicularPrefix];
+        }
+        return state;
+    },
 
     show: Ext.emptyFn,
 
@@ -767,11 +1039,13 @@ and a property `descEl` referencing the `div` Element which contains the descrip
     },
 
     /**
-     * <p>This method finds the topmost active layout who's processing will eventually determine the size and position of this
-     * Component.<p>
-     * <p>This method is useful when dynamically adding Components into Containers, and some processing must take place after the
-     * final sizing and positioning of the Component has been performed.</p>
-     * @returns
+     * This method finds the topmost active layout who's processing will eventually determine the size and position of
+     * this Component.
+     *
+     * This method is useful when dynamically adding Components into Containers, and some processing must take place
+     * after the final sizing and positioning of the Component has been performed.
+     *
+     * @return {Ext.Component}
      */
     findLayoutController: function() {
         return this.findParentBy(function(c) {
@@ -803,6 +1077,22 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         return plugin;
     },
 
+    /**
+     * Ensures that the plugins array contains fully constructed plugin instances. This converts any configs into their
+     * appropriate instances.
+     */
+    constructPlugins: function() {
+        var me = this,
+            plugins = me.plugins,
+            i, len;
+
+        if (plugins) {
+            for (i = 0, len = plugins.length; i < len; i++) {
+                // this just returns already-constructed plugin instances...
+                plugins[i] = me.constructPlugin(plugins[i]);
+            }
+        }
+    },
 
     // @private
     initPlugin : function(plugin) {
@@ -812,9 +1102,9 @@ and a property `descEl` referencing the `div` Element which contains the descrip
     },
 
     /**
-     * Handles autoRender.
-     * Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that
-     * ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body
+     * Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them
+     * within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to
+     * document.body
      */
     doAutoRender: function() {
         var me = this;
@@ -830,6 +1120,11 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         var me = this;
 
         if (!me.rendered && me.fireEvent('beforerender', me) !== false) {
+
+            // Flag set during the render process.
+            // It can be used to inhibit event-driven layout calls during the render phase
+            me.rendering = true;
+
             // If this.el is defined, we want to make sure we are dealing with
             // an Ext Element.
             if (me.el) {
@@ -847,7 +1142,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
             // Tell the encapsulating element to hide itself in the way the Component is configured to hide
             // This means DISPLAY, VISIBILITY or OFFSETS.
-            me.el.setVisibilityMode(Ext.core.Element[me.hideMode.toUpperCase()]);
+            me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]);
 
             if (me.overCls) {
                 me.el.hover(me.addOverCls, me.removeOverCls, me);
@@ -873,6 +1168,9 @@ and a property `descEl` referencing the `div` Element which contains the descrip
                 // pass silent so the event doesn't fire the first time.
                 me.disable(true);
             }
+
+            // Delete the flag once the rendering is done.
+            delete me.rendering;
         }
         return me;
     },
@@ -881,7 +1179,6 @@ and a property `descEl` referencing the `div` Element which contains the descrip
     onRender : function(container, position) {
         var me = this,
             el = me.el,
-            cls = me.initCls(),
             styles = me.initStyles(),
             renderTpl, renderData, i;
 
@@ -889,10 +1186,10 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
         if (!el) {
             if (position) {
-                el = Ext.core.DomHelper.insertBefore(position, me.getElConfig(), true);
+                el = Ext.DomHelper.insertBefore(position, me.getElConfig(), true);
             }
             else {
-                el = Ext.core.DomHelper.append(container, me.getElConfig(), true);
+                el = Ext.DomHelper.append(container, me.getElConfig(), true);
             }
         }
         else if (me.allowDomMove !== false) {
@@ -916,7 +1213,9 @@ and a property `descEl` referencing the `div` Element which contains the descrip
             }
         }
 
-        el.addCls(cls);
+        me.setUI(me.ui);
+
+        el.addCls(me.initCls());
         el.setStyle(styles);
 
         // Here we check if the component has a height set through style or css.
@@ -931,14 +1230,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         // }
 
         me.el = el;
-        
-        me.rendered = true;
-        me.addUIToElement(true);
-        //loop through all exisiting uiCls and update the ui in them
-        for (i = 0; i < me.uiCls.length; i++) {
-            me.addUIClsToElement(me.uiCls[i], true);
-        }
-        me.rendered = false;
+
         me.initFrame();
 
         renderTpl = me.initRenderTpl();
@@ -948,10 +1240,8 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         }
 
         me.applyRenderSelectors();
-        
+
         me.rendered = true;
-        
-        me.setUI(me.ui);
     },
 
     // @private
@@ -962,13 +1252,21 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
         me.getComponentLayout();
 
-        // Set the size if a size is configured, or if this is the outermost Container
-        if (!me.ownerCt || (me.height || me.width)) {
+        // Set the size if a size is configured, or if this is the outermost Container.
+        // Also, if this is a collapsed Panel, it needs an initial component layout
+        // to lay out its header so that it can have a height determined.
+        if (me.collapsed || (!me.ownerCt || (me.height || me.width))) {
             me.setSize(me.width, me.height);
+        } else {
+            // It is expected that child items be rendered before this method returns and
+            // the afterrender event fires. Since we aren't going to do the layout now, we
+            // must render the child items. This is handled implicitly above in the layout
+            // caused by setSize.
+            me.renderChildren();
         }
 
         // For floaters, calculate x and y if they aren't defined by aligning
-        // the sized element to the center of either the the container or the ownerCt
+        // the sized element to the center of either the container or the ownerCt
         if (me.floating && (me.x === undefined || me.y === undefined)) {
             if (me.floatParent) {
                 xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
@@ -990,25 +1288,65 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         }
     },
 
+    /**
+     * @private
+     * Called by Component#doAutoRender
+     *
+     * Register a Container configured `floating: true` with this Component's {@link Ext.ZIndexManager ZIndexManager}.
+     *
+     * Components added in ths way will not participate in any layout, but will be rendered
+     * upon first show in the way that {@link Ext.window.Window Window}s are.
+     */
+    registerFloatingItem: function(cmp) {
+        var me = this;
+        if (!me.floatingItems) {
+            me.floatingItems = Ext.create('Ext.ZIndexManager', me);
+        }
+        me.floatingItems.register(cmp);
+    },
+
+    renderChildren: function () {
+        var me = this,
+            layout = me.getComponentLayout();
+
+        me.suspendLayout = true;
+        layout.renderChildren();
+        delete me.suspendLayout;
+    },
+
     frameCls: Ext.baseCSSPrefix + 'frame',
 
+    frameIdRegex: /[-]frame\d+[TMB][LCR]$/,
+
+    frameElementCls: {
+        tl: [],
+        tc: [],
+        tr: [],
+        ml: [],
+        mc: [],
+        mr: [],
+        bl: [],
+        bc: [],
+        br: []
+    },
+
     frameTpl: [
         '<tpl if="top">',
-            '<tpl if="left"><div class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl></tpl>" style="background-position: {tl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
-                '<tpl if="right"><div class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl></tpl>" style="background-position: {tr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
-                    '<div class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl></tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></div>',
+            '<tpl if="left"><div id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl></tpl>" style="background-position: {tl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
+                '<tpl if="right"><div id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl></tpl>" style="background-position: {tr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
+                    '<div id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl></tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></div>',
                 '<tpl if="right"></div></tpl>',
             '<tpl if="left"></div></tpl>',
         '</tpl>',
-        '<tpl if="left"><div class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl></tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></tpl>',
-            '<tpl if="right"><div class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl></tpl>" style="background-position: {mr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
-                '<div class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl></tpl>" role="presentation"></div>',
+        '<tpl if="left"><div id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl></tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></tpl>',
+            '<tpl if="right"><div id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl></tpl>" style="background-position: {mr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
+                '<div id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl></tpl>" role="presentation"></div>',
             '<tpl if="right"></div></tpl>',
         '<tpl if="left"></div></tpl>',
         '<tpl if="bottom">',
-            '<tpl if="left"><div class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl></tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
-                '<tpl if="right"><div class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl></tpl>" style="background-position: {br}; padding-right: {frameWidth}px" role="presentation"></tpl>',
-                    '<div class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl></tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></div>',
+            '<tpl if="left"><div id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl></tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
+                '<tpl if="right"><div id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl></tpl>" style="background-position: {br}; padding-right: {frameWidth}px" role="presentation"></tpl>',
+                    '<div id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl></tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></div>',
                 '<tpl if="right"></div></tpl>',
             '<tpl if="left"></div></tpl>',
         '</tpl>'
@@ -1018,26 +1356,26 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         '<table><tbody>',
             '<tpl if="top">',
                 '<tr>',
-                    '<tpl if="left"><td class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl></tpl>" style="background-position: {tl}; padding-left:{frameWidth}px" role="presentation"></td></tpl>',
-                    '<td class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl></tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></td>',
-                    '<tpl if="right"><td class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl></tpl>" style="background-position: {tr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+                    '<tpl if="left"><td id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl></tpl>" style="background-position: {tl}; padding-left:{frameWidth}px" role="presentation"></td></tpl>',
+                    '<td id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl></tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></td>',
+                    '<tpl if="right"><td id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl></tpl>" style="background-position: {tr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
                 '</tr>',
             '</tpl>',
             '<tr>',
-                '<tpl if="left"><td class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl></tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
-                '<td class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl></tpl>" style="background-position: 0 0;" role="presentation"></td>',
-                '<tpl if="right"><td class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl></tpl>" style="background-position: {mr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+                '<tpl if="left"><td id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl></tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+                '<td id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl></tpl>" style="background-position: 0 0;" role="presentation"></td>',
+                '<tpl if="right"><td id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl></tpl>" style="background-position: {mr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
             '</tr>',
             '<tpl if="bottom">',
                 '<tr>',
-                    '<tpl if="left"><td class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl></tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
-                    '<td class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl></tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></td>',
-                    '<tpl if="right"><td class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl></tpl>" style="background-position: {br}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+                    '<tpl if="left"><td id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl></tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+                    '<td id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl></tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></td>',
+                    '<tpl if="right"><td id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl></tpl>" style="background-position: {br}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
                 '</tr>',
             '</tpl>',
         '</tbody></table>'
     ],
-    
+
     /**
      * @private
      */
@@ -1045,15 +1383,22 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         if (Ext.supports.CSS3BorderRadius) {
             return false;
         }
-        
+
         var me = this,
             frameInfo = me.getFrameInfo(),
             frameWidth = frameInfo.width,
-            frameTpl = me.getFrameTpl(frameInfo.table);
-                        
+            frameTpl = me.getFrameTpl(frameInfo.table),
+            frameGenId;
+
         if (me.frame) {
+            // since we render id's into the markup and id's NEED to be unique, we have a
+            // simple strategy for numbering their generations.
+            me.frameGenId = frameGenId = (me.frameGenId || 0) + 1;
+            frameGenId = me.id + '-frame' + frameGenId;
+
             // Here we render the frameTpl to this component. This inserts the 9point div or the table framing.
             frameTpl.insertFirst(me.el, Ext.apply({}, {
+                fgid:       frameGenId,
                 ui:         me.ui,
                 uiCls:      me.uiCls,
                 frameCls:   me.frameCls,
@@ -1067,27 +1412,24 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
             // The frameBody is returned in getTargetEl, so that layouts render items to the correct target.=
             me.frameBody = me.el.down('.' + me.frameCls + '-mc');
-            
-            // Add the render selectors for each of the frame elements
-            Ext.apply(me.renderSelectors, {
-                frameTL: '.' + me.baseCls + '-tl',
-                frameTC: '.' + me.baseCls + '-tc',
-                frameTR: '.' + me.baseCls + '-tr',
-                frameML: '.' + me.baseCls + '-ml',
-                frameMC: '.' + me.baseCls + '-mc',
-                frameMR: '.' + me.baseCls + '-mr',
-                frameBL: '.' + me.baseCls + '-bl',
-                frameBC: '.' + me.baseCls + '-bc',
-                frameBR: '.' + me.baseCls + '-br'
+
+            // Clean out the childEls for the old frame elements (the majority of the els)
+            me.removeChildEls(function (c) {
+                return c.id && me.frameIdRegex.test(c.id);
+            });
+
+            // Add the childEls for each of the new frame elements
+            Ext.each(['TL','TC','TR','ML','MC','MR','BL','BC','BR'], function (suffix) {
+                me.childEls.push({ name: 'frame' + suffix, id: frameGenId + suffix });
             });
         }
     },
-    
+
     updateFrame: function() {
         if (Ext.supports.CSS3BorderRadius) {
             return false;
         }
-        
+
         var me = this,
             wasTable = this.frameSize && this.frameSize.table,
             oldFrameTL = this.frameTL,
@@ -1095,11 +1437,11 @@ and a property `descEl` referencing the `div` Element which contains the descrip
             oldFrameML = this.frameML,
             oldFrameMC = this.frameMC,
             newMCClassName;
-        
+
         this.initFrame();
-        
+
         if (oldFrameMC) {
-            if (me.frame) {                
+            if (me.frame) {
                 // Reapply render selectors
                 delete me.frameTL;
                 delete me.frameTC;
@@ -1109,26 +1451,26 @@ and a property `descEl` referencing the `div` Element which contains the descrip
                 delete me.frameMR;
                 delete me.frameBL;
                 delete me.frameBC;
-                delete me.frameBR;    
+                delete me.frameBR;
                 this.applyRenderSelectors();
-                
+
                 // Store the class names set on the new mc
                 newMCClassName = this.frameMC.dom.className;
-                
+
                 // Replace the new mc with the old mc
                 oldFrameMC.insertAfter(this.frameMC);
                 this.frameMC.remove();
-                
+
                 // Restore the reference to the old frame mc as the framebody
                 this.frameBody = this.frameMC = oldFrameMC;
-                
+
                 // Apply the new mc classes to the old mc element
                 oldFrameMC.dom.className = newMCClassName;
-                
+
                 // Remove the old framing
                 if (wasTable) {
                     me.el.query('> table')[1].remove();
-                }                                
+                }
                 else {
                     if (oldFrameTL) {
                         oldFrameTL.remove();
@@ -1141,19 +1483,19 @@ and a property `descEl` referencing the `div` Element which contains the descrip
             }
             else {
                 // We were framed but not anymore. Move all content from the old frame to the body
-                
+
             }
         }
         else if (me.frame) {
             this.applyRenderSelectors();
         }
     },
-    
+
     getFrameInfo: function() {
         if (Ext.supports.CSS3BorderRadius) {
             return false;
         }
-        
+
         var me = this,
             left = me.el.getStyle('background-position-x'),
             top = me.el.getStyle('background-position-y'),
@@ -1166,33 +1508,33 @@ and a property `descEl` referencing the `div` Element which contains the descrip
             left = info[0];
             top = info[1];
         }
-        
+
         // We actually pass a string in the form of '[type][tl][tr]px [type][br][bl]px' as
         // the background position of this.el from the css to indicate to IE that this component needs
         // framing. We parse it here and change the markup accordingly.
         if (parseInt(left, 10) >= 1000000 && parseInt(top, 10) >= 1000000) {
             max = Math.max;
-            
+
             frameInfo = {
                 // Table markup starts with 110, div markup with 100.
                 table: left.substr(0, 3) == '110',
-                
+
                 // Determine if we are dealing with a horizontal or vertical component
                 vertical: top.substr(0, 3) == '110',
-                
+
                 // Get and parse the different border radius sizes
                 top:    max(left.substr(3, 2), left.substr(5, 2)),
                 right:  max(left.substr(5, 2), top.substr(3, 2)),
                 bottom: max(top.substr(3, 2), top.substr(5, 2)),
                 left:   max(top.substr(5, 2), left.substr(3, 2))
             };
-            
+
             frameInfo.width = max(frameInfo.top, frameInfo.right, frameInfo.bottom, frameInfo.left);
 
             // Just to be sure we set the background image of the el to none.
             me.el.setStyle('background-image', 'none');
-        }        
-        
+        }
+
         // This happens when you set frame: true explicitly without using the x-frame mixin in sass.
         // This way IE can't figure out what sizes to use and thus framing can't work.
         if (me.frame === true && !frameInfo) {
@@ -1202,28 +1544,28 @@ and a property `descEl` referencing the `div` Element which contains the descrip
                             "to use and thus framing on this component will be disabled.");
             //</debug>
         }
-        
+
         me.frame = me.frame || !!frameInfo;
         me.frameSize = frameInfo || false;
-        
+
         return frameInfo;
     },
-    
+
     getFramePositions: function(frameInfo) {
         var me = this,
             frameWidth = frameInfo.width,
             dock = me.dock,
             positions, tc, bc, ml, mr;
-            
+
         if (frameInfo.vertical) {
             tc = '0 -' + (frameWidth * 0) + 'px';
             bc = '0 -' + (frameWidth * 1) + 'px';
-            
+
             if (dock && dock == "right") {
                 tc = 'right -' + (frameWidth * 0) + 'px';
                 bc = 'right -' + (frameWidth * 1) + 'px';
             }
-            
+
             positions = {
                 tl: '0 -' + (frameWidth * 0) + 'px',
                 tr: '0 -' + (frameWidth * 1) + 'px',
@@ -1239,12 +1581,12 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         } else {
             ml = '-' + (frameWidth * 0) + 'px 0';
             mr = 'right 0';
-            
+
             if (dock && dock == "bottom") {
                 ml = 'left bottom';
                 mr = 'right bottom';
             }
-            
+
             positions = {
                 tl: '0 -' + (frameWidth * 2) + 'px',
                 tr: 'right -' + (frameWidth * 3) + 'px',
@@ -1258,10 +1600,10 @@ and a property `descEl` referencing the `div` Element which contains the descrip
                 bc: '0 -' + (frameWidth * 1) + 'px'
             };
         }
-        
+
         return positions;
     },
-    
+
     /**
      * @private
      */
@@ -1270,9 +1612,11 @@ and a property `descEl` referencing the `div` Element which contains the descrip
     },
 
     /**
-     * <p>Creates an array of class names from the configurations to add to this Component's <code>el</code> on render.</p>
-     * <p>Private, but (possibly) used by ComponentQuery for selection by class name if Component is not rendered.</p>
-     * @return {Array} An array of class names with which the Component's element will be rendered.
+     * Creates an array of class names from the configurations to add to this Component's `el` on render.
+     *
+     * Private, but (possibly) used by ComponentQuery for selection by class name if Component is not rendered.
+     *
+     * @return {String[]} An array of class names with which the Component's element will be rendered.
      * @private
      */
     initCls: function() {
@@ -1303,87 +1647,113 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
         return cls.concat(me.additionalCls);
     },
-    
+
     /**
-     * Sets the UI for the component. This will remove any existing UIs on the component. It will also
-     * loop through any uiCls set on the component and rename them so they include the new UI
+     * Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any
+     * uiCls set on the component and rename them so they include the new UI
      * @param {String} ui The new UI for the component
      */
     setUI: function(ui) {
         var me = this,
             oldUICls = Ext.Array.clone(me.uiCls),
             newUICls = [],
+            classes = [],
             cls,
             i;
-        
+
         //loop through all exisiting uiCls and update the ui in them
         for (i = 0; i < oldUICls.length; i++) {
             cls = oldUICls[i];
-            
-            me.removeClsWithUI(cls);
+
+            classes = classes.concat(me.removeClsWithUI(cls, true));
             newUICls.push(cls);
         }
-        
+
+        if (classes.length) {
+            me.removeCls(classes);
+        }
+
         //remove the UI from the element
         me.removeUIFromElement();
-        
+
         //set the UI
         me.ui = ui;
-        
+
         //add the new UI to the elemend
         me.addUIToElement();
-        
+
         //loop through all exisiting uiCls and update the ui in them
+        classes = [];
         for (i = 0; i < newUICls.length; i++) {
             cls = newUICls[i];
-            
-            me.addClsWithUI(cls);
+            classes = classes.concat(me.addClsWithUI(cls, true));
+        }
+
+        if (classes.length) {
+            me.addCls(classes);
         }
     },
-    
+
     /**
-     * Adds a cls to the uiCls array, which will also call {@link #addUIClsToElement} and adds
-     * to all elements of this component.
-     * @param {String/Array} cls A string or an array of strings to add to the uiCls
+     * Adds a cls to the uiCls array, which will also call {@link #addUIClsToElement} and adds to all elements of this
+     * component.
+     * @param {String/String[]} cls A string or an array of strings to add to the uiCls
+     * @param {Object} skip (Boolean) skip True to skip adding it to the class and do it later (via the return)
      */
-    addClsWithUI: function(cls) {
+    addClsWithUI: function(cls, skip) {
         var me = this,
+            classes = [],
             i;
-        
+
         if (!Ext.isArray(cls)) {
             cls = [cls];
         }
-        
+
         for (i = 0; i < cls.length; i++) {
             if (cls[i] && !me.hasUICls(cls[i])) {
                 me.uiCls = Ext.Array.clone(me.uiCls);
                 me.uiCls.push(cls[i]);
-                me.addUIClsToElement(cls[i]);
+
+                classes = classes.concat(me.addUIClsToElement(cls[i]));
             }
         }
+
+        if (skip !== true) {
+            me.addCls(classes);
+        }
+
+        return classes;
     },
-    
+
     /**
-     * Removes a cls to the uiCls array, which will also call {@link #removeUIClsToElement} and removes
-     * it from all elements of this component.
-     * @param {String/Array} cls A string or an array of strings to remove to the uiCls
+     * Removes a cls to the uiCls array, which will also call {@link #removeUIClsFromElement} and removes it from all
+     * elements of this component.
+     * @param {String/String[]} cls A string or an array of strings to remove to the uiCls
      */
-    removeClsWithUI: function(cls) {
+    removeClsWithUI: function(cls, skip) {
         var me = this,
+            classes = [],
             i;
-        
+
         if (!Ext.isArray(cls)) {
             cls = [cls];
         }
-        
+
         for (i = 0; i < cls.length; i++) {
             if (cls[i] && me.hasUICls(cls[i])) {
                 me.uiCls = Ext.Array.remove(me.uiCls, cls[i]);
-                me.removeUIClsFromElement(cls[i]);
+
+                classes = classes.concat(me.removeUIClsFromElement(cls[i]));
             }
         }
+
+        if (skip !== true) {
+            me.removeCls(classes);
+        }
+
+        return classes;
     },
-    
+
     /**
      * Checks if there is currently a specified uiCls
      * @param {String} cls The cls to check
@@ -1391,128 +1761,161 @@ and a property `descEl` referencing the `div` Element which contains the descrip
     hasUICls: function(cls) {
         var me = this,
             uiCls = me.uiCls || [];
-        
+
         return Ext.Array.contains(uiCls, cls);
     },
-    
+
     /**
-     * Method which adds a specified UI + uiCls to the components element.
-     * Can be overridden to remove the UI from more than just the components element.
+     * Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more
+     * than just the components element.
      * @param {String} ui The UI to remove from the element
-     * @private
      */
     addUIClsToElement: function(cls, force) {
-        var me = this;
-        
-        me.addCls(Ext.baseCSSPrefix + cls);
-        me.addCls(me.baseCls + '-' + cls);
-        me.addCls(me.baseCls + '-' + me.ui + '-' + cls);
-        
-        if (!force && me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {
+        var me = this,
+            result = [],
+            frameElementCls = me.frameElementCls;
+
+        result.push(Ext.baseCSSPrefix + cls);
+        result.push(me.baseCls + '-' + cls);
+        result.push(me.baseCls + '-' + me.ui + '-' + cls);
+
+        if (!force && me.frame && !Ext.supports.CSS3BorderRadius) {
             // define each element of the frame
             var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
-                i, el;
-            
+                classes, i, j, el;
+
             // loop through each of them, and if they are defined add the ui
             for (i = 0; i < els.length; i++) {
                 el = me['frame' + els[i].toUpperCase()];
-                
+                classes = [me.baseCls + '-' + me.ui + '-' + els[i], me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i]];
                 if (el && el.dom) {
-                    el.addCls(me.baseCls + '-' + me.ui + '-' + els[i]);
-                    el.addCls(me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i]);
+                    el.addCls(classes);
+                } else {
+                    for (j = 0; j < classes.length; j++) {
+                        if (Ext.Array.indexOf(frameElementCls[els[i]], classes[j]) == -1) {
+                            frameElementCls[els[i]].push(classes[j]);
+                        }
+                    }
                 }
             }
         }
+
+        me.frameElementCls = frameElementCls;
+
+        return result;
     },
-    
+
     /**
-     * Method which removes a specified UI + uiCls from the components element.
-     * The cls which is added to the element will be: `this.baseCls + '-' + ui`
+     * Method which removes a specified UI + uiCls from the components element. The cls which is added to the element
+     * will be: `this.baseCls + '-' + ui`
      * @param {String} ui The UI to add to the element
-     * @private
      */
     removeUIClsFromElement: function(cls, force) {
-        var me = this;
-        
-        me.removeCls(Ext.baseCSSPrefix + cls);
-        me.removeCls(me.baseCls + '-' + cls);
-        me.removeCls(me.baseCls + '-' + me.ui + '-' + cls);
-        
-        if (!force &&me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {
+        var me = this,
+            result = [],
+            frameElementCls = me.frameElementCls;
+
+        result.push(Ext.baseCSSPrefix + cls);
+        result.push(me.baseCls + '-' + cls);
+        result.push(me.baseCls + '-' + me.ui + '-' + cls);
+
+        if (!force && me.frame && !Ext.supports.CSS3BorderRadius) {
             // define each element of the frame
             var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
                 i, el;
-            
+            cls = me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i];
             // loop through each of them, and if they are defined add the ui
             for (i = 0; i < els.length; i++) {
                 el = me['frame' + els[i].toUpperCase()];
                 if (el && el.dom) {
-                    el.removeCls(me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i]);
+                    el.removeCls(cls);
+                } else {
+                    Ext.Array.remove(frameElementCls[els[i]], cls);
                 }
             }
         }
+
+        me.frameElementCls = frameElementCls;
+
+        return result;
     },
-    
+
     /**
      * Method which adds a specified UI to the components element.
      * @private
      */
     addUIToElement: function(force) {
-        var me = this;
-        
+        var me = this,
+            frameElementCls = me.frameElementCls;
+
         me.addCls(me.baseCls + '-' + me.ui);
-        
-        if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {
+
+        if (me.frame && !Ext.supports.CSS3BorderRadius) {
             // define each element of the frame
             var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
-                i, el;
-            
+                i, el, cls;
+
             // loop through each of them, and if they are defined add the ui
             for (i = 0; i < els.length; i++) {
                 el = me['frame' + els[i].toUpperCase()];
-                
+                cls = me.baseCls + '-' + me.ui + '-' + els[i];
                 if (el) {
-                    el.addCls(me.baseCls + '-' + me.ui + '-' + els[i]);
+                    el.addCls(cls);
+                } else {
+                    if (!Ext.Array.contains(frameElementCls[els[i]], cls)) {
+                        frameElementCls[els[i]].push(cls);
+                    }
                 }
             }
         }
     },
-    
+
     /**
      * Method which removes a specified UI from the components element.
      * @private
      */
     removeUIFromElement: function() {
-        var me = this;
-        
+        var me = this,
+            frameElementCls = me.frameElementCls;
+
         me.removeCls(me.baseCls + '-' + me.ui);
-        
-        if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {
+
+        if (me.frame && !Ext.supports.CSS3BorderRadius) {
             // define each element of the frame
             var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
-                i, el;
-            
+                i, j, el, cls;
+
             // loop through each of them, and if they are defined add the ui
             for (i = 0; i < els.length; i++) {
                 el = me['frame' + els[i].toUpperCase()];
+                cls = me.baseCls + '-' + me.ui + '-' + els[i];
+
                 if (el) {
-                    el.removeCls(me.baseCls + '-' + me.ui + '-' + els[i]);
+                    el.removeCls(cls);
+                } else {
+                    Ext.Array.remove(frameElementCls[els[i]], cls);
                 }
             }
         }
     },
-    
+
     getElConfig : function() {
+        if (Ext.isString(this.autoEl)) {
+            this.autoEl = {
+                tag: this.autoEl
+            };
+        }
+
         var result = this.autoEl || {tag: 'div'};
         result.id = this.id;
         return result;
     },
 
     /**
-     * This function takes the position argument passed to onRender and returns a
-     * DOM element that you can use in the insertBefore.
-     * @param {String/Number/Element/HTMLElement} position Index, element id or element you want
-     * to put this component before.
+     * This function takes the position argument passed to onRender and returns a DOM element that you can use in the
+     * insertBefore.
+     * @param {String/Number/Ext.Element/HTMLElement} position Index, element id or element you want to put this
+     * component before.
      * @return {HTMLElement} DOM element that you can use in the insertBefore
      */
     getInsertPosition: function(position) {
@@ -1531,7 +1934,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
     /**
      * Adds ctCls to container.
-     * @return {Ext.core.Element} The initialized container
+     * @return {Ext.Element} The initialized container
      * @private
      */
     initContainer: function(container) {
@@ -1563,6 +1966,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip
         var me = this;
 
         return Ext.applyIf(me.renderData, {
+            id: me.id,
             ui: me.ui,
             uiCls: me.uiCls,
             baseCls: me.baseCls,
@@ -1575,15 +1979,18 @@ and a property `descEl` referencing the `div` Element which contains the descrip
      * @private
      */
     getTpl: function(name) {
-        var prototype = this.self.prototype,
-            ownerPrototype;
-
-        if (this.hasOwnProperty(name)) {
-            if (!(this[name] instanceof Ext.XTemplate)) {
-                this[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', this[name]);
+        var me = this,
+            prototype = me.self.prototype,
+            ownerPrototype,
+            tpl;
+
+        if (me.hasOwnProperty(name)) {
+            tpl = me[name];
+            if (tpl && !(tpl instanceof Ext.XTemplate)) {
+                me[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
             }
 
-            return this[name];
+            return me[name];
         }
 
         if (!(prototype[name] instanceof Ext.XTemplate)) {
@@ -1591,8 +1998,11 @@ and a property `descEl` referencing the `div` Element which contains the descrip
 
             do {
                 if (ownerPrototype.hasOwnProperty(name)) {
-                    ownerPrototype[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', ownerPrototype[name]);
-                    break;
+                    tpl = ownerPrototype[name];
+                    if (tpl && !(tpl instanceof Ext.XTemplate)) {
+                        ownerPrototype[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
+                        break;
+                    }
                 }
 
                 ownerPrototype = ownerPrototype.superclass;
@@ -1612,14 +2022,14 @@ and a property `descEl` referencing the `div` Element which contains the descrip
     },
 
     /**
-     * Function description
+     * Converts style definitions to String.
      * @return {String} A CSS style string with style, padding, margin and border.
      * @private
      */
     initStyles: function() {
         var style = {},
             me = this,
-            Element = Ext.core.Element;
+            Element = Ext.Element;
 
         if (Ext.isString(me.style)) {
             style = Element.parseStyles(me.style);
@@ -1642,8 +2052,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip
     },
 
     /**
-     * Initializes this components contents. It checks for the properties
-     * html, contentEl and tpl/data.
+     * Initializes this components contents. It checks for the properties html, contentEl and tpl/data.
      * @private
      */
     initContent: function() {
@@ -1653,7 +2062,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip
             pre;
 
         if (me.html) {
-            target.update(Ext.core.DomHelper.markup(me.html));
+            target.update(Ext.DomHelper.markup(me.html));
             delete me.html;
         }
 
@@ -1681,31 +2090,91 @@ and a property `descEl` referencing the `div` Element which contains the descrip
     initEvents : function() {
         var me = this,
             afterRenderEvents = me.afterRenderEvents,
-            property, listeners;
+            el,
+            property,
+            fn = function(listeners){
+                me.mon(el, listeners);
+            };
         if (afterRenderEvents) {
             for (property in afterRenderEvents) {
                 if (afterRenderEvents.hasOwnProperty(property)) {
-                    listeners = afterRenderEvents[property];
-                    if (me[property] && me[property].on) {
-                        me.mon(me[property], listeners);
+                    el = me[property];
+                    if (el && el.on) {
+                        Ext.each(afterRenderEvents[property], fn);
                     }
                 }
             }
         }
     },
 
+    /**
+     * Adds each argument passed to this method to the {@link #childEls} array.
+     */
+    addChildEls: function () {
+        var me = this,
+            childEls = me.childEls || (me.childEls = []);
+
+        childEls.push.apply(childEls, arguments);
+    },
+
+    /**
+     * Removes items in the childEls array based on the return value of a supplied test function. The function is called
+     * with a entry in childEls and if the test function return true, that entry is removed. If false, that entry is
+     * kept.
+     * @param {Function} testFn The test function.
+     */
+    removeChildEls: function (testFn) {
+        var me = this,
+            old = me.childEls,
+            keepers = (me.childEls = []),
+            n, i, cel;
+
+        for (i = 0, n = old.length; i < n; ++i) {
+            cel = old[i];
+            if (!testFn(cel)) {
+                keepers.push(cel);
+            }
+        }
+    },
+
     /**
-     * Sets references to elements inside the component. E.g body -> x-panel-body
+     * Sets references to elements inside the component. This applies {@link #renderSelectors}
+     * as well as {@link #childEls}.
      * @private
      */
     applyRenderSelectors: function() {
-        var selectors = this.renderSelectors || {},
-            el = this.el.dom,
-            selector;
+        var me = this,
+            childEls = me.childEls,
+            selectors = me.renderSelectors,
+            el = me.el,
+            dom = el.dom,
+            baseId, childName, childId, i, selector;
+
+        if (childEls) {
+            baseId = me.id + '-';
+            for (i = childEls.length; i--; ) {
+                childName = childId = childEls[i];
+                if (typeof(childName) != 'string') {
+                    childId = childName.id || (baseId + childName.itemId);
+                    childName = childName.name;
+                } else {
+                    childId = baseId + childId;
+                }
+
+                // We don't use Ext.get because that is 3x (or more) slower on IE6-8. Since
+                // we know the el's are children of our el we use getById instead:
+                me[childName] = el.getById(childId);
+            }
+        }
 
-        for (selector in selectors) {
-            if (selectors.hasOwnProperty(selector) && selectors[selector]) {
-                this[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], el));
+        // We still support renderSelectors. There are a few places in the framework that
+        // need them and they are a documented part of the API. In fact, we support mixing
+        // childEls and renderSelectors (no reason not to).
+        if (selectors) {
+            for (selector in selectors) {
+                if (selectors.hasOwnProperty(selector) && selectors[selector]) {
+                    me[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], dom));
+                }
             }
         }
     },
@@ -1720,13 +2189,14 @@ and a property `descEl` referencing the `div` Element which contains the descrip
     },
 
     /**
-     * <p>Walks up the <code>ownerCt</code> axis looking for an ancestor Container which matches
-     * the passed simple selector.</p>
-     * <p>Example:<pre><code>
-var owningTabPanel = grid.up('tabpanel');
-</code></pre>
-     * @param {String} selector Optional. The simple selector to test.
-     * @return {Container} The matching ancestor Container (or <code>undefined</code> if no match was found).
+     * Walks up the `ownerCt` axis looking for an ancestor Container which matches the passed simple selector.
+     *
+     * Example:
+     *
+     *     var owningTabPanel = grid.up('tabpanel');
+     *
+     * @param {String} [selector] The simple selector to test.
+     * @return {Ext.container.Container} The matching ancestor Container (or `undefined` if no match was found).
      */
     up: function(selector) {
         var result = this.ownerCt;
@@ -1741,12 +2211,17 @@ var owningTabPanel = grid.up('tabpanel');
     },
 
     /**
-     * <p>Returns the next sibling of this Component.</p>
-     * <p>Optionally selects the next sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.</p>
-     * <p>May also be refered to as <code><b>next()</b></code></p>
-     * <p>Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with {@link #nextNode}</p>
-     * @param {String} selector Optional A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following items.
-     * @returns The next sibling (or the next sibling which matches the selector). Returns null if there is no matching sibling.
+     * Returns the next sibling of this Component.
+     *
+     * Optionally selects the next sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.
+     *
+     * May also be refered to as **`next()`**
+     *
+     * Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with
+     * {@link #nextNode}
+     * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following items.
+     * @return {Ext.Component} The next sibling (or the next sibling which matches the selector).
+     * Returns null if there is no matching sibling.
      */
     nextSibling: function(selector) {
         var o = this.ownerCt, it, last, idx, c;
@@ -1771,12 +2246,18 @@ var owningTabPanel = grid.up('tabpanel');
     },
 
     /**
-     * <p>Returns the previous sibling of this Component.</p>
-     * <p>Optionally selects the previous sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.</p>
-     * <p>May also be refered to as <code><b>prev()</b></code></p>
-     * <p>Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with {@link #previousNode}</p>
-     * @param {String} selector Optional. A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding items.
-     * @returns The previous sibling (or the previous sibling which matches the selector). Returns null if there is no matching sibling.
+     * Returns the previous sibling of this Component.
+     *
+     * Optionally selects the previous sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery}
+     * selector.
+     *
+     * May also be refered to as **`prev()`**
+     *
+     * Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with
+     * {@link #previousNode}
+     * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding items.
+     * @return {Ext.Component} The previous sibling (or the previous sibling which matches the selector).
+     * Returns null if there is no matching sibling.
      */
     previousSibling: function(selector) {
         var o = this.ownerCt, it, idx, c;
@@ -1801,11 +2282,13 @@ var owningTabPanel = grid.up('tabpanel');
     },
 
     /**
-     * <p>Returns the previous node in the Component tree in tree traversal order.</p>
-     * <p>Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will
-     * walk the tree in reverse order to attempt to find a match. Contrast with {@link #previousSibling}.</p>
-     * @param {String} selector Optional. A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding nodes.
-     * @returns The previous node (or the previous node which matches the selector). Returns null if there is no matching node.
+     * Returns the previous node in the Component tree in tree traversal order.
+     *
+     * Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the
+     * tree in reverse order to attempt to find a match. Contrast with {@link #previousSibling}.
+     * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding nodes.
+     * @return {Ext.Component} The previous node (or the previous node which matches the selector).
+     * Returns null if there is no matching node.
      */
     previousNode: function(selector, includeSelf) {
         var node = this,
@@ -1837,11 +2320,13 @@ var owningTabPanel = grid.up('tabpanel');
     },
 
     /**
-     * <p>Returns the next node in the Component tree in tree traversal order.</p>
-     * <p>Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will
-     * walk the tree to attempt to find a match. Contrast with {@link #pnextSibling}.</p>
-     * @param {String} selector Optional A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following nodes.
-     * @returns The next node (or the next node which matches the selector). Returns null if there is no matching node.
+     * Returns the next node in the Component tree in tree traversal order.
+     *
+     * Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the
+     * tree to attempt to find a match. Contrast with {@link #nextSibling}.
+     * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following nodes.
+     * @return {Ext.Component} The next node (or the next node which matches the selector).
+     * Returns null if there is no matching node.
      */
     nextNode: function(selector, includeSelf) {
         var node = this,
@@ -1872,8 +2357,8 @@ var owningTabPanel = grid.up('tabpanel');
     },
 
     /**
-     * Retrieves the id of this component.
-     * Will autogenerate an id if one has not already been set.
+     * Retrieves the id of this component. Will autogenerate an id if one has not already been set.
+     * @return {String}
      */
     getId : function() {
         return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));
@@ -1885,6 +2370,7 @@ var owningTabPanel = grid.up('tabpanel');
 
     /**
      * Retrieves the top level element representing this component.
+     * @return {Ext.core.Element}
      */
     getEl : function() {
         return this.el;
@@ -1899,21 +2385,24 @@ var owningTabPanel = grid.up('tabpanel');
     },
 
     /**
-     * <p>Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
-     * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).</p>
-     * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
-     * to participate in determination of inherited xtypes.</b></p>
-     * <p>For a list of all available xtypes, see the {@link Ext.Component} header.</p>
-     * <p>Example usage:</p>
-     * <pre><code>
-var t = new Ext.form.field.Text();
-var isText = t.isXType('textfield');        // true
-var isBoxSubclass = t.isXType('field');       // true, descended from Ext.form.field.Base
-var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance
-</code></pre>
+     * Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
+     * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
+     *
+     * **If using your own subclasses, be aware that a Component must register its own xtype to participate in
+     * determination of inherited xtypes.**
+     *
+     * For a list of all available xtypes, see the {@link Ext.Component} header.
+     *
+     * Example usage:
+     *
+     *     var t = new Ext.form.field.Text();
+     *     var isText = t.isXType('textfield');        // true
+     *     var isBoxSubclass = t.isXType('field');       // true, descended from Ext.form.field.Base
+     *     var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance
+     *
      * @param {String} xtype The xtype to check for this Component
-     * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
-     * the default), or true to check whether this Component is directly of the specified xtype.
+     * @param {Boolean} [shallow=false] True to check whether this Component is directly of the specified xtype, false to
+     * check whether this Component is descended from the xtype.
      * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
      */
     isXType: function(xtype, shallow) {
@@ -1930,29 +2419,32 @@ var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.fi
     },
 
     /**
-     * <p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
-     * available xtypes, see the {@link Ext.Component} header.</p>
-     * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
-     * to participate in determination of inherited xtypes.</b></p>
-     * <p>Example usage:</p>
-     * <pre><code>
-var t = new Ext.form.field.Text();
-alert(t.getXTypes());  // alerts 'component/field/textfield'
-</code></pre>
+     * Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the
+     * {@link Ext.Component} header.
+     *
+     * **If using your own subclasses, be aware that a Component must register its own xtype to participate in
+     * determination of inherited xtypes.**
+     *
+     * Example usage:
+     *
+     *     var t = new Ext.form.field.Text();
+     *     alert(t.getXTypes());  // alerts 'component/field/textfield'
+     *
      * @return {String} The xtype hierarchy string
      */
     getXTypes: function() {
         var self = this.self,
-            xtypes      = [],
-            parentPrototype  = this,
-            xtype;
+            xtypes, parentPrototype, parentXtypes;
 
         if (!self.xtypes) {
-            while (parentPrototype && Ext.getClass(parentPrototype)) {
-                xtype = Ext.getClass(parentPrototype).xtype;
+            xtypes = [];
+            parentPrototype = this;
 
-                if (xtype !== undefined) {
-                    xtypes.unshift(xtype);
+            while (parentPrototype) {
+                parentXtypes = parentPrototype.xtypes;
+
+                if (parentXtypes !== undefined) {
+                    xtypes.unshift.apply(xtypes, parentXtypes);
                 }
 
                 parentPrototype = parentPrototype.superclass;
@@ -1967,15 +2459,12 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
 
     /**
      * Update the content area of a component.
-     * @param {Mixed} htmlOrData
-     * If this component has been configured with a template via the tpl config
-     * then it will use this argument as data to populate the template.
-     * If this component was not configured with a template, the components
-     * content area will be updated via Ext.core.Element update
-     * @param {Boolean} loadScripts
-     * (optional) Only legitimate when using the html configuration. Defaults to false
-     * @param {Function} callback
-     * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading
+     * @param {String/Object} htmlOrData If this component has been configured with a template via the tpl config then
+     * it will use this argument as data to populate the template. If this component was not configured with a template,
+     * the components content area will be updated via Ext.Element update
+     * @param {Boolean} [loadScripts=false] Only legitimate when using the html configuration.
+     * @param {Function} [callback] Only legitimate when using the html configuration. Callback to execute when
+     * scripts have finished loading
      */
     update : function(htmlOrData, loadScripts, cb) {
         var me = this;
@@ -1986,7 +2475,7 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
                 me.tpl[me.tplWriteMode](me.getTargetEl(), htmlOrData || {});
             }
         } else {
-            me.html = Ext.isObject(htmlOrData) ? Ext.core.DomHelper.markup(htmlOrData) : htmlOrData;
+            me.html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
             if (me.rendered) {
                 me.getTargetEl().update(me.html, loadScripts, cb);
             }
@@ -2008,10 +2497,13 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
 
     /**
      * Returns true if this component is visible.
-     * @param {Boolean} deep. <p>Optional. Pass <code>true</code> to interrogate the visibility status of all
-     * parent Containers to determine whether this Component is truly visible to the user.</p>
-     * <p>Generally, to determine whether a Component is hidden, the no argument form is needed. For example
-     * when creating dynamically laid out UIs in a hidden Container before showing them.</p>
+     *
+     * @param {Boolean} [deep=false] Pass `true` to interrogate the visibility status of all parent Containers to
+     * determine whether this Component is truly visible to the user.
+     *
+     * Generally, to determine whether a Component is hidden, the no argument form is needed. For example when creating
+     * dynamically laid out UIs in a hidden Container before showing them.
+     *
      * @return {Boolean} True if this component is visible, false otherwise.
      */
     isVisible: function(deep) {
@@ -2048,8 +2540,7 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
 
     /**
      * Enable the component
-     * @param {Boolean} silent
-     * Passing false will supress the 'enable' event from being fired.
+     * @param {Boolean} [silent=false] Passing true will supress the 'enable' event from being fired.
      */
     enable: function(silent) {
         var me = this;
@@ -2071,8 +2562,7 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
 
     /**
      * Disable the component.
-     * @param {Boolean} silent
-     * Passing true, will supress the 'disable' event from being fired.
+     * @param {Boolean} [silent=false] Passing true will supress the 'disable' event from being fired.
      */
     disable: function(silent) {
         var me = this;
@@ -2091,12 +2581,12 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
 
         return me;
     },
-    
+
     // @private
     onEnable: function() {
         if (this.maskOnDisable) {
             this.el.unmask();
-        }        
+        }
     },
 
     // @private
@@ -2105,7 +2595,7 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
             this.el.mask();
         }
     },
-    
+
     /**
      * Method to determine whether this Component is currently disabled.
      * @return {Boolean} the disabled state of this Component.
@@ -2116,7 +2606,7 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
 
     /**
      * Enable or disable the component.
-     * @param {Boolean} disabled
+     * @param {Boolean} disabled True to disable.
      */
     setDisabled : function(disabled) {
         return this[disabled ? 'disable': 'enable']();
@@ -2153,8 +2643,7 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
     },
 
     /**
-     * @deprecated 4.0 Replaced by {link:#addCls}
-     * Adds a CSS class to the top level element representing this component.
+     * Adds a CSS class to the top level element representing this component.
      * @param {String} cls The CSS class name to add
      * @return {Ext.Component} Returns the Component to allow method chaining.
      */
@@ -2164,7 +2653,8 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
 
     /**
      * Removes a CSS class from the top level element representing this component.
-     * @returns {Ext.Component} Returns the Component to allow method chaining.
+     * @param {Object} className
+     * @return {Ext.Component} Returns the Component to allow method chaining.
      */
     removeCls : function(className) {
         var me = this;
@@ -2237,14 +2727,35 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
                 me.mon(me[element], listeners);
             } else {
                 me.afterRenderEvents = me.afterRenderEvents || {};
-                me.afterRenderEvents[element] = listeners;
+                if (!me.afterRenderEvents[element]) {
+                    me.afterRenderEvents[element] = [];
+                }
+                me.afterRenderEvents[element].push(listeners);
             }
         }
 
         return me.mixins.observable.addListener.apply(me, arguments);
     },
 
-    // @TODO: implement removelistener to support the dom event stuff
+    // inherit docs
+    removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
+        var me = this,
+            element = managedListener.options ? managedListener.options.element : null;
+
+        if (element) {
+            element = me[element];
+            if (element && element.un) {
+                if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
+                    element.un(managedListener.ename, managedListener.fn, managedListener.scope);
+                    if (!isClear) {
+                        Ext.Array.remove(me.managedListeners, managedListener);
+                    }
+                }
+            }
+        } else {
+            return me.mixins.observable.removeManagedListenerItem.apply(me, arguments);
+        }
+    },
 
     /**
      * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
@@ -2284,7 +2795,7 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
      * respective Container, firing an added event.
      * References are established at add time rather than at render time.
      * @param {Ext.container.Container} container Container which holds the component
-     * @param {number} pos Position at which the component was added
+     * @param {Number} pos Position at which the component was added
      */
     onAdded : function(container, pos) {
         this.ownerCt = container;
@@ -2312,19 +2823,22 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
 
     /**
      * Sets the width and height of this Component. This method fires the {@link #resize} event. This method can accept
-     * either width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>.
-     * @param {Mixed} width The new width to set. This may be one of:<div class="mdetail-params"><ul>
-     * <li>A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).</li>
-     * <li>A String used to set the CSS width style.</li>
-     * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
-     * <li><code>undefined</code> to leave the width unchanged.</li>
-     * </ul></div>
-     * @param {Mixed} height The new height to set (not required if a size object is passed as the first arg).
-     * This may be one of:<div class="mdetail-params"><ul>
-     * <li>A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).</li>
-     * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
-     * <li><code>undefined</code> to leave the height unchanged.</li>
-     * </ul></div>
+     * either width and height as separate arguments, or you can pass a size object like `{width:10, height:20}`.
+     *
+     * @param {Number/String/Object} width The new width to set. This may be one of:
+     *
+     *   - A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
+     *   - A String used to set the CSS width style.
+     *   - A size object in the format `{width: widthValue, height: heightValue}`.
+     *   - `undefined` to leave the width unchanged.
+     *
+     * @param {Number/String} height The new height to set (not required if a size object is passed as the first arg).
+     * This may be one of:
+     *
+     *   - A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
+     *   - A String used to set the CSS height style. Animation may **not** be used.
+     *   - `undefined` to leave the height unchanged.
+     *
      * @return {Ext.Component} this
      */
     setSize : function(width, height) {
@@ -2368,13 +2882,39 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
         return me;
     },
 
-    setCalculatedSize : function(width, height, ownerCt) {
+    isFixedWidth: function() {
+        var me = this,
+            layoutManagedWidth = me.layoutManagedWidth;
+
+        if (Ext.isDefined(me.width) || layoutManagedWidth == 1) {
+            return true;
+        }
+        if (layoutManagedWidth == 2) {
+            return false;
+        }
+        return (me.ownerCt && me.ownerCt.isFixedWidth());
+    },
+
+    isFixedHeight: function() {
+        var me = this,
+            layoutManagedHeight = me.layoutManagedHeight;
+
+        if (Ext.isDefined(me.height) || layoutManagedHeight == 1) {
+            return true;
+        }
+        if (layoutManagedHeight == 2) {
+            return false;
+        }
+        return (me.ownerCt && me.ownerCt.isFixedHeight());
+    },
+
+    setCalculatedSize : function(width, height, callingContainer) {
         var me = this,
             layoutCollection;
 
         // support for standard size objects
         if (Ext.isObject(width)) {
-            ownerCt = width.ownerCt;
+            callingContainer = width.ownerCt;
             height = width.height;
             width  = width.width;
         }
@@ -2398,11 +2938,11 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
                 width: width,
                 height: height,
                 isSetSize: false,
-                ownerCt: ownerCt
+                ownerCt: callingContainer
             };
             return me;
         }
-        me.doComponentLayout(width, height, false, ownerCt);
+        me.doComponentLayout(width, height, false, callingContainer);
 
         return me;
     },
@@ -2410,28 +2950,55 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
     /**
      * This method needs to be called whenever you change something on this component that requires the Component's
      * layout to be recalculated.
+     * @param {Object} width
+     * @param {Object} height
+     * @param {Object} isSetSize
+     * @param {Object} callingContainer
      * @return {Ext.container.Container} this
      */
-    doComponentLayout : function(width, height, isSetSize, ownerCt) {
+    doComponentLayout : function(width, height, isSetSize, callingContainer) {
         var me = this,
-            componentLayout = me.getComponentLayout();
+            componentLayout = me.getComponentLayout(),
+            lastComponentSize = componentLayout.lastComponentSize || {
+                width: undefined,
+                height: undefined
+            };
 
         // collapsed state is not relevant here, so no testing done.
         // Only Panels have a collapse method, and that just sets the width/height such that only
         // a single docked Header parallel to the collapseTo side are visible, and the Panel body is hidden.
         if (me.rendered && componentLayout) {
-            width = (width !== undefined) ? width : me.width;
-            height = (height !== undefined) ? height : me.height;
+            // If no width passed, then only insert a value if the Component is NOT ALLOWED to autowidth itself.
+            if (!Ext.isDefined(width)) {
+                if (me.isFixedWidth()) {
+                    width = Ext.isDefined(me.width) ? me.width : lastComponentSize.width;
+                }
+            }
+            // If no height passed, then only insert a value if the Component is NOT ALLOWED to autoheight itself.
+            if (!Ext.isDefined(height)) {
+                if (me.isFixedHeight()) {
+                    height = Ext.isDefined(me.height) ? me.height : lastComponentSize.height;
+                }
+            }
+
             if (isSetSize) {
                 me.width = width;
                 me.height = height;
             }
 
-            componentLayout.layout(width, height, isSetSize, ownerCt);
+            componentLayout.layout(width, height, isSetSize, callingContainer);
         }
+
         return me;
     },
 
+    /**
+     * Forces this component to redo its componentLayout.
+     */
+    forceComponentLayout: function () {
+        this.doComponentLayout();
+    },
+
     // @private
     setComponentLayout : function(layout) {
         var currentLayout = this.componentLayout;
@@ -2452,30 +3019,39 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
     },
 
     /**
-     * @param {Number} adjWidth The box-adjusted width that was set
+     * Occurs after componentLayout is run.
+     * @param {Number} adjWidth The box-adjusted width that was set
      * @param {Number} adjHeight The box-adjusted height that was set
      * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently
-     * @param {Ext.Component} layoutOwner Component which sent the layout. Only used when isSetSize is false.
+     * @param {Ext.Component} callingContainer Container requesting the layout. Only used when isSetSize is false.
      */
-    afterComponentLayout: function(width, height, isSetSize, layoutOwner) {
-        this.fireEvent('resize', this, width, height);
+    afterComponentLayout: function(width, height, isSetSize, callingContainer) {
+        var me = this,
+            layout = me.componentLayout,
+            oldSize = me.preLayoutSize;
+
+        ++me.componentLayoutCounter;
+        if (!oldSize || ((width !== oldSize.width) || (height !== oldSize.height))) {
+            me.fireEvent('resize', me, width, height);
+        }
     },
 
     /**
-     * Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout
-     * from being executed.
+     * Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from
+     * being executed.
      * @param {Number} adjWidth The box-adjusted width that was set
      * @param {Number} adjHeight The box-adjusted height that was set
      * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently
-     * @param {Ext.Component} layoutOwner Component which sent the layout. Only used when isSetSize is false.
+     * @param {Ext.Component} callingContainer Container requesting sent the layout. Only used when isSetSize is false.
      */
-    beforeComponentLayout: function(width, height, isSetSize, layoutOwner) {
+    beforeComponentLayout: function(width, height, isSetSize, callingContainer) {
+        this.preLayoutSize = this.componentLayout.lastComponentSize;
         return true;
     },
 
     /**
-     * Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.
-     * This method fires the {@link #move} event.
+     * Sets the left and top of the component. To set the page XY position instead, use
+     * {@link Ext.Component#setPagePosition setPagePosition}. This method fires the {@link #move} event.
      * @param {Number} left The new left
      * @param {Number} top The new top
      * @return {Ext.Component} this
@@ -2500,7 +3076,8 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
         return me;
     },
 
-    /* @private
+    /**
+     * @private
      * Called after the component is moved, this method is empty by default but can be implemented by any
      * subclass that needs to perform custom logic after a move occurs.
      * @param {Number} x The new x position
@@ -2509,11 +3086,13 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
     onPosition: Ext.emptyFn,
 
     /**
-     * Sets the width of the component.  This method fires the {@link #resize} event.
-     * @param {Number} width The new width to setThis may be one of:<div class="mdetail-params"><ul>
-     * <li>A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).</li>
-     * <li>A String used to set the CSS width style.</li>
-     * </ul></div>
+     * Sets the width of the component. This method fires the {@link #resize} event.
+     *
+     * @param {Number} width The new width to setThis may be one of:
+     *
+     *   - A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
+     *   - A String used to set the CSS width style.
+     *
      * @return {Ext.Component} this
      */
     setWidth : function(width) {
@@ -2521,12 +3100,14 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
     },
 
     /**
-     * Sets the height of the component.  This method fires the {@link #resize} event.
-     * @param {Number} height The new height to set. This may be one of:<div class="mdetail-params"><ul>
-     * <li>A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).</li>
-     * <li>A String used to set the CSS height style.</li>
-     * <li><i>undefined</i> to leave the height unchanged.</li>
-     * </ul></div>
+     * Sets the height of the component. This method fires the {@link #resize} event.
+     *
+     * @param {Number} height The new height to set. This may be one of:
+     *
+     *   - A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
+     *   - A String used to set the CSS height style.
+     *   - _undefined_ to leave the height unchanged.
+     *
      * @return {Ext.Component} this
      */
     setHeight : function(height) {
@@ -2583,11 +3164,11 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
 
     /**
      * This method allows you to show or hide a LoadMask on top of this component.
-     * @param {Boolean/Object/String} load True to show the default LoadMask, a config object
-     * that will be passed to the LoadMask constructor, or a message String to show. False to
-     * hide the current LoadMask.
-     * @param {Boolean} targetEl True to mask the targetEl of this Component instead of the this.el.
-     * For example, setting this to true on a Panel will cause only the body to be masked. (defaults to false)
+     *
+     * @param {Boolean/Object/String} load True to show the default LoadMask, a config object that will be passed to the
+     * LoadMask constructor, or a message String to show. False to hide the current LoadMask.
+     * @param {Boolean} [targetEl=false] True to mask the targetEl of this Component instead of the `this.el`. For example,
+     * setting this to true on a Panel will cause only the body to be masked.
      * @return {Ext.LoadMask} The LoadMask instance that has just been shown.
      */
     setLoading : function(load, targetEl) {
@@ -2617,11 +3198,11 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
     },
 
     /**
-     * Sets the dock position of this component in its parent panel. Note that
-     * this only has effect if this item is part of the dockedItems collection
-     * of a parent that has a DockLayout (note that any Panel has a DockLayout
-     * by default)
-     * @return {Component} this
+     * Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part
+     * of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default)
+     * @param {Object} dock The dock position.
+     * @param {Boolean} [layoutParent=false] True to re-layout parent.
+     * @return {Ext.Component} this
      */
     setDocked : function(dock, layoutParent) {
         var me = this;
@@ -2639,7 +3220,49 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
         if (me.monitorResize && Ext.EventManager.resizeEvent) {
             Ext.EventManager.resizeEvent.removeListener(me.setSize, me);
         }
-        Ext.destroy(me.componentLayout, me.loadMask);
+        // Destroying the floatingItems ZIndexManager will also destroy descendant floating Components
+        Ext.destroy(
+            me.componentLayout,
+            me.loadMask,
+            me.floatingItems
+        );
+    },
+
+    /**
+     * Remove any references to elements added via renderSelectors/childEls
+     * @private
+     */
+    cleanElementRefs: function(){
+        var me = this,
+            i = 0,
+            childEls = me.childEls,
+            selectors = me.renderSelectors,
+            selector,
+            name,
+            len;
+
+        if (me.rendered) {
+            if (childEls) {
+                for (len = childEls.length; i < len; ++i) {
+                    name = childEls[i];
+                    if (typeof(name) != 'string') {
+                        name = name.name;
+                    }
+                    delete me[name];
+                }
+            }
+
+            if (selectors) {
+                for (selector in selectors) {
+                    if (selectors.hasOwnProperty(selector)) {
+                        delete me[selector];
+                    }
+                }
+            }
+        }
+        delete me.rendered;
+        delete me.el;
+        delete me.frameBody;
     },
 
     /**
@@ -2664,21 +3287,23 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
                     me.ownerCt.remove(me, false);
                 }
 
-                if (me.rendered) {
-                    me.el.remove();
-                }
-
                 me.onDestroy();
 
                 // Attempt to destroy all plugins
                 Ext.destroy(me.plugins);
 
-                Ext.ComponentManager.unregister(me);
+                if (me.rendered) {
+                    me.el.remove();
+                }
+
                 me.fireEvent('destroy', me);
+                Ext.ComponentManager.unregister(me);
 
                 me.mixins.state.destroy.call(me);
 
                 me.clearListeners();
+                // make sure we clean up the element references after removing all events
+                me.cleanElementRefs();
                 me.destroying = false;
                 me.isDestroyed = true;
             }
@@ -2686,9 +3311,9 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
     },
 
     /**
-     * Retrieves a plugin by its pluginId which has been bound to this
-     * component.
-     * @returns {Ext.AbstractPlugin} pluginInstance
+     * Retrieves a plugin by its pluginId which has been bound to this component.
+     * @param {Object} pluginId
+     * @return {Ext.AbstractPlugin} plugin instance.
      */
     getPlugin: function(pluginId) {
         var i = 0,
@@ -2700,11 +3325,11 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
             }
         }
     },
-    
+
     /**
      * Determines whether this component is the descendant of a particular container.
      * @param {Ext.Container} container
-     * @returns {Boolean} isDescendant
+     * @return {Boolean} True if it is.
      */
     isDescendantOf: function(container) {
         return !!this.findParentBy(function(p){
@@ -2718,4 +3343,6 @@ alert(t.getXTypes());  // alerts 'component/field/textfield'
         next: 'nextSibling'
     });
 });
-
\ No newline at end of file +
+ +