add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / layout / container / Auto.js

/**\r
 * @class Ext.layout.container.Auto\r
 *\r
 * The AutoLayout is the default layout manager delegated by {@link Ext.container.Container} to\r
 * render any child Components when no `{@link Ext.container.Container#layout layout}` is configured into\r
 * a `{@link Ext.container.Container Container}.` AutoLayout provides only a passthrough of any layout calls\r
 * to any child containers.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.Panel', {\r
 *         width: 500,\r
 *         height: 280,\r
 *         title: 'AutoLayout Panel',\r
 *         layout: 'auto',\r
 *         renderTo: document.body,\r
 *         items: [{\r
 *             xtype: 'panel',\r
 *             title: 'Top Inner Panel',\r
 *             width: '75%',\r
 *             height: 90\r
 *         }, {\r
 *             xtype: 'panel',\r
 *             title: 'Bottom Inner Panel',\r
 *             width: '75%',\r
 *             height: 90\r
 *         }]\r
 *     });\r
 */\r
Ext.define('Ext.layout.container.Auto', {\r
\r
    /* Begin Definitions */\r
\r
    alias: ['layout.auto', 'layout.autocontainer'],\r
\r
    extend: 'Ext.layout.container.Container',\r
\r
    /* End Definitions */\r
\r
    type: 'autocontainer',\r
\r
    childEls: [\r
        'outerCt',\r
        'innerCt'\r
    ],\r
\r
    /**\r
     * @cfg {Boolean} [reserveScrollbar=false]\r
     * Set to `true` to leave space for a vertical scrollbar (if the OS shows space-consuming scrollbars) regardless\r
     * of whether a scrollbar is needed.\r
     *\r
     * This is useful if content height changes during application usage, but you do not want the calculated width\r
     * of child items to change when a scrollbar appears or disappears. The scrollbar will appear in the reserved space,\r
     * and the calculated width of child Components will not change.\r
     *\r
     *     @example\r
     *     Ext.define('Employee', {\r
     *         extend: 'Ext.data.Model',\r
     *         fields: [\r
     *            {name: 'rating', type: 'int'},\r
     *            {name: 'salary', type: 'float'},\r
     *            {name: 'name'}\r
     *         ]\r
     *     });\r
     *\r
     *     function createFakeData(count) {\r
     *         var firstNames   = ['Screech', 'Kelly', 'Zach', 'Jessie', 'Lisa', 'A.C.', 'Richard'],\r
     *             lastNames    = ['Powers', 'Kapowski', 'Morris', 'Spano', 'Turtle', 'Slater', 'Belding'],\r
     *             ratings      = [1, 2, 3, 4, 5],\r
     *             salaries     = [100, 400, 900, 1500, 1000000];\r
     *\r
     *         var data = [];\r
     *         for (var i = 0; i < (count || 25); i++) {\r
     *             var ratingId    = Math.floor(Math.random() * ratings.length),\r
     *                 salaryId    = Math.floor(Math.random() * salaries.length),\r
     *                 firstNameId = Math.floor(Math.random() * firstNames.length),\r
     *                 lastNameId  = Math.floor(Math.random() * lastNames.length),\r
     *\r
     *                 rating      = ratings[ratingId],\r
     *                 salary      = salaries[salaryId],\r
     *                 name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);\r
     *\r
     *             data.push({\r
     *                 rating: rating,\r
     *                 salary: salary,\r
     *                 name: name\r
     *             });\r
     *         }\r
     *         store.loadData(data);\r
     *     }\r
     *\r
     *     // create the Data Store\r
     *     var store = Ext.create('Ext.data.Store', {\r
     *         id: 'store',\r
     *         model: 'Employee',\r
     *         proxy: {\r
     *             type: 'memory'\r
     *         }\r
     *     });\r
     *     createFakeData(10);\r
     *\r
     *     var grid = Ext.create('Ext.grid.Panel', {\r
     *         title: 'Grid loaded with varying number of records',\r
     *         anchor: '100%',\r
     *         store: store,\r
     *         columns: [{\r
     *             xtype: 'rownumberer',\r
     *             width: 40,\r
     *             sortable: false\r
     *         },{\r
     *             text: 'Name',\r
     *             flex: 1,\r
     *             sortable: true,\r
     *             dataIndex: 'name'\r
     *         },{\r
     *             text: 'Rating',\r
     *             width: 125,\r
     *             sortable: true,\r
     *             dataIndex: 'rating'\r
     *         },{\r
     *             text: 'Salary',\r
     *             width: 125,\r
     *             sortable: true,\r
     *             dataIndex: 'salary',\r
     *             align: 'right',\r
     *             renderer: Ext.util.Format.usMoney\r
     *         }]\r
     *     });\r
     *\r
     *     Ext.create('Ext.panel.Panel', {\r
     *         renderTo: document.body,\r
     *         width: 800,\r
     *         height: 600,\r
     *         layout: {\r
     *             type: 'anchor',\r
     *             reserveScrollbar: true // There will be a gap even when there's no scrollbar\r
     *         },\r
     *         scrollable: true,\r
     *         items: grid,\r
     *         tbar: {\r
     *             defaults: {\r
     *                 handler: function(b) {\r
     *                     createFakeData(b.count);\r
     *                 }\r
     *             },\r
     *             items: [{\r
     *                  text: '10 Items',\r
     *                  count: 10\r
     *             },{\r
     *                  text: '100 Items',\r
     *                  count: 100\r
     *             },{\r
     *                  text: '300 Items',\r
     *                  count: 300\r
     *             },{\r
     *                  text: '1000 Items',\r
     *                  count: 1000\r
     *             },{\r
     *                  text: '5000 Items',\r
     *                  count: 5000\r
     *             }]\r
     *         }\r
     *     });\r
     *\r
     */\r
    reserveScrollbar: false,\r
\r
    /**\r
     * @property {Boolean} [managePadding=true]\r
     * indicates that this layout will correct cross browser padding differences when the\r
     * container has overflow.\r
     * \r
     * In some browsers the right and/or bottom padding of a container is lost when\r
     * the container has overflow.  If managePadding is true the layout will apply the\r
     * padding to an inner wrapping element instead of the container element that has the\r
     * overflow so that paddding will be included in the scrollable area.\r
     * Note: padding will not be managed if it is configured on the container using\r
     * a style config or css class.  In order to be managed, padding must be added to the\r
     * container using the appropriate {@link Ext.Component#contentPaddingProperty\r
     * contentPaddingProperty}.  For {@link Ext.panel.Panel Panels} use \r
     * {@link Ext.panel.Panel#bodyPadding}, and for\r
     * {@link Ext.container.Container Containers}, use\r
     * {@link Ext.Component#padding padding}\r
     */\r
    managePadding: true,\r
\r
    /**\r
     * @property {Boolean} [manageOverflow=false]\r
     * true to rerun the layout if scrollbars are needed.\r
     */\r
    manageOverflow: false,\r
\r
    // auto layout does not care about the dimensions of individual child items since\r
    // it does not size them, and it measures them as a whole when in shrinkWrap mode.\r
    needsItemSize: false,\r
    setsItemSize: false,\r
\r
    // Begin with no previous adjustments\r
    lastOverflowAdjust: {\r
        width: 0,\r
        height: 0\r
    },\r
\r
    outerCtCls: Ext.baseCSSPrefix + 'autocontainer-outerCt',\r
    innerCtCls: Ext.baseCSSPrefix + 'autocontainer-innerCt',\r
\r
    // Auto layout's renderTpl wraps the content in an outerCt which is used to accomplish\r
    // the following 3 goals:\r
    // \r
    // 1. When the container has a shrink wrapped width and/or height, the outerCt is used\r
    // to measure the size of the content.\r
    // 2. When the container has overflow some browsers lose the container's right and/or\r
    // bottom padding.  To fix this, the padding is rendered to the outerCt instead of\r
    // the container target element.  This ensures that the padding is included in the \r
    // container's scrollWidth/scrollHeight. In Old IE when a table is used, the padding\r
    // is rendered to the innerCt td element.\r
    // 3. The outerCt contains the margins of its children, that is to say, it prevents\r
    // them from collapsing.\r
    renderTpl: [\r
        // An outerCt with display:table shrink-wraps contents, and contains child\r
        // margins. The table-cell innerCt is required in order to support percentage\r
        // heights on child elements.\r
        '<div id="{ownerId}-outerCt" data-ref="outerCt" class="{outerCtCls}" role="presentation">',\r
            '<div id="{ownerId}-innerCt" data-ref="innerCt" style="{%this.renderPadding(out, values)%}" ',\r
                // If raw HTML is used as the component's content, avoid setting\r
                // presentation role so as not to mask the content from screen readers\r
                '<tpl if="!$comp.html">role="presentation"</tpl>',\r
                'class="{innerCtCls}">',\r
                '{%this.renderBody(out,values)%}',\r
            '</div>',\r
        '</div>'\r
    ],\r
\r
    beginLayout: function(ownerContext) {\r
        this.callParent(arguments);\r
        this.initContextItems(ownerContext);\r
    },\r
    \r
    beforeLayoutCycle: function(ownerContext){\r
        var comp = this.owner,\r
            inheritedState = comp.inheritedState,\r
            inheritedStateInner = comp.inheritedStateInner;\r
\r
        if (!inheritedState || inheritedState.invalid) {\r
            inheritedState = comp.getInherited(); // fixes both\r
            inheritedStateInner = comp.inheritedStateInner;\r
        }\r
        if (ownerContext.widthModel.shrinkWrap) {\r
            inheritedStateInner.inShrinkWrapTable = true;\r
        } else {\r
            delete inheritedStateInner.inShrinkWrapTable;\r
        }\r
    },\r
\r
    beginLayoutCycle: function(ownerContext) {\r
        var me = this,\r
            outerCt = me.outerCt,\r
            lastOuterCtWidth = me.lastOuterCtWidth || '',\r
            lastOuterCtHeight = me.lastOuterCtHeight || '',\r
            lastOuterCtTableLayout = me.lastOuterCtTableLayout || '',\r
            state = ownerContext.state,\r
            overflowXStyle, outerCtWidth, outerCtHeight, outerCtTableLayout,\r
            inheritedStateInner;\r
\r
        me.callParent(arguments);\r
\r
        // Default to "shrink wrap styles".\r
        outerCtWidth = outerCtHeight = outerCtTableLayout = '';\r
\r
        if (!ownerContext.widthModel.shrinkWrap) {\r
            // if we're not shrink wrapping width, we need to get the innerCt out of the\r
            // way to avoid any shrink wrapping effect on child items\r
\r
            // fill the available width within the container\r
            outerCtWidth = '100%';\r
            inheritedStateInner = me.owner.inheritedStateInner;\r
            // expand no further than the available width, even if contents are wider\r
            // unless there is a potential for horizontal overflow, then allow\r
            // the outerCt to expand to the width of the contents\r
            overflowXStyle = me.getOverflowXStyle(ownerContext);\r
            outerCtTableLayout = (inheritedStateInner.inShrinkWrapTable ||\r
                                  overflowXStyle === 'auto' || \r
                                  overflowXStyle === 'scroll') ? '' : 'fixed';\r
        }\r
\r
        if (!ownerContext.heightModel.shrinkWrap && \r
            !Ext.supports.PercentageHeightOverflowBug) {\r
            // if we're not shrink wrapping height, we need to get the outerCt out of the\r
            // way so that percentage height children will be sized correctly.  We do this\r
            // by giving the outerCt a height of '100%' unless the browser is affected by\r
            // the "percentage height overflow bug", in which case the outerCt will get a\r
            // pixel height set during the calculate phase after we know the targetEl size.\r
            outerCtHeight = '100%';\r
        }\r
\r
        // if the outerCt width changed since last time (becuase of a widthModel change)\r
        // or if we set a pixel width on the outerCt last time to work around a browser-\r
        // specific bug, we need to set the width of the outerCt\r
        if ((outerCtWidth !== lastOuterCtWidth) || me.hasOuterCtPxWidth) {\r
            outerCt.setStyle('width', outerCtWidth);\r
            me.lastOuterCtWidth = outerCtWidth;\r
            me.hasOuterCtPxWidth = false;\r
        }\r
\r
        // Set the outerCt table-layout property if different from last time.\r
        if (outerCtTableLayout !== lastOuterCtTableLayout) {\r
            outerCt.setStyle('table-layout', outerCtTableLayout);\r
            me.lastOuterCtTableLayout = outerCtTableLayout;\r
        }\r
\r
        // if the outerCt height changed since last time (becuase of a heightModel change)\r
        // or if we set a pixel height on the outerCt last time to work around a browser-\r
        // specific bug, we need to set the height of the outerCt\r
        if ((outerCtHeight !== lastOuterCtHeight) || me.hasOuterCtPxHeight) {\r
            outerCt.setStyle('height', outerCtHeight);\r
            me.lastOuterCtHeight = outerCtHeight;\r
            me.hasOuterCtPxHeight = false;\r
        }\r
\r
        if (me.hasInnerCtPxHeight) {\r
            me.innerCt.setStyle('height', '');\r
            me.hasInnerCtPxHeight = false;\r
        }\r
\r
        // Begin with the scrollbar adjustment that we used last time - this is more likely\r
        // to be correct than beginning with no adjustment at all, but only if it is not\r
        // already defined - it may have already been set by invalidate()\r
        state.overflowAdjust = state.overflowAdjust || me.lastOverflowAdjust;\r
    },\r
\r
    calculate: function(ownerContext) {\r
        var me = this,\r
            state = ownerContext.state,\r
            containerSize = me.getContainerSize(ownerContext, true),\r
            // If subclass has a calculateItems method, call it and cache the result\r
            calculatedItems = state.calculatedItems ||\r
                (state.calculatedItems = me.calculateItems ?\r
                me.calculateItems(ownerContext, containerSize) : true);\r
\r
        me.setCtSizeIfNeeded(ownerContext, containerSize);\r
\r
        if (calculatedItems && ownerContext.hasDomProp('containerChildrenSizeDone')) {\r
\r
            me.calculateContentSize(ownerContext);\r
\r
            if (containerSize.gotAll) {\r
                if (me.manageOverflow && !ownerContext.state.secondPass && !me.reserveScrollbar) {\r
                    me.calculateOverflow(ownerContext, containerSize);\r
                }\r
                return;\r
            }\r
        }\r
        \r
        me.done = false;\r
    },\r
\r
    calculateContentSize: function (ownerContext) {\r
        var me = this,\r
            containerDimensions = ((ownerContext.widthModel.shrinkWrap ? 1 : 0) | // jshint ignore:line\r
                                   (ownerContext.heightModel.shrinkWrap ? 2 : 0)),\r
            calcWidth = (containerDimensions & 1) || undefined, // jshint ignore:line\r
            calcHeight = (containerDimensions & 2) || undefined, // jshint ignore:line\r
            needed = 0,\r
            props = ownerContext.props;\r
\r
        if (calcWidth) {\r
            if (isNaN(props.contentWidth)) {\r
                ++needed;\r
            } else {\r
                calcWidth = undefined;\r
            }\r
        }\r
        if (calcHeight) {\r
            if (isNaN(props.contentHeight)) {\r
                ++needed;\r
            } else {\r
                calcHeight = undefined;\r
            }\r
        }\r
\r
        if (needed) {\r
            if (calcWidth && !ownerContext.setContentWidth(me.measureContentWidth(ownerContext))) {\r
                me.done = false;\r
            }\r
            if (calcHeight && !ownerContext.setContentHeight(me.measureContentHeight(ownerContext))) {\r
                me.done = false;\r
            }\r
\r
            //if (me.done) {\r
            //    var el = ownerContext.targetContext.el.dom;\r
            //    Ext.log(this.owner.id, '.contentSize: ', contentWidth, 'x', contentHeight,\r
            //        ' => scrollSize: ', el.scrollWidth, 'x', el.scrollHeight);\r
            //}\r
        }\r
    },\r
\r
    /**\r
     * Handles overflow processing for a container.  In addition to the ownerContext\r
     * passed to the {@link #calculate} method, this method also needs the containerSize\r
     * (the object returned by {@link #getContainerSize}).\r
     * @protected\r
     * \r
     * @param {Ext.layout.ContextItem} ownerContext\r
     */\r
    calculateOverflow: function (ownerContext) {\r
        var me = this,\r
            width, height, scrollbarSize, scrollbars, xauto, yauto, targetEl;\r
\r
        // Determine the dimensions that have overflow:auto applied. If these come by\r
        // way of component config, this does not require a DOM read:\r
        xauto = (me.getOverflowXStyle(ownerContext) === 'auto');\r
        yauto = (me.getOverflowYStyle(ownerContext) === 'auto');\r
\r
        if (xauto || yauto) {\r
            scrollbarSize = Ext.getScrollbarSize();\r
            targetEl = ownerContext.overflowContext.el.dom;\r
            scrollbars = 0;\r
\r
            if (targetEl.scrollWidth > targetEl.clientWidth) {\r
                // has horizontal scrollbar\r
                scrollbars |= 1; // jshint ignore:line\r
            }\r
\r
            if (targetEl.scrollHeight > targetEl.clientHeight) {\r
                // has vertical scrollbar\r
                scrollbars |= 2; // jshint ignore:line\r
            }\r
\r
            width = (yauto && (scrollbars & 2)) ? scrollbarSize.width : 0; // jshint ignore:line\r
            height = (xauto && (scrollbars & 1)) ? scrollbarSize.height : 0; // jshint ignore:line\r
\r
            if (width !== me.lastOverflowAdjust.width || height !== me.lastOverflowAdjust.height) {\r
                me.done = false;\r
\r
                // we pass overflowAdjust and overflowState in as state for the next\r
                // cycle (these are discarded if one of our ownerCt's invalidates):\r
                ownerContext.invalidate({\r
                    state: {\r
                        overflowAdjust: {\r
                            width: width,\r
                            height: height\r
                        },\r
                        overflowState: scrollbars,\r
                        secondPass: true\r
                    }\r
                });\r
            }\r
        }\r
    },\r
\r
    completeLayout: function(ownerContext) {\r
       this.lastOverflowAdjust = ownerContext.state.overflowAdjust;\r
    },\r
\r
    doRenderBody: function (out, renderData) {\r
        // Careful! This method is bolted on to the renderTpl so all we get for context is\r
        // the renderData! The "this" pointer is the renderTpl instance!\r
        var me = renderData.$layout,\r
            XTemplate = Ext.XTemplate,\r
            beforeBodyTpl = me.beforeBodyTpl,\r
            afterBodyTpl = me.afterBodyTpl;\r
\r
        if (beforeBodyTpl) {\r
            XTemplate.getTpl(me, 'beforeBodyTpl').applyOut(renderData, out);\r
        }\r
        this.renderItems(out, renderData);\r
        this.renderContent(out, renderData);\r
        if (afterBodyTpl) {\r
            XTemplate.getTpl(me, 'afterBodyTpl').applyOut(renderData, out);\r
        }\r
    },\r
\r
    doRenderPadding: function(out, renderData) {\r
        // Careful! This method is bolted on to the renderTpl so all we get for context is\r
        // the renderData! The "this" pointer is the renderTpl instance!\r
\r
        var me = renderData.$layout,\r
            owner = renderData.$layout.owner,\r
            padding = owner[owner.contentPaddingProperty];\r
\r
        if (me.managePadding && padding) {\r
            out.push('padding:', owner.unitizeBox(padding));\r
        }\r
    },\r
\r
    finishedLayout: function (ownerContext) {\r
        var innerCt = this.innerCt;\r
\r
        this.callParent(arguments);\r
\r
        if (Ext.isIE8)  {\r
            // IE8 needs a repaint to render percentage sized child items.\r
            innerCt.repaint();\r
        }\r
\r
        if (Ext.isOpera) {\r
            // Opera also needs a repaint to render percentage sized child items. but \r
            // the normal repaint() method doesn't seem to do the trick, but tweaking\r
            // the position property in combination with reading scrollWidth does.\r
            innerCt.setStyle('position', 'relative');\r
            innerCt.dom.scrollWidth; // jshint ignore:line\r
            innerCt.setStyle('position', '');\r
        }\r
    },\r
\r
    /**\r
     * Returns the container size (that of the target). Only the fixed-sized dimensions can\r
     * be returned because the shrinkWrap dimensions are based on the contentWidth/Height\r
     * as determined by the container layout.\r
     *\r
     * If the {@link #calculateOverflow} method is used and if {@link #manageOverflow} is\r
     * true, this will adjust the width/height by the size of scrollbars.\r
     * \r
     * @param {Ext.layout.ContextItem} ownerContext The owner's context item.\r
     * @param {Boolean} [inDom=false] True if the container size must be in the DOM.\r
     * @return {Object} The size\r
     * @return {Number} return.width The width\r
     * @return {Number} return.height The height\r
     * @protected\r
     */\r
    getContainerSize : function(ownerContext, inDom) {\r
        // Subtle But Important:\r
        // \r
        // We don't want to call getProp/hasProp et.al. unless we in fact need that value\r
        // for our results! If we call it and don't need it, the layout manager will think\r
        // we depend on it and will schedule us again should it change.\r
        \r
        var size = this.callParent(arguments),\r
            overflowAdjust = ownerContext.state.overflowAdjust;\r
\r
        if (overflowAdjust) {\r
            size.width -= overflowAdjust.width;\r
            size.height -= overflowAdjust.height;\r
        }\r
\r
        return size;\r
    },\r
\r
    getRenderData: function () {\r
        var me = this,\r
            data = me.callParent();\r
\r
        data.innerCtCls = me.innerCtCls;\r
        data.outerCtCls = me.outerCtCls;\r
\r
        return data;\r
    },\r
\r
    // Overridden method from Ext.layout.container.Container.\r
    // Used in the beforeLayout method to render all items into.\r
    getRenderTarget: function() {\r
        return this.innerCt;\r
    },\r
\r
    // Overridden method from Ext.layout.container.Container.\r
    // Used by Container classes to insert special DOM elements which must exist in addition to the child components\r
    getElementTarget: function() {\r
        return this.innerCt;\r
    },\r
\r
    /**\r
     * Returns the overflow-x style of the render target.\r
     * Note: If overflow is configured on a container using style or css class this method\r
     * will read the dom the first time it is called. It is therefore preferable for\r
     * performance reasons to use the {@link Ext.Component#scrollable scrollable config when\r
     * horizontal overflow is desired.\r
     * @protected\r
     * @param {Ext.layout.ContextItem} ownerContext\r
     * @return {String}\r
     */\r
    getOverflowXStyle: function(ownerContext) {\r
        return ownerContext.overflowXStyle ||\r
            (ownerContext.overflowXStyle = this.owner.scrollFlags.overflowX || ownerContext.overflowContext.getStyle('overflow-x'));\r
    },\r
\r
    /**\r
     * Returns the overflow-y style of the render target.\r
     * Note: If overflow is configured on a container using style or css class this method\r
     * will read the dom the first time it is called. It is therefore preferable for\r
     * performance reasons to use the {@link Ext.Component#scrollable scrollable config when\r
     * vertical overflow is desired.\r
     * @protected\r
     * @param {Ext.layout.ContextItem} ownerContext\r
     * @return {String}\r
     */\r
    getOverflowYStyle: function(ownerContext) {\r
        return ownerContext.overflowYStyle || \r
            (ownerContext.overflowYStyle = this.owner.scrollFlags.overflowY || ownerContext.overflowContext.getStyle('overflow-y'));\r
    },\r
\r
    initContextItems: function(ownerContext) {\r
        var me = this,\r
            target = ownerContext.target,\r
            overflowEl = me.owner.getOverflowEl();\r
\r
        ownerContext.outerCtContext = ownerContext.getEl('outerCt', me);\r
        ownerContext.innerCtContext = ownerContext.getEl('innerCt', me);\r
        ownerContext.overflowContext = (overflowEl === ownerContext.el) ? ownerContext :\r
            ownerContext.getEl(overflowEl);\r
\r
        if (target[target.contentPaddingProperty] !== undefined) {\r
            // If padding was defined using the contentPaddingProperty, we render the\r
            // the padding to the innerCt or outerCt (depending on the template that is\r
            // being used), so we need to set the paddingContext accordingly.\r
            // Otherwise we leave paddingContext as set by Container layout (defaults to\r
            // the targetContext)\r
            ownerContext.paddingContext = ownerContext.innerCtContext;\r
        }\r
    },\r
\r
    initLayout: function() {\r
        var me = this,\r
            scrollbarWidth = Ext.getScrollbarSize().width,\r
            owner = me.owner;\r
\r
        me.callParent();\r
\r
        // Create a default lastOverflowAdjust based upon scrolling configuration.\r
        // If the Container is to overflow, or we *always* reserve space for a scrollbar\r
        // then reserve space for a vertical scrollbar\r
        if (scrollbarWidth && me.manageOverflow && !me.hasOwnProperty('lastOverflowAdjust')) {\r
            if (owner.scrollable || me.reserveScrollbar) {\r
                me.lastOverflowAdjust = {\r
                    width: scrollbarWidth,\r
                    height: 0\r
                };\r
            }\r
        }\r
    },\r
\r
    measureContentHeight: function (ownerContext) {\r
        // contentHeight includes padding, but not border, framing or margins\r
        var contentHeight = this.outerCt.getHeight(),\r
            target = ownerContext.target;\r
\r
        if (this.managePadding && (target[target.contentPaddingProperty] === undefined)) {\r
            // if padding was not configured using the appropriate contentPaddingProperty\r
            // then the padding will not be on the paddingContext, and therfore not included\r
            // in the outerCt measurement, so we need to read the padding from the\r
            // targetContext\r
            contentHeight += ownerContext.targetContext.getPaddingInfo().height;\r
        }\r
        return contentHeight;\r
    },\r
\r
    measureContentWidth: function (ownerContext) {\r
        var dom, style, old, contentWidth, target;\r
            \r
        // In the newer Chrome versions, it won't measure the\r
        // width correctly without repainting the inner\r
        // cell in some circumstances.\r
        if (this.chromeCellMeasureBug) {\r
            dom = this.innerCt.dom;\r
            style = dom.style;\r
            old = style.display;\r
            \r
            if (old === 'table-cell') {\r
                style.display = '';\r
                dom.offsetWidth; // jshint ignore:line\r
                style.display = old;\r
            }    \r
        }\r
\r
        if (Ext.isSafari) {\r
            // EXTJS-12041: Safari needs a reflow of the outerCt to measure content width\r
            // correctly in some cases.  The circumstances which make this happen are\r
            // very difficult to isolate, so we have to resort to always triggering a\r
            // reflow before measuring. We switch between table-cell and table in hopes\r
            // of minimizing the impact of the reflow on surrounding elements\r
            dom = this.outerCt.dom;\r
            style = dom.style;\r
            style.display = 'table-cell';\r
            dom.offsetWidth; // jshint ignore:line\r
            dom.style.display = '';\r
        }\r
\r
        // contentWidth includes padding, but not border, framing or margins\r
        contentWidth = this.outerCt.getWidth();\r
        target = ownerContext.target;\r
\r
        if (this.managePadding && (target[target.contentPaddingProperty] === undefined)) {\r
            // if padding was not configured using the appropriate contentPaddingProperty\r
            // then the padding will not be on the paddingContext, and therfore not included\r
            // in the outerCt measurement, so we need to read the padding from the\r
            // targetContext\r
            contentWidth += ownerContext.targetContext.getPaddingInfo().width;\r
        }\r
        return contentWidth;\r
    },\r
\r
    /**\r
     * This method sets the height and/or width of the outerCt/innerCt to adjust for the\r
     * following browser-specific issues:\r
     * \r
     * 1. In some browsers a percentage-height element ignores the horizontal scrollbar\r
     * of its parent (see Ext.supports.PercentageHeightOverflowBug).  If the browser is\r
     * affected by this bug the outerCt needs a pixel height in order to support\r
     * percentage-height children when not shrink-wrapping height. If the browser is not\r
     * affected by this bug, a height of 100% is assigned to the outerCt (see\r
     * beginLayoutCycle).\r
     * \r
     * 2. IE8 mode has a bug with percentage height children.  if the innerCt has\r
     * a height of 100%, has padding, and has a child item with a percentage height, that\r
     * child item will be sized as a percentage of the parent's height plus padding height.\r
     * In other words, a child with height:50% would have its height caclulated thusly:\r
     * (parentHeight + parentPaddingHeight) * 0.5\r
     * To fix this, we have to give the innerCt a pixel height.\r
     * \r
     * @protected\r
     * @param {Ext.layout.ContextItem} ownerContext\r
     * @param {Object} containerSize\r
     */\r
    setCtSizeIfNeeded: function(ownerContext, containerSize) {\r
        var me = this,\r
            height = containerSize.height,\r
            padding = ownerContext.paddingContext.getPaddingInfo(),\r
            targetEl = me.getTarget(),\r
            overflowXStyle = me.getOverflowXStyle(ownerContext),\r
            canOverflowX = (overflowXStyle === 'auto' || overflowXStyle === 'scroll'),\r
            scrollbarSize = Ext.getScrollbarSize(),\r
            needsOuterHeight, needsInnerHeight;\r
\r
        if (height && !ownerContext.heightModel.shrinkWrap) {\r
            if (Ext.supports.PercentageHeightOverflowBug) {\r
                // set a pixel height on the outerCt if the browser ignores horizontal\r
                // scrollbar when rendering percentage-height elements\r
                needsOuterHeight = true;\r
            }\r
            if (Ext.isIE8) {\r
                // When not shrink wrapping, we set a pixel height on the innerCt to\r
                // support percentage height children in IE8.\r
                needsInnerHeight = true;\r
            }\r
\r
            if ((needsOuterHeight || needsInnerHeight) && canOverflowX && \r
                (targetEl.dom.scrollWidth > targetEl.dom.clientWidth)) {\r
                // adjust the height for scrollbar size since it's not accounted for\r
                // in the containerSize.\r
                // IE8 does not tolerate negative sizes\r
                height = Math.max(height - scrollbarSize.height, 0);\r
            }\r
\r
            if (needsOuterHeight) {\r
                ownerContext.outerCtContext.setProp('height', height + padding.height);\r
                me.hasOuterCtPxHeight = true;\r
            }\r
            \r
            if (needsInnerHeight) {\r
                ownerContext.innerCtContext.setProp('height', height);\r
                me.hasInnerCtPxHeight = true;\r
            }\r
        }\r
    },\r
\r
    setupRenderTpl: function (renderTpl) {\r
        this.callParent(arguments);\r
\r
        renderTpl.renderPadding = this.doRenderPadding;\r
    },\r
\r
    getContentTarget: function(){\r
        return this.innerCt;\r
    },\r
\r
    getScrollerEl: function() {\r
        return this.outerCt;\r
    }\r
\r
}, function(){\r
    this.prototype.chromeCellMeasureBug = Ext.isChrome && Ext.chromeVersion >= 26;\r
});\r