    /**
     * Given a component hierarchy of this:
     *
     *      {
     *          xtype: 'panel',
     *          id: 'ContainerA',
     *          layout: 'hbox',
     *          renderTo: Ext.getBody(),
     *          items: [
     *              {
     *                  id: 'ContainerB',
     *                  xtype: 'container',
     *                  items: [
     *                      { id: 'ComponentA' }
     *                  ]
     *              }
     *          ]
     *      }
     *
     * The rendering of the above proceeds roughly like this:
     *
     *  - ContainerA's initComponent calls #render passing the `renderTo` property as the
     *    container argument.
     *  - `render` calls the `getRenderTree` method to get a complete {@link Ext.DomHelper} spec.
     *  - `getRenderTree` fires the "beforerender" event and calls the #beforeRender
     *    method. Its result is obtained by calling #getElConfig.
     *  - The #getElConfig method uses the `renderTpl` and its render data as the content
     *    of the `autoEl` described element.
     *  - The result of `getRenderTree` is passed to {@link Ext.DomHelper#append}.
     *  - The `renderTpl` contains calls to render things like docked items, container items
     *    and raw markup (such as the `html` or `tpl` config properties). These calls are to
     *    methods added to the {@link Ext.XTemplate} instance by #setupRenderTpl.
     *  - The #setupRenderTpl method adds methods such as `renderItems`, `renderContent`, etc.
     *    to the template. These are directed to "doRenderItems", "doRenderContent" etc..
     *  - The #setupRenderTpl calls traverse from components to their {@link Ext.layout.Layout}
     *    object.
     *  - When a container is rendered, it also has a `renderTpl`. This is processed when the
     *    `renderContainer` method is called in the component's `renderTpl`. This call goes to
     *    Ext.layout.container.Container#doRenderContainer. This method repeats this
     *    process for all components in the container.
     *  - After the top-most component's markup is generated and placed in to the DOM, the next
     *    step is to link elements to their components and finish calling the component methods
     *    `onRender` and `afterRender` as well as fire the corresponding events.
     *  - The first step in this is to call #finishRender. This method descends the
     *    component hierarchy and calls `onRender` and fires the `render` event. These calls
     *    are delivered top-down to approximate the timing of these calls/events from previous
     *    versions.
     *  - During the pass, the component's `el` is set. Likewise, the `renderSelectors` and
     *    `childEls` are applied to capture references to the component's elements.
     *  - These calls are also made on the {@link Ext.layout.container.Container} layout to
     *    capture its elements. Both of these classes use {@link Ext.util.ElementContainer} to
     *    handle `childEls` processing.
     *  - Once this is complete, a similar pass is made by calling #finishAfterRender.
     *    This call also descends the component hierarchy, but this time the calls are made in
     *    a bottom-up order to `afterRender`.
     *
     * @private
     */
    Ext.define('Ext.util.Renderable', {
        requires: [
            'Ext.dom.Element'
        ],

        frameCls: Ext.baseCSSPrefix + 'frame',

        frameIdRegex: /[\-]frame\d+[TMB][LCR]$/,

        frameElNames: ['TL','TC','TR','ML','MC','MR','BL','BC','BR'],

        frameTpl: [
            '{%this.renderDockedItems(out,values,0);%}',
            '<tpl if="top">',
                '<tpl if="left"><div id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl>{frameElCls}" role="presentation"></tpl>',
                    '<tpl if="right"><div id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl>{frameElCls}" role="presentation"></tpl>',
                        '<div id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl>{frameElCls}" role="presentation"></div>',
                    '<tpl if="right"></div></tpl>',
                '<tpl if="left"></div></tpl>',
            '</tpl>',
            '<tpl if="left"><div id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl>{frameElCls}" role="presentation"></tpl>',
                '<tpl if="right"><div id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl>{frameElCls}" role="presentation"></tpl>',
                    '<div id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl>{frameElCls}" role="presentation">',
                        '{%this.applyRenderTpl(out, values)%}',
                    '</div>',
                '<tpl if="right"></div></tpl>',
            '<tpl if="left"></div></tpl>',
            '<tpl if="bottom">',
                '<tpl if="left"><div id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl>{frameElCls}" role="presentation"></tpl>',
                    '<tpl if="right"><div id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl>{frameElCls}" role="presentation"></tpl>',
                        '<div id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl>{frameElCls}" role="presentation"></div>',
                    '<tpl if="right"></div></tpl>',
                '<tpl if="left"></div></tpl>',
            '</tpl>',
            '{%this.renderDockedItems(out,values,1);%}'
        ],

        frameTableTpl: [
            '{%this.renderDockedItems(out,values,0);%}',
            '<table class="', Ext.plainTableCls, '" cellpadding="0"><tbody>',
                '<tpl if="top">',
                    '<tr>',
                        '<tpl if="left"><td id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl>{frameElCls}" role="presentation"></td></tpl>',
                        '<td id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl>{frameElCls}" role="presentation"></td>',
                        '<tpl if="right"><td id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl>{frameElCls}" role="presentation"></td></tpl>',
                    '</tr>',
                '</tpl>',
                '<tr>',
                    '<tpl if="left"><td id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl>{frameElCls}" role="presentation"></td></tpl>',
                    '<td id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl>{frameElCls}" role="presentation">',
                        '{%this.applyRenderTpl(out, values)%}',
                    '</td>',
                    '<tpl if="right"><td id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl>{frameElCls}" role="presentation"></td></tpl>',
                '</tr>',
                '<tpl if="bottom">',
                    '<tr>',
                        '<tpl if="left"><td id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl>{frameElCls}" role="presentation"></td></tpl>',
                        '<td id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl>{frameElCls}" role="presentation"></td>',
                        '<tpl if="right"><td id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl>{frameElCls}" role="presentation"></td></tpl>',
                    '</tr>',
                '</tpl>',
            '</tbody></table>',
            '{%this.renderDockedItems(out,values,1);%}'
        ],

        /**
         * Allows addition of behavior after rendering is complete. At this stage the Component’s Element
         * will have been styled according to the configuration, will have had any configured CSS class
         * names added, and will be in the configured visibility and the configured enable state.
         *
         * @template
         * @protected
         */
        afterRender : function() {
            var me = this,
                data = {},
                protoEl = me.protoEl,
                target = me.el,
                item, pre, hide, contentEl;

            me.finishRenderChildren();

            // We need to do the contentEl here because it depends on the layout items (inner/outerCt)
            // to be rendered before we can put it in
            if (me.contentEl) {
                pre = Ext.baseCSSPrefix;
                hide = pre + 'hide-';
                contentEl = Ext.get(me.contentEl);
                contentEl.removeCls([pre+'hidden', hide+'display', hide+'offsets', hide+'nosize']);
                me.getContentTarget().appendChild(contentEl.dom);
            }

            protoEl.writeTo(data);

            // Here we apply any styles that were set on the protoEl during the rendering phase
            // A majority of times this will not happen, but we still need to handle it

            item = data.removed;
            if (item) {
                target.removeCls(item);
            }

            item = data.cls;
            if (item.length) {
                target.addCls(item);
            }

            item = data.style;
            if (data.style) {
                target.setStyle(item);
            }

            me.protoEl = null;

            // If this is the outermost Container, lay it out as soon as it is rendered.
            if (!me.ownerCt) {
                me.updateLayout();
            }
        },

        afterFirstLayout : function(width, height) {
            var me = this,
                x = me.x,
                y = me.y,
                hasX,
                hasY,
                pos, xy;

            // We only have to set absolute position here if there is no ownerlayout which should take responsibility.
            // Consider the example of rendered components outside of a viewport - these might need their positions setting.
            if (!me.ownerLayout) {
                hasX = Ext.isDefined(x);
                hasY = Ext.isDefined(y);
            }

            // For floaters, calculate x and y if they aren't defined by aligning
            // the sized element to the center of either the container or the ownerCt
            if (me.floating && (!hasX || !hasY)) {
                if (me.floatParent) {
                    pos = me.floatParent.getTargetEl().getViewRegion();
                    xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
                    pos.x = xy[0] - pos.x;
                    pos.y = xy[1] - pos.y;
                } else {
                    xy = me.el.getAlignToXY(me.container, 'c-c');
                    pos = me.container.translateXY(xy[0], xy[1]);
                }
                x = hasX ? x : pos.x;
                y = hasY ? y : pos.y;
                hasX = hasY = true;
            }

            if (hasX || hasY) {
                me.setPosition(x, y);
            }
            me.onBoxReady(width, height);
        },

        /**
         * Sets references to elements inside the component. This applies {@link Ext.AbstractComponent#cfg-renderSelectors renderSelectors}
         * as well as {@link Ext.AbstractComponent#cfg-childEls childEls}.
         * @private
         */
        applyRenderSelectors: function() {
            var me = this,
                selectors = me.renderSelectors,
                el = me.el,
                dom = el.dom,
                selector;

            me.applyChildEls(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));
                    }
                }
            }
        },

        beforeRender: function () {
            var me = this,
                target = me.getTargetEl(),
                overflowEl = me.getOverflowEl(),
                layout = me.getComponentLayout(),
                // Call the style calculation early which sets the public scrollFlags property
                overflowStyle = me.getOverflowStyle();

            // Just before rendering, set the frame flag if we are an always-framed component like Window or Tip.
            me.frame = me.frame || me.alwaysFramed;

            if (!layout.initialized) {
                layout.initLayout();
            }

            // Attempt to set overflow style prior to render if the targetEl can be accessed.
            // If the targetEl does not exist yet, this will take place in finishRender
            if (overflowEl) {
                overflowEl.setStyle(overflowStyle);
                me.overflowStyleSet = true;
            }

            me.setUI(me.ui);

            if (me.disabled) {
                // pass silent so the event doesn't fire the first time.
                me.disable(true);
            }
        },

        /**
         * @private
         * Called from the selected frame generation template to insert this Component's inner structure inside the framing structure.
         *
         * When framing is used, a selected frame generation template is used as the primary template of the #getElConfig instead
         * of the configured {@link Ext.AbstractComponent#renderTpl renderTpl}. The renderTpl is invoked by this method which is injected into the framing template.
         */
        doApplyRenderTpl: function(out, values) {
            // Careful! This method is bolted on to the frameTpl so all we get for context is
            // the renderData! The "this" pointer is the frameTpl instance!

            var me = values.$comp,
                tpl;

            // Don't do this if the component is already rendered:
            if (!me.rendered) {
                tpl = me.initRenderTpl();
                tpl.applyOut(values.renderData, out);
            }
        },

        /**
         * 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;
            if (!me.rendered) {
                if (me.floating) {
                    me.render(document.body);
                } else {
                    me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender);
                }
            }
        },

        doRenderContent: function (out, renderData) {
            // Careful! This method is bolted on to the renderTpl so all we get for context is
            // the renderData! The "this" pointer is the renderTpl instance!

            var me = renderData.$comp;

            if (me.html) {
                Ext.DomHelper.generateMarkup(me.html, out);
                delete me.html;
            }

            if (me.tpl) {
                // Make sure this.tpl is an instantiated XTemplate
                if (!me.tpl.isTemplate) {
                    me.tpl = new Ext.XTemplate(me.tpl);
                }

                if (me.data) {
                    //me.tpl[me.tplWriteMode](target, me.data);
                    me.tpl.applyOut(me.data, out);
                    delete me.data;
                }
            }
        },

        doRenderFramingDockedItems: function (out, renderData, after) {
            // Careful! This method is bolted on to the frameTpl so all we get for context is
            // the renderData! The "this" pointer is the frameTpl instance!

            var me = renderData.$comp;

            // Most components don't have dockedItems, so check for doRenderDockedItems on the
            // component (also, don't do this if the component is already rendered):
            if (!me.rendered && me.doRenderDockedItems) {
                // The "renderData" property is placed in scope for the renderTpl, but we don't
                // want to render docked items at that level in addition to the framing level:
                renderData.renderData.$skipDockedItems = true;

                // doRenderDockedItems requires the $comp property on renderData, but this is
                // set on the frameTpl's renderData as well:
                me.doRenderDockedItems.call(this, out, renderData, after);
            }
        },

        /**
         * This method visits the rendered component tree in a "top-down" order. That is, this
         * code runs on a parent component before running on a child. This method calls the
         * {@link #onRender} method of each component.
         * @param {Number} containerIdx The index into the Container items of this Component.
         *
         * @private
         */
        finishRender: function(containerIdx) {
            var me = this,
                tpl, data, el;

            // We are typically called w/me.el==null as a child of some ownerCt that is being
            // rendered. We are also called by render for a normal component (w/o a configured
            // me.el). In this case, render sets me.el and me.rendering (indirectly). Lastly
            // we are also called on a component (like a Viewport) that has a configured me.el
            // (body for a Viewport) when render is called. In this case, it is not flagged as
            // "me.rendering" yet becasue it does not produce a renderTree. We use this to know
            // not to regen the renderTpl.

            if (!me.el || me.$pid) {
                if (me.container) {
                    el = me.container.getById(me.id, true);
                } else {
                    el = Ext.getDom(me.id);
                }

                if (!me.el) {
                    // Typical case: we produced the el during render
                    me.wrapPrimaryEl(el);
                } else {
                    // We were configured with an el and created a proxy, so now we can swap
                    // the proxy for me.el:
                    delete me.$pid;

                    if (!me.el.dom) {
                        // make sure me.el is an Element
                        me.wrapPrimaryEl(me.el);
                    }
                    el.parentNode.insertBefore(me.el.dom, el);
                    Ext.removeNode(el); // remove placeholder el
                    // TODO - what about class/style?
                }
            } else if (!me.rendering) {
                // We were configured with an el and then told to render (e.g., Viewport). We
                // need to generate the proper DOM. Insert first because the layout system
                // insists that child Component elements indices match the Component indices.
                tpl = me.initRenderTpl();
                if (tpl) {
                    data = me.initRenderData();
                    tpl.insertFirst(me.getTargetEl(), data);
                }
            }
            // else we are rendering

            if (!me.container) {
                // top-level rendered components will already have me.container set up
                me.container = Ext.get(me.el.dom.parentNode);
            }

            if (me.ctCls) {
                me.container.addCls(me.ctCls);
            }

            // Sets the rendered flag and clears the rendering flag
            me.onRender(me.container, containerIdx);

            // If we could not access a target protoEl in beforeRender, we have to set the overflow styles here.
            if (!me.overflowStyleSet) {
                me.getOverflowEl().setStyle(me.getOverflowStyle());
            }

            // 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.Element[me.hideMode.toUpperCase()]);

            if (me.overCls) {
                me.el.hover(me.addOverCls, me.removeOverCls, me);
            }

            if (me.hasListeners.render) {
                me.fireEvent('render', me);
            }

            me.afterRender(); // this can cause a layout
            if (me.hasListeners.afterrender) {
                me.fireEvent('afterrender', me);
            }
            me.initEvents();

            if (me.hidden) {
                // Hiding during the render process should not perform any ancillary
                // actions that the full hide process does; It is not hiding, it begins in a hidden state.'
                // So just make the element hidden according to the configured hideMode
                me.el.hide();
            }
        },

        finishRenderChildren: function () {
            var layout = this.getComponentLayout();

            layout.finishRender();
        },

        getElConfig : function() {
            var me = this,
                autoEl = me.autoEl,
                frameInfo = me.getFrameInfo(),
                config = {
                    tag: 'div',
                    tpl: frameInfo ? me.initFramingTpl(frameInfo.table) : me.initRenderTpl()
                },
                protoEl = me.protoEl,
                i, frameElNames, len, suffix, frameGenId, frameData;

            me.initStyles(protoEl);
            protoEl.writeTo(config);
            protoEl.flush();

            if (Ext.isString(autoEl)) {
                config.tag = autoEl;
            } else {
                Ext.apply(config, autoEl); // harmless if !autoEl
            }

            // It's important to assign the id here as an autoEl.id could have been (wrongly) applied and this would get things out of sync
            config.id = me.id;

            if (config.tpl) {
                // Use the framingTpl as the main content creating template. It will call out to this.applyRenderTpl(out, values)
                if (frameInfo) {
                    frameElNames = me.frameElNames;
                    len = frameElNames.length;

                    config.tplData = frameData = me.getFrameRenderData();
                    frameData.renderData = me.initRenderData();
                    frameGenId = frameData.fgid;

                    // Add the childEls for each of the frame elements
                    for (i = 0; i < len; i++) {
                        suffix = frameElNames[i];
                        me.addChildEls({ name: 'frame' + suffix, id: frameGenId + suffix });
                    }

                    // Panel must have a frameBody
                    me.addChildEls({
                        name: 'frameBody',
                        id: frameGenId + 'MC'
                    });
                } else {
                    config.tplData = me.initRenderData();
                }
            }

            return config;
        },

        // Create the framingTpl from the string.
        // Poke in a reference to applyRenderTpl(frameInfo, out)
        initFramingTpl: function(table) {
            var tpl = this.getFrameTpl(table);

            if (tpl && !tpl.applyRenderTpl) {
                this.setupFramingTpl(tpl);
            }

            return tpl;
        },

        /**
         * @private
         * Inject a reference to the function which applies the render template into the framing template. The framing template
         * wraps the content.
         */
        setupFramingTpl: function(frameTpl) {
            frameTpl.applyRenderTpl = this.doApplyRenderTpl;
            frameTpl.renderDockedItems = this.doRenderFramingDockedItems;
        },

        /**
         * 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.dom.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) {
            // Convert the position to an element to insert before
            if (position !== undefined) {
                if (Ext.isNumber(position)) {
                    position = this.container.dom.childNodes[position];
                }
                else {
                    position = Ext.getDom(position);
                }
            }

            return position;
        },

        getRenderTree: function() {
            var me = this;

            if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
                me.beforeRender();

                // Flag to let the layout's finishRenderItems and afterFinishRenderItems
                // know which items to process
                me.rendering = true;

                if (me.el) {
                    // Since we are producing a render tree, we produce a "proxy el" that will
                    // sit in the rendered DOM precisely where me.el belongs. We replace the
                    // proxy el in the finishRender phase.
                    return {
                        tag: 'div',
                        id: (me.$pid = Ext.id())
                    };
                }

                return me.getElConfig();
            }

            return null;
        },

        initContainer: function(container) {
            var me = this;

            // If you render a component specifying the el, we get the container
            // of the el, and make sure we dont move the el around in the dom
            // during the render
            if (!container && me.el) {
                container = me.el.dom.parentNode;
                me.allowDomMove = false;
            }
            me.container = container.dom ? container : Ext.get(container);

            return me.container;
        },

        /**
         * Initialized the renderData to be used when rendering the renderTpl.
         * @return {Object} Object with keys and values that are going to be applied to the renderTpl
         * @protected
         */
        initRenderData: function() {
            var me = this;

            return Ext.apply({
                $comp: me,
                id: me.id,
                ui: me.ui,
                uiCls: me.uiCls,
                baseCls: me.baseCls,
                componentCls: me.componentCls,
                frame: me.frame,
                childElCls: '' // overridden in RTL
            }, me.renderData);
        },

        /**
         * Initializes the renderTpl.
         * @return {Ext.XTemplate} The renderTpl XTemplate instance.
         * @private
         */
        initRenderTpl: function() {
            var tpl = this.getTpl('renderTpl');

            if (tpl && !tpl.renderContent) {
                this.setupRenderTpl(tpl);
            }

            return tpl;
        },

        /**
         * Template method called when this Component's DOM structure is created.
         *
         * At this point, this Component's (and all descendants') DOM structure *exists* but it has not
         * been layed out (positioned and sized).
         *
         * Subclasses which override this to gain access to the structure at render time should
         * call the parent class's method before attempting to access any child elements of the Component.
         *
         * @param {Ext.core.Element} parentNode The parent Element in which this Component's encapsulating element is contained.
         * @param {Number} containerIdx The index within the parent Container's child collection of this Component.
         *
         * @template
         * @protected
         */
        onRender: function(parentNode, containerIdx) {
            var me = this,
                x = me.x,
                y = me.y,
                lastBox = null,
                width, height,
                el = me.el;

            me.applyRenderSelectors();

            // Flag set on getRenderTree to flag to the layout's postprocessing routine that
            // the Component is in the process of being rendered and needs postprocessing.
            me.rendering = null;

            me.rendered = true;

            // We need to remember these to avoid writing them during the initial layout:
            if (x != null) {
                lastBox = {x:x};
            }
            if (y != null) {
                (lastBox = lastBox || {}).y = y;
            }
            // Framed components need their width/height to apply to the frame, which is
            // best handled in layout at present.
            // If we're using the content box model, we also cannot assign initial sizes since we do not know the border widths to subtract
            if (!me.getFrameInfo() && Ext.isBorderBox) {
                width = me.width;
                height = me.height;

                if (typeof width === 'number') {
                    lastBox = lastBox || {};
                    lastBox.width = width;
                }
                if (typeof height === 'number') {
                    lastBox = lastBox || {};
                    lastBox.height = height;
                }
            }

            me.lastBox = el.lastBox = lastBox;
        },

        /**
         * Renders the Component into the passed HTML element.
         *
         * **If you are using a {@link Ext.container.Container Container} object to house this
         * Component, then do not use the render method.**
         *
         * A Container's child Components are rendered by that Container's
         * {@link Ext.container.Container#layout layout} manager when the Container is first rendered.
         *
         * If the Container is already rendered when a new child Component is added, you may need to call
         * the Container's {@link Ext.container.Container#doLayout doLayout} to refresh the view which
         * causes any unrendered child Components to be rendered. This is required so that you can add
         * multiple child components if needed while only refreshing the layout once.
         *
         * When creating complex UIs, it is important to remember that sizing and positioning
         * of child items is the responsibility of the Container's {@link Ext.container.Container#layout layout}
         * manager.  If you expect child items to be sized in response to user interactions, you must
         * configure the Container with a layout manager which creates and manages the type of layout you
         * have in mind.
         *
         * **Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
         * layout manager is used which does nothing but render child components sequentially into the
         * Container. No sizing or positioning will be performed in this situation.**
         *
         * @param {Ext.Element/HTMLElement/String} [container] The element this Component should be
         * rendered into. If it is being created from existing markup, this should be omitted.
         * @param {String/Number} [position] The element ID or DOM node index within the container **before**
         * which this component will be inserted (defaults to appending to the end of the container)
         */
        render: function(container, position) {
            var me = this,
                el = me.el && (me.el = Ext.get(me.el)), // ensure me.el is wrapped
                vetoed,
                tree,
                nextSibling;

            Ext.suspendLayouts();

            container = me.initContainer(container);

            nextSibling = me.getInsertPosition(position);

            if (!el) {
                tree = me.getRenderTree();
                if (me.ownerLayout && me.ownerLayout.transformItemRenderTree) {
                    tree = me.ownerLayout.transformItemRenderTree(tree);
                }

                // tree will be null if a beforerender listener returns false
                if (tree) {
                    if (nextSibling) {
                        el = Ext.DomHelper.insertBefore(nextSibling, tree);
                    } else {
                        el = Ext.DomHelper.append(container, tree);
                    }

                    me.wrapPrimaryEl(el);
                }
            } else {
                if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
                    me.beforeRender();
                    // Set configured styles on pre-rendered Component's element
                    me.initStyles(el);
                    if (me.allowDomMove !== false) {
                        if (nextSibling) {
                            container.dom.insertBefore(el.dom, nextSibling);
                        } else {
                            container.dom.appendChild(el.dom);
                        }
                    }
                } else {
                    vetoed = true;
                }
            }

            if (el && !vetoed) {
                me.finishRender(position);
            }

            Ext.resumeLayouts(!me.hidden && !container.isDetachedBody);
        },

        /**
         * Ensures that this component is attached to `document.body`. If the component was
         * rendered to {@link Ext#getDetachedBody}, then it will be appended to `document.body`.
         * Any configured position is also restored.
         * @param {Boolean} [runLayout=false] True to run the component's layout.
         */
        ensureAttachedToBody: function (runLayout) {
            var comp = this,
                body;

            while (comp.ownerCt) {
                comp = comp.ownerCt;
            }

            if (comp.container.isDetachedBody) {
                comp.container = body = Ext.getBody();
                body.appendChild(comp.el.dom);
                if (runLayout) {
                    comp.updateLayout();
                }
                if (typeof comp.x == 'number' || typeof comp.y == 'number') {
                    comp.setPosition(comp.x, comp.y);
                }
            }
        },

        setupRenderTpl: function (renderTpl) {
            renderTpl.renderBody = renderTpl.renderContent = this.doRenderContent;
        },

        wrapPrimaryEl: function (dom) {
            this.el = Ext.get(dom, true);
        },

        /**
         * @private
         */
        initFrame : function() {
            if (Ext.supports.CSS3BorderRadius || !this.frame) {
                return;
            }

            var me = this,
                frameInfo = me.getFrameInfo(),
                frameTpl, frameGenId,
                frameElNames = me.frameElNames,
                len = frameElNames.length,
                i, frameData, suffix;

            if (frameInfo) {
                frameTpl = me.getFrameTpl(frameInfo.table);
                frameData = me.getFrameRenderData();
                frameGenId = frameData.fgid;

                // Here we render the frameTpl to this component. This inserts the 9point div
                // or the table framing.
                frameTpl.insertFirst(me.el, frameData);

                // The frameBody is returned in getTargetEl, so that layouts render items to
                // the correct target.
                me.frameBody = me.el.down('.' + me.frameCls + '-mc');

                // 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);
                });

                // Grab references to the childEls for each of the new frame elements
                for (i = 0; i < len; i++) {
                    suffix = frameElNames[i];
                    me['frame' + suffix] = me.el.getById(frameGenId + suffix);
                }
            }
        },

        getFrameRenderData: function () {
            var me = this,
                // we are only called if framing so this has already been determined:
                frameInfo = me.frameSize,
                frameGenId = (me.frameGenId || 0) + 1;

            // 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;

            return {
                $comp:      me,
                fgid:       me.id + '-frame' + frameGenId,
                ui:         me.ui,
                uiCls:      me.uiCls,
                frameCls:   me.frameCls,
                baseCls:    me.baseCls,
                top:        !!frameInfo.top,
                left:       !!frameInfo.left,
                right:      !!frameInfo.right,
                bottom:     !!frameInfo.bottom,
                // can be optionally set by a subclass or override to be an extra class to
                // be applied to all framing elements (used by RTL)
                frameElCls: ''
            };
        },

        updateFrame: function() {
            if (Ext.supports.CSS3BorderRadius || !this.frame) {
                return;
            }

            var me = this,
                wasTable = me.frameSize && me.frameSize.table,
                oldFrameTL = me.frameTL,
                oldFrameBL = me.frameBL,
                oldFrameML = me.frameML,
                oldFrameMC = me.frameMC,
                newMCClassName;

            me.initFrame();

            if (oldFrameMC) {
                if (me.frame) {

                    // Store the class names set on the new MC
                    newMCClassName = me.frameMC.dom.className;

                    // Framing elements have been selected in initFrame, no need to run applyRenderSelectors
                    // Replace the new mc with the old mc
                    oldFrameMC.insertAfter(me.frameMC);
                    me.frameMC.remove();

                    // Restore the reference to the old frame mc as the framebody
                    me.frameBody = me.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();
                        }
                        if (oldFrameBL) {
                            oldFrameBL.remove();
                        }
                        if (oldFrameML) {
                            oldFrameML.remove();
                        }
                    }
                }
            }
            else if (me.frame) {
                me.applyRenderSelectors();
            }
        },

        /**
         * @private
         * On render, reads an encoded style attribute, "filter" from the style of this Component's element.
         * This information is memoized based upon the CSS class name of this Component's element.
         * Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted
         * into the document to receive the document element's CSS class name, and therefore style attributes.
         */
        getFrameInfo: function() {
            // If native framing can be used, or this component is not going to be framed, then do not attempt to read CSS framing info.
            if (Ext.supports.CSS3BorderRadius || !this.frame) {
                return false;
            }

            var me = this,
                frameInfoCache = me.frameInfoCache,
                cls = me.getFramingInfoCls() + '-frameInfo',
                frameInfo = frameInfoCache[cls],
                max = Math.max,
                styleEl, match, info, frameTop, frameRight, frameBottom, frameLeft,
                borderWidthT, borderWidthR, borderWidthB, borderWidthL,
                paddingT, paddingR, paddingB, paddingL,
                borderRadiusTL, borderRadiusTR, borderRadiusBR, borderRadiusBL;

            if (frameInfo == null) {
                // Get the singleton frame style proxy with our el class name stamped into it.
                styleEl = Ext.fly(me.getStyleProxy(cls), 'frame-style-el');
                info = styleEl.getStyle('font-family');

                if (info) {
                    // The framing data is encoded as
                    //
                    //         D=div|T=table
                    //         |   H=horz|V=vert
                    //         |   |
                    //         |   |
                    //        [DT][HV]-[T-R-B-L]-[T-R-B-L]-[T-R-B-L]
                    //                /       /  |       |  \      \
                    //              /        /   |       |   \      \
                    //            /         /   /         \   \      \
                    //          /          /    border-width   \      \
                    //        border-radius                      padding
                    //
                    // The first 2 chars hold the div/table and horizontal/vertical flags.
                    // The 3 sets of TRBL 4-tuples are the CSS3 values for border-radius,
                    // border-width and padding, respectively.
                    //
                    info = info.split('-');

                    borderRadiusTL = parseInt(info[1], 10);
                    borderRadiusTR = parseInt(info[2], 10);
                    borderRadiusBR = parseInt(info[3], 10);
                    borderRadiusBL = parseInt(info[4], 10);
                    borderWidthT   = parseInt(info[5], 10);
                    borderWidthR   = parseInt(info[6], 10);
                    borderWidthB   = parseInt(info[7], 10);
                    borderWidthL   = parseInt(info[8], 10);
                    paddingT       = parseInt(info[9], 10);
                    paddingR       = parseInt(info[10], 10);
                    paddingB       = parseInt(info[11], 10);
                    paddingL       = parseInt(info[12], 10);

                    // This calculation should follow ext-theme-base/etc/mixins/frame.css
                    // with respect to the CSS3 equivalent formulation:
                    frameTop    = max(borderWidthT, max(borderRadiusTL, borderRadiusTR));
                    frameRight  = max(borderWidthR, max(borderRadiusTR, borderRadiusBR));
                    frameBottom = max(borderWidthB, max(borderRadiusBL, borderRadiusBR));
                    frameLeft   = max(borderWidthL, max(borderRadiusTL, borderRadiusBL));

                    frameInfo = {
                        table: info[0].charAt(0) === 't',
                        vertical: info[0].charAt(1) === 'v',

                        top: frameTop,
                        right: frameRight,
                        bottom: frameBottom,
                        left: frameLeft,

                        width: frameLeft + frameRight,
                        height: frameTop + frameBottom,

                        maxWidth: max(frameTop, frameRight, frameBottom, frameLeft),

                        border: {
                            top:    borderWidthT,
                            right:  borderWidthR,
                            bottom: borderWidthB,
                            left:   borderWidthL,
                            width:  borderWidthL + borderWidthR,
                            height: borderWidthT + borderWidthB
                        },
                        padding: {
                            top:    paddingT,
                            right:  paddingR,
                            bottom: paddingB,
                            left:   paddingL,
                            width:  paddingL + paddingR,
                            height: paddingT + paddingB
                        },
                        radius: {
                            tl: borderRadiusTL,
                            tr: borderRadiusTR,
                            br: borderRadiusBR,
                            bl: borderRadiusBL
                        }
                    };
                } else {
                    frameInfo = false;
                }

                //<debug error>
                // 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) {
                    Ext.log.error('You have set frame: true explicity on this component (' + me.getXType() + ') and it ' +
                            'does not have any framing defined in the CSS template. In this case IE cannot figure out ' +
                            'what sizes to use and thus framing on this component will be disabled.');
                }
                //</debug>

                frameInfoCache[cls] = frameInfo;
            }

            me.frame = !!frameInfo;
            me.frameSize = frameInfo;

            return frameInfo;
        },

        getFramingInfoCls: function(){
            return this.baseCls + '-' + this.ui;
        },

        /**
         * @private
         * Returns an offscreen div with the same class name as the element this is being rendered.
         * This is because child item rendering takes place in a detached div which, being not
         * part of the document, has no styling.
         */
        getStyleProxy: function(cls) {
            var result = this.styleProxyEl || (Ext.AbstractComponent.prototype.styleProxyEl = Ext.getBody().createChild({
                    style: {
                        position: 'absolute',
                        top: '-10000px'
                    }
                }, null, true));

            result.className = cls;
            return result;
        },

        /**
         * @private
         */
        getFrameTpl : function(table) {
            return this.getTpl(table ? 'frameTableTpl' : 'frameTpl');
        },

        // Cache the frame information object so as not to cause style recalculations
        frameInfoCache: {}
    });