extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/layout/container/Box.js

@@ -0,0 +1,929 @@
+/**
+ * Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.
+ */
+Ext.define('Ext.layout.container.Box', {
+
+    /* Begin Definitions */
+
+    alias: ['layout.box'],
+    extend: 'Ext.layout.container.Container',
+    alternateClassName: 'Ext.layout.BoxLayout',
+
+    requires: [
+        'Ext.layout.container.boxOverflow.None',
+        'Ext.layout.container.boxOverflow.Menu',
+        'Ext.layout.container.boxOverflow.Scroller',
+        'Ext.util.Format',
+        'Ext.dd.DragDropManager'
+    ],
+
+    /* End Definitions */
+
+    /**
+     * @cfg {Object} defaultMargins
+     * If the individual contained items do not have a margins property specified or margin specified via CSS, the
+     * default margins from this property will be applied to each item.
+     *
+     * This property may be specified as an object containing margins to apply in the format:
+     *
+     *     {
+     *         top: (top margin),
+     *         right: (right margin),
+     *         bottom: (bottom margin),
+     *         left: (left margin)
+     *     }
+     *
+     * This property may also be specified as a string containing space-separated, numeric margin values. The order of
+     * the sides associated with each value matches the way CSS processes margin values:
+     *
+     *   - If there is only one value, it applies to all sides.
+     *   - If there are two values, the top and bottom borders are set to the first value and the right and left are
+     *     set to the second.
+     *   - If there are three values, the top is set to the first value, the left and right are set to the second,
+     *     and the bottom is set to the third.
+     *   - If there are four values, they apply to the top, right, bottom, and left, respectively.
+     */
+    defaultMargins: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+    },
+
+    /**
+     * @cfg {String} padding
+     * Sets the padding to be applied to all child items managed by this layout.
+     *
+     * This property must be specified as a string containing space-separated, numeric padding values. The order of the
+     * sides associated with each value matches the way CSS processes padding values:
+     *
+     *   - If there is only one value, it applies to all sides.
+     *   - If there are two values, the top and bottom borders are set to the first value and the right and left are
+     *     set to the second.
+     *   - If there are three values, the top is set to the first value, the left and right are set to the second,
+     *     and the bottom is set to the third.
+     *   - If there are four values, they apply to the top, right, bottom, and left, respectively.
+     */
+    padding: 0,
+
+    /**
+     * @cfg {String} pack
+     * Controls how the child items of the container are packed together. Acceptable configuration values for this
+     * property are:
+     *
+     *   - **start** - child items are packed together at **left** side of container (*default**)
+     *   - **center** - child items are packed together at **mid-width** of container
+     *   - **end** - child items are packed together at **right** side of container
+     */
+    pack: 'start',
+
+    /**
+     * @cfg {Number} flex
+     * This configuration option is to be applied to **child items** of the container managed by this layout. Each child
+     * item with a flex property will be flexed (horizontally in `hbox`, vertically in `vbox`) according to each item's
+     * **relative** flex value compared to the sum of all items with a flex value specified. Any child items that have
+     * either a `flex = 0` or `flex = undefined` will not be 'flexed' (the initial size will not be changed).
+     */
+    flex: undefined,
+
+    /**
+     * @cfg {String/Ext.Component} stretchMaxPartner
+     * Allows stretchMax calculation to take into account the max perpendicular size (height for HBox layout and width
+     * for VBox layout) of another Box layout when calculating its maximum perpendicular child size.
+     *
+     * If specified as a string, this may be either a known Container ID, or a ComponentQuery selector which is rooted
+     * at this layout's Container (ie, to find a sibling, use `"^>#siblingItemId`).
+     */
+    stretchMaxPartner: undefined,
+
+    type: 'box',
+    scrollOffset: 0,
+    itemCls: Ext.baseCSSPrefix + 'box-item',
+    targetCls: Ext.baseCSSPrefix + 'box-layout-ct',
+    innerCls: Ext.baseCSSPrefix + 'box-inner',
+
+    // availableSpaceOffset is used to adjust the availableWidth, typically used
+    // to reserve space for a scrollbar
+    availableSpaceOffset: 0,
+
+    // whether or not to reserve the availableSpaceOffset in layout calculations
+    reserveOffset: true,
+
+    manageMargins: true,
+
+    childEls: [
+        'innerCt',
+        'targetEl'
+    ],
+
+    renderTpl: [
+        '{%var oc,l=values.$comp.layout,oh=l.overflowHandler;',
+        'if (oh.getPrefixConfig!==Ext.emptyFn) {',
+            'if(oc=oh.getPrefixConfig())dh.generateMarkup(oc, out)',
+        '}%}',
+        '<div id="{ownerId}-innerCt" class="{[l.innerCls]} {[oh.getOverflowCls()]}" role="presentation">',
+            '<div id="{ownerId}-targetEl" style="position:absolute;',
+                    // This width for the "CSS container box" of the box child items gives
+                    // them the room they need to avoid being "crushed" (aka, "wrapped").
+                    // On Opera, elements cannot be wider than 32767px or else they break
+                    // the scrollWidth (it becomes == offsetWidth) and you cannot scroll
+                    // the content.
+                    'width:20000px;',
+                    // On IE quirks and IE6/7 strict, a text-align:center style trickles
+                    // down to this el at times and will cause it to move off the left edge.
+                    // The easy fix is to just always set left:0px here. The top:0px part
+                    // is just being paranoid. The requirement for targetEl is that its
+                    // origin align with innerCt... this ensures that it does!
+                    'left:0px;top:0px;',
+                    // If we don't give the element a height, it does not always participate
+                    // in the scrollWidth.
+                    'height:1px">',
+                '{%this.renderBody(out, values)%}',
+            '</div>',
+        '</div>',
+        '{%if (oh.getSuffixConfig!==Ext.emptyFn) {',
+            'if(oc=oh.getSuffixConfig())dh.generateMarkup(oc, out)',
+        '}%}',
+        {
+            disableFormats: true,
+            definitions: 'var dh=Ext.DomHelper;'
+        }
+    ],
+
+    constructor: function(config) {
+        var me = this,
+            type;
+
+        me.callParent(arguments);
+
+        // The sort function needs access to properties in this, so must be bound.
+        me.flexSortFn = Ext.Function.bind(me.flexSort, me);
+
+        me.initOverflowHandler();
+
+        type = typeof me.padding;
+        if (type == 'string' || type == 'number') {
+            me.padding = Ext.util.Format.parseBox(me.padding);
+            me.padding.height = me.padding.top  + me.padding.bottom;
+            me.padding.width  = me.padding.left + me.padding.right;
+        }
+    },
+
+    getNames: function () {
+        return this.names;
+    },
+
+    getItemSizePolicy: function (item, ownerSizeModel) {
+        var me = this,
+            policy = me.sizePolicy,
+            align = me.align,
+            key = align,
+            ownerHeightModel;
+            
+        if (align === 'stretch') {
+            ownerHeightModel = (ownerSizeModel || me.owner.getSizeModel())[me.names.height];
+            if (ownerHeightModel.shrinkWrap) {
+                key = 'stretchmax';
+            }
+        } else if (align !== 'stretchmax') {
+            key = '';
+        }
+
+        if (item.flex) {
+            policy = policy.flex;
+        }
+
+        return policy[key];
+    },
+
+    flexSort: function (a, b) {
+        var maxWidthName = this.getNames().maxWidth,
+            infiniteValue = Infinity;
+
+        a = a.target[maxWidthName] || infiniteValue;
+        b = b.target[maxWidthName] || infiniteValue;
+
+        // IE 6/7 Don't like Infinity - Infinity...
+        if (!isFinite(a) && !isFinite(b)) {
+            return 0;
+        }
+
+        return a - b;
+    },
+
+    isItemBoxParent: function (itemContext) {
+        return true;
+    },
+
+    isItemShrinkWrap: function (item) {
+        return true;
+    },
+
+    // Sort into *descending* order.
+    minSizeSortFn: function(a, b) {
+        return b.available - a.available;
+    },
+
+    roundFlex: function(width) {
+        return Math.ceil(width);
+    },
+
+    /**
+     * @private
+     * Called by an owning Panel before the Panel begins its collapse process.
+     * Most layouts will not need to override the default Ext.emptyFn implementation.
+     */
+    beginCollapse: function(child) {
+        var me = this;
+
+        if (me.direction === 'vertical' && child.collapsedVertical()) {
+            child.collapseMemento.capture(['flex']);
+            delete child.flex;
+        } else if (me.direction === 'horizontal' && child.collapsedHorizontal()) {
+            child.collapseMemento.capture(['flex']);
+            delete child.flex;
+        }
+    },
+
+    /**
+     * @private
+     * Called by an owning Panel before the Panel begins its expand process.
+     * Most layouts will not need to override the default Ext.emptyFn implementation.
+     */
+    beginExpand: function(child) {
+
+        // Restores the flex if we used to be flexed before
+        child.collapseMemento.restore(['flex']);
+    },
+
+    beginLayout: function (ownerContext) {
+        var me = this,
+            smp = me.owner.stretchMaxPartner,
+            style = me.innerCt.dom.style,
+            names = me.getNames();
+
+        // this must happen before callParent to allow the overflow handler to do its work
+        // that can effect the childItems collection...
+        me.overflowHandler.beginLayout(ownerContext);
+
+        // get the contextItem for our stretchMax buddy:
+        if (typeof smp === 'string') {
+            smp = Ext.getCmp(smp) || me.owner.query(smp)[0];
+        }
+
+        ownerContext.stretchMaxPartner = smp && ownerContext.context.getCmp(smp);
+
+        me.callParent(arguments);
+
+        ownerContext.innerCtContext = ownerContext.getEl('innerCt', me);
+
+        // Capture whether the owning Container is scrolling in the parallel direction
+        me.scrollParallel = !!(me.owner.autoScroll || me.owner[names.overflowX]);
+
+        // Capture whether the owning Container is scrolling in the perpendicular direction
+        me.scrollPerpendicular = !!(me.owner.autoScroll || me.owner[names.overflowY]);
+
+        // If we *are* scrolling parallel, capture the scroll position of the encapsulating element
+        if (me.scrollParallel) {
+            me.scrollPos = me.owner.getTargetEl().dom[names.scrollLeft];
+        }
+
+        // Don't allow sizes burned on to the innerCt to influence measurements.
+        style.width = '';
+        style.height = '';
+
+        me.cacheFlexes(ownerContext);
+    },
+
+    beginLayoutCycle: function (ownerContext, firstCycle) {
+        var me = this,
+            align = me.align,
+            names = me.getNames(),
+            pack = me.pack,
+            heightModelName = names.heightModel,
+            childItems, childContext, i, length, shrinkWrap;
+
+        // this must happen before callParent to allow the overflow handler to do its work
+        // that can effect the childItems collection...
+        me.overflowHandler.beginLayoutCycle(ownerContext, firstCycle);
+
+        me.callParent(arguments);
+
+        // Cache several of our string concat/compare results (since width/heightModel can
+        // change if we are invalidated, we cannot do this in beginLayout)
+
+        ownerContext.parallelSizeModel      = ownerContext[names.widthModel];
+        ownerContext.perpendicularSizeModel = ownerContext[heightModelName];
+
+        ownerContext.boxOptions = {
+            align: align = {
+                stretch:    align == 'stretch',
+                stretchmax: align == 'stretchmax',
+                center:     align == names.center
+            },
+            pack: pack = {
+                center: pack == 'center',
+                end:    pack == 'end'
+            }
+        };
+
+        // Consider an hbox w/stretch which means "assign all items the container's height".
+        // The spirit of this request is make all items the same height, but when shrinkWrap
+        // height is also requested, the height of the tallest item determines the height.
+        // This is exactly what the stretchmax option does, so we jiggle the flags here to
+        // act as if stretchmax were requested.
+
+        if (align.stretch && ownerContext.perpendicularSizeModel.shrinkWrap) {
+            align.stretchmax = true;
+            align.stretch = false;
+        }
+
+        // In our example hbox, packing items to the right (end) or center can only work if
+        // there is a container width. So, if we are shrinkWrap, we just turn off the pack
+        // options for the run.
+
+        if (ownerContext.parallelSizeModel.shrinkWrap) {
+            pack.center = pack.end = false;
+        }
+
+        // StretchMax
+        // ==========
+        // This fellow is more interesting than just about any other layout. Consider an
+        // hbox w/stretchmax. The idea is to first first allow the children to perform their
+        // natural (shrinkWrap) layout and then to set the height of all children to the
+        // the maximum height of any child. In terms of layout, this equates to starting
+        // with all children as heightModel.shrinkWrap or heightModel.configured.
+        //
+        // Then down in calculateStretcMax we flip the shrinkWrap children to layout-sized
+        // heightModel.calculated and set their height to the maxHeight. If we ever have to
+        // start over due to invalidate, we must restart back at the beginning (which is
+        // why this logic is not in beginLayout).
+
+        if (align.stretchmax) {
+            childItems = ownerContext.childItems;
+            length = childItems.length;
+            shrinkWrap = me.sizeModels.shrinkWrap;
+
+            for (i = 0; i < length; ++i) {
+                childContext = childItems[i];
+                if (!childContext[heightModelName].configured) {
+                    childContext[heightModelName] = shrinkWrap;
+                }
+            }
+        }
+    },
+
+    /**
+     * This method is called to (re)cache our understanding of flexes. This happens during beginLayout and may need to
+     * be called again if the flexes are changed during the layout (e.g., like ColumnLayout).
+     * @param {Object} ownerContext
+     * @protected
+     */
+    cacheFlexes: function (ownerContext) {
+        var names = this.getNames(),
+            widthModelName = names.widthModel,
+            totalFlex = 0,
+            childItems = ownerContext.childItems,
+            i = childItems.length,
+            flexedItems = [],
+            minWidth = 0,
+            minWidthName = names.minWidth,
+            child, childContext, flex;
+
+        while (i--) {
+            childContext = childItems[i];
+
+            // if the child has a flex it could be "accidental" (typically via "defaults"),
+            // so just check widthModel to see if we are the sizing layout. If so, copy
+            // the flex from the item to the contextItem and add it to totalFlex
+            //
+            if (childContext[widthModelName].calculated) {
+                child = childContext.target;
+                childContext.flex = flex = child.flex;
+                if (flex) {
+                    totalFlex += flex;
+                    flexedItems.push(childContext);
+                    minWidth += child[minWidthName] || 0;
+                }
+            }
+            // the above means that "childContext.flex" is properly truthy/falsy, which is
+            // often times quite convenient...
+        }
+
+        ownerContext.flexedItems = flexedItems;
+        ownerContext.flexedMinSize = minWidth;
+        ownerContext.totalFlex = totalFlex;
+
+        // The flexed boxes need to be sorted in ascending order of maxSize to work properly
+        // so that unallocated space caused by maxWidth being less than flexed width can be
+        // reallocated to subsequent flexed boxes.
+        Ext.Array.sort(flexedItems, this.flexSortFn);
+    },
+
+    calculate: function(ownerContext) {
+        var me = this,
+            targetSize = me.getContainerSize(ownerContext),
+            names = me.getNames(),
+            state = ownerContext.state,
+            plan = state.boxPlan || (state.boxPlan = {}),
+            extraWidth = Ext.getScrollbarSize()[names.width];
+
+        plan.targetSize = targetSize;
+
+        // Set an extra scrollbar-sized increment to add if
+        //     Scrollbars take up space
+        //     and we are scrolling in the perpendicular direction
+        //     and shrinkWrapping in the parallel direction,
+        //     and NOT stretching perpendicular dimensions to fit
+        //     and NOT shrinkWrapping in the perpendicular direction
+        // publishInnerCtSize may need to add this to contentHeight if the perpendicular maxSize overflows
+        if (extraWidth &&
+            me.scrollPerpendicular &&
+            ownerContext.parallelSizeModel.shrinkWrap &&
+            !ownerContext.boxOptions.align.stretch &&
+            !ownerContext.perpendicularSizeModel.shrinkWrap) {
+
+            // Set the flag/possible extra height for shrinkWrap
+            state.additionalScrollbarWidth = extraWidth;
+
+            // In this mode, we MUST have a "height" (perpendicular measurement) to proceed.
+            if (!targetSize[names.gotHeight]) {
+                me.done = false;
+                return;
+            }
+        } else {
+            state.additionalScrollbarWidth = 0;
+        }
+
+        // If we are not widthModel.shrinkWrap, we need the width before we can lay out boxes:
+        if (!ownerContext.parallelSizeModel.shrinkWrap && !targetSize[names.gotWidth]) {
+            me.done = false;
+            return;
+        }
+
+        if (!state.parallelDone) {
+            state.parallelDone = me.calculateParallel(ownerContext, names, plan);
+        }
+
+        if (!state.perpendicularDone) {
+            state.perpendicularDone = me.calculatePerpendicular(ownerContext, names, plan);
+        }
+
+        if (state.parallelDone && state.perpendicularDone) {
+            // Fix for left and right docked Components in a dock component layout. This is for docked Headers and docked Toolbars.
+            // Older Microsoft browsers do not size a position:absolute element's width to match its content.
+            // So in this case, in the publishInnerCtSize method we may need to adjust the size of the owning Container's element explicitly based upon
+            // the discovered max width. So here we put a calculatedWidth property in the metadata to facilitate this.
+            if (me.owner.dock && (Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) && !me.owner.width && !me.horizontal) {
+                plan.isIEVerticalDock = true;
+                plan.calculatedWidth = plan.maxSize + ownerContext.getPaddingInfo().width + ownerContext.getFrameInfo().width;
+            }
+
+            me.publishInnerCtSize(ownerContext, me.reserveOffset ? me.availableSpaceOffset : 0);
+
+            // Calculate stretchmax only if there is >1 child item
+            if (me.done && ownerContext.childItems.length > 1 && ownerContext.boxOptions.align.stretchmax && !state.stretchMaxDone) {
+                me.calculateStretchMax(ownerContext, names, plan);
+                state.stretchMaxDone = true;
+            }
+        } else {
+            me.done = false;
+        }
+    },
+
+    calculateParallel: function(ownerContext, names, plan) {
+        var me = this,
+            widthShrinkWrap = ownerContext.parallelSizeModel.shrinkWrap,
+            widthName = names.width,
+            childItems = ownerContext.childItems,
+            leftName = names.left,
+            rightName = names.right,
+            setWidthName = names.setWidth,
+            childItemsLength = childItems.length,
+            flexedItems = ownerContext.flexedItems,
+            flexedItemsLength = flexedItems.length,
+            pack = ownerContext.boxOptions.pack,
+            padding = me.padding,
+            left = padding[leftName],
+            nonFlexWidth = left + padding[rightName] + me.scrollOffset +
+                                    (me.reserveOffset ? me.availableSpaceOffset : 0),
+            i, childMargins, remainingWidth, remainingFlex, childContext, flex, flexedWidth,
+            contentWidth;
+
+        // Gather the total size taken up by non-flexed items:
+        for (i = 0; i < childItemsLength; ++i) {
+            childContext = childItems[i];
+            childMargins = childContext.marginInfo || childContext.getMarginInfo();
+
+            nonFlexWidth += childMargins[widthName];
+
+            if (!childContext.flex) {
+                nonFlexWidth += childContext.getProp(widthName); // min/maxWidth safe
+                if (isNaN(nonFlexWidth)) {
+                    return false;
+                }
+            }
+        }
+        // if we get here, we have all the childWidths for non-flexed items...
+
+        if (widthShrinkWrap) {
+            plan.availableSpace = 0;
+            plan.tooNarrow = false;
+        } else {
+            plan.availableSpace = plan.targetSize[widthName] - nonFlexWidth;
+
+            // If we're going to need space for a parallel scrollbar, then we need to redo the perpendicular measurements
+            plan.tooNarrow = plan.availableSpace < ownerContext.flexedMinSize;
+            if (plan.tooNarrow && Ext.getScrollbarSize()[names.height] && me.scrollParallel && ownerContext.state.perpendicularDone) {
+                ownerContext.state.perpendicularDone = false;
+                for (i = 0; i < childItemsLength; ++i) {
+                    childItems[i].invalidate();
+                }
+            }
+        }
+
+        contentWidth = nonFlexWidth;
+        remainingWidth = plan.availableSpace;
+        remainingFlex = ownerContext.totalFlex;
+
+        // Calculate flexed item sizes:
+        for (i = 0; i < flexedItemsLength; i++) {
+            childContext = flexedItems[i];
+            flex         = childContext.flex;
+            flexedWidth  = me.roundFlex((flex / remainingFlex) * remainingWidth);
+            flexedWidth  = childContext[setWidthName](flexedWidth); // constrained
+            // for shrinkWrap w/flex, the item will be reduced to minWidth (maybe 0)
+
+            // due to minWidth constraints, it may be that flexedWidth > remainingWidth
+
+            contentWidth   += flexedWidth;
+            // Remaining space has already had margins subtracted, so just subtract size
+            remainingWidth  = Math.max(0, remainingWidth - flexedWidth); // no negatives!
+            remainingFlex  -= flex;
+        }
+
+        if (pack.center) {
+            left += remainingWidth / 2;
+
+            // If content is too wide to pack to center, do not allow the centering calculation to place it off the left edge.
+            if (left < 0) {
+                left = 0;
+            }
+        } else if (pack.end) {
+            left += remainingWidth;
+        }
+
+        // Assign parallel position for the boxes:
+        for (i = 0; i < childItemsLength; ++i) {
+            childContext = childItems[i];
+            childMargins = childContext.marginInfo; // already cached by first loop
+
+            left += childMargins[leftName];
+
+            childContext.setProp(names.x, left);
+
+            // We can read directly from "props.width" because we have already properly
+            // requested it in the calculation of nonFlexedWidths or we calculated it.
+            // We cannot call getProp because that would be inappropriate for flexed items
+            // and we don't need any extra function call overhead:
+            left += childMargins[rightName] + childContext.props[widthName];
+        }
+
+        // Stash the contentWidth on the state so that it can always be accessed later in the calculation
+        ownerContext.state.contentWidth = contentWidth + ownerContext.targetContext.getPaddingInfo()[widthName];
+
+        // If we may have to increase our contentWidth to accommodate shrinkwrapping a scrollbar, we cannot publish our contentWidth
+        // Until we know whether that scrollbar is neeeded. Which won't be until we've calculated perpendicular
+        if (!ownerContext.state.additionalScrollbarWidth) {
+            ownerContext[names.setContentWidth](ownerContext.state.contentWidth);
+        }
+
+        return true;
+    },
+
+    calculatePerpendicular: function(ownerContext, names, plan) {
+        var me = this,
+            heightShrinkWrap = ownerContext.perpendicularSizeModel.shrinkWrap,
+            targetSize = plan.targetSize,
+            childItems = ownerContext.childItems,
+            childItemsLength = childItems.length,
+            mmax = Math.max,
+            heightName = names.height,
+            setHeightName = names.setHeight,
+            topName = names.top,
+            topPositionName = names.y,
+            padding = me.padding,
+            top = padding[topName],
+            availHeight = targetSize[heightName] - top - padding[names.bottom],
+            align = ownerContext.boxOptions.align,
+            isStretch    = align.stretch, // never true if heightShrinkWrap (see beginLayoutCycle)
+            isStretchMax = align.stretchmax,
+            isCenter     = align.center,
+            maxHeight = 0,
+            childTop, i, childHeight, childMargins, diff, height, childContext,
+            stretchMaxPartner,
+            scrollbarHeight,
+            stretchMaxChildren;
+
+        if (isStretch || (isCenter && !heightShrinkWrap)) {
+            if (isNaN(availHeight)) {
+                return false;
+            }
+        }
+
+        // If the intention is to horizontally scroll height-fitted child components, but the container is too narrow,
+        // then we must allow for the parallel scrollbar to intrude into the perpendicular dimension
+        if (isStretch && me.scrollParallel && plan.tooNarrow) {
+            scrollbarHeight = Ext.getScrollbarSize().height;
+            availHeight -= scrollbarHeight;
+            plan.targetSize[heightName] -= scrollbarHeight;
+        }
+
+        if (isStretch) {
+            height = availHeight; // never heightShrinkWrap...
+        } else {
+            for (i = 0; i < childItemsLength; i++) {
+                childContext = childItems[i];
+                childMargins = childContext.marginInfo || childContext.getMarginInfo();
+                childHeight  = childContext.getProp(heightName);
+
+                // Max perpendicular measurement (used for stretchmax) must take the min perpendicular size of each child into account in case any fall short.
+                if (isNaN(maxHeight = mmax(maxHeight, childHeight + childMargins[heightName], childContext.target[names.minHeight]||0))) {
+                    return false; // heightShrinkWrap || isCenter || isStretchMax ??
+                }
+            }
+
+            // If we are associated with another box layout, grab its maxChildHeight
+            stretchMaxPartner = ownerContext.stretchMaxPartner;
+            if (stretchMaxPartner) {
+                // Publish maxChildHeight as soon as it has been calculated for our partner:
+                ownerContext.setProp('maxChildHeight', maxHeight);
+                stretchMaxChildren = stretchMaxPartner.childItems;
+                // Only wait for maxChildHeight if our partner has visible items:
+                if (stretchMaxChildren && stretchMaxChildren.length) {
+                    maxHeight = mmax(maxHeight, stretchMaxPartner.getProp('maxChildHeight'));
+                    if (isNaN(maxHeight)) {
+                        return false;
+                    }
+                }
+            }
+
+            plan.maxSize = maxHeight;
+            ownerContext[names.setContentHeight](maxHeight + me.padding[heightName] +
+                ownerContext.targetContext.getPaddingInfo()[heightName]);
+
+            if (isStretchMax) {
+                height = maxHeight;
+            } else if (isCenter) {
+                height = heightShrinkWrap ? maxHeight : mmax(availHeight, maxHeight);
+
+                // When calculating a centered position within the content box of the innerCt,
+                // the width of the borders must be subtracted from the size to yield the
+                // space available to center within. The publishInnerCtSize method explicitly
+                // adds the border widths to the set size of the innerCt.
+                height -= ownerContext.innerCtContext.getBorderInfo()[heightName];
+            }
+        }
+
+        for (i = 0; i < childItemsLength; i++) {
+            childContext = childItems[i];
+            childMargins = childContext.marginInfo || childContext.getMarginInfo();
+
+            childTop = top + childMargins[topName];
+
+            if (isStretch) {
+                childContext[setHeightName](height - childMargins[heightName]);
+            } else if (isCenter) {
+                diff = height - childContext.props[heightName];
+                if (diff > 0) {
+                    childTop = top + Math.round(diff / 2);
+                }
+            }
+
+            childContext.setProp(topPositionName, childTop);
+        }
+
+        return true;
+    },
+
+    calculateStretchMax: function (ownerContext, names, plan) {
+        var me = this,
+            heightName = names.height,
+            widthName = names.width,
+            childItems = ownerContext.childItems,
+            length = childItems.length,
+            height = plan.maxSize,
+            onBeforeInvalidateChild = me.onBeforeInvalidateChild,
+            onAfterInvalidateChild = me.onAfterInvalidateChild,
+            childContext, props, i, childHeight;
+
+        for (i = 0; i < length; ++i) {
+            childContext = childItems[i];
+
+            props = childContext.props;
+            childHeight = height - childContext.getMarginInfo()[heightName];
+
+            if (childHeight != props[heightName] ||   // if (wrong height ...
+                childContext[names.heightModel].constrained) { // ...or needs invalidation)
+                // When we invalidate a child, since we won't be around to size or position
+                // it, we include an after callback that will be run after the invalidate
+                // that will (re)do that work. The good news here is that we can read the
+                // results of all that from the childContext props.
+                //
+                // We also include a before callback to change the sizeModel to calculated
+                // prior to the layout being invoked.
+                childContext.invalidate({
+                    before: onBeforeInvalidateChild,
+                    after: onAfterInvalidateChild,
+                    layout: me,
+                    // passing this data avoids a 'scope' and its Function.bind
+                    childWidth: props[widthName],
+                    // subtract margins from the maximum value
+                    childHeight: childHeight,
+                    childX: props.x,
+                    childY: props.y,
+                    names: names
+                });
+            }
+        }
+    },
+
+    completeLayout: function(ownerContext) {
+        var me = this;
+
+        me.overflowHandler.completeLayout(ownerContext);
+
+        // If we are scrolling parallel, restore the saved scroll position
+        if (me.scrollParallel) {
+            me.owner.getTargetEl().dom[me.getNames().scrollLeft] = me.scrollPos;
+        }
+    },
+
+    finishedLayout: function(ownerContext) {
+        this.overflowHandler.finishedLayout(ownerContext);
+        this.callParent(arguments);
+    },
+
+    onBeforeInvalidateChild: function (childContext, options) {
+        // NOTE: No "this" pointer in here...
+        var heightModelName = options.names.heightModel;
+
+        // Change the childItem to calculated (i.e., "set by ownerCt"). The component layout
+        // of the child can course-correct (like dock layout does for a collapsed panel),
+        // so we must make these changes here before that layout's beginLayoutCycle is
+        // called.
+        if (!childContext[heightModelName].constrainedMax) {
+            // if the child hit a max constraint, it needs to be at its configured size, so
+            // we leave the sizeModel alone...
+            childContext[heightModelName] = Ext.layout.SizeModel.calculated;
+        }
+    },
+
+    onAfterInvalidateChild: function (childContext, options) {
+        // NOTE: No "this" pointer in here...
+        var names = options.names;
+
+        childContext.setProp('x', options.childX);
+        childContext.setProp('y', options.childY);
+
+        if (childContext[names.heightModel].calculated) {
+            // We need to respect a child that is still not calculated (such as a collapsed
+            // panel)...
+            childContext[names.setHeight](options.childHeight);
+        }
+
+        if (childContext[names.widthModel].calculated) {
+            childContext[names.setWidth](options.childWidth);
+        }
+    },
+
+    publishInnerCtSize: function(ownerContext, reservedSpace) {
+        var me = this,
+            names = me.getNames(),
+            heightName = names.height,
+            widthName = names.width,
+            align = ownerContext.boxOptions.align,
+            dock = me.owner.dock,
+            padding = me.padding,
+            plan = ownerContext.state.boxPlan,
+            targetSize = plan.targetSize,
+            height = targetSize[heightName],
+            innerCtContext = ownerContext.innerCtContext,
+            parallelContentDim = names.contentWidth,
+            innerCtWidth = (ownerContext.parallelSizeModel.shrinkWrap || (plan.tooNarrow && me.scrollParallel)
+                    ? ownerContext.state.contentWidth
+                    : targetSize[widthName]) - (reservedSpace || 0),
+            innerCtHeight;
+
+        if (align.stretch) {
+            innerCtHeight = height;
+        } else {
+            innerCtHeight = plan.maxSize + padding[names.top] + padding[names.bottom] + innerCtContext.getBorderInfo()[heightName];
+
+            if (!ownerContext.perpendicularSizeModel.shrinkWrap && align.center) {
+                innerCtHeight = Math.max(height, innerCtHeight);
+            }
+        }
+
+        innerCtContext[names.setWidth](innerCtWidth);
+        innerCtContext[names.setHeight](innerCtHeight);
+
+        // If we are scrolling in the perpendicular dimension
+        // AND we are shrinkWrapping the parallel dimension (Imagine stacking boxes on top of each other and stretching the container height),
+        // AND the perpendicular is *not* shrinkWrapped, and overflows
+        // AND scrollbars take up space
+        //    Then the shrink wrap size must extend to include the scrollbar
+        if (ownerContext.state.additionalScrollbarWidth) {
+            if (innerCtHeight > plan.targetSize[names.height]) {
+                ownerContext.setProp(parallelContentDim, ownerContext.state.contentWidth + ownerContext.state.additionalScrollbarWidth);
+
+                // Scrollbar does not stretch the container in IE6, 7 and quirks, so we must explicitly extend the container to accommodate the scrollbar, otherwise it "cuts into" the content.
+                if (Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) {
+                    ownerContext[names.setWidth](ownerContext.props[parallelContentDim] + ownerContext.getPaddingInfo()[names.width] + ownerContext.getBorderInfo()[names.width]);
+                }
+            } else {
+                ownerContext.setProp(parallelContentDim, ownerContext.state.contentWidth);
+            }
+        }
+
+        // If unable to publish both dimensions, this layout needs to run again
+        if (isNaN(innerCtWidth + innerCtHeight)) {
+            me.done = false;
+        }
+
+        // If a calculated width has been found (this only happens for widthModel.shrinkWrap
+        // vertical docked Components in old Microsoft browsers) then, if the Component has
+        // not assumed the size of its content, set it to do so.
+        //
+        // We MUST pass the dirty flag to get that into the DOM, and because we are a Container
+        // layout, and not really supposed to perform sizing, we must also use the force flag.
+        if (plan.calculatedWidth && (dock == 'left' || dock == 'right')) {
+            ownerContext.setWidth(plan.calculatedWidth, true, true);
+        }
+    },
+
+    onRemove: function(comp){
+        var me = this;
+        me.callParent(arguments);
+        if (me.overflowHandler) {
+            me.overflowHandler.onRemove(comp);
+        }
+        if (comp.layoutMarginCap == me.id) {
+            delete comp.layoutMarginCap;
+        }
+    },
+
+    /**
+     * @private
+     */
+    initOverflowHandler: function() {
+        var me = this,
+            handler = me.overflowHandler,
+            handlerType,
+            constructor;
+
+        if (typeof handler == 'string') {
+            handler = {
+                type: handler
+            };
+        }
+
+        handlerType = 'None';
+        if (handler && handler.type !== undefined) {
+            handlerType = handler.type;
+        }
+
+        constructor = Ext.layout.container.boxOverflow[handlerType];
+        if (constructor[me.type]) {
+            constructor = constructor[me.type];
+        }
+
+        me.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.' + handlerType, me, handler);
+    },
+
+    // Overridden method from Ext.layout.container.Container.
+    // Used in the beforeLayout method to render all items into.
+    getRenderTarget: function() {
+        return this.targetEl;
+    },
+
+    // Overridden method from Ext.layout.container.Container.
+    // Used by Container classes to insert special DOM elements which must exist in addition to the child components
+    getElementTarget: function() {
+        return this.innerCt;
+    },
+
+    //<debug>
+    calculateChildBox: Ext.deprecated(),
+    calculateChildBoxes: Ext.deprecated(),
+    updateChildBoxes: Ext.deprecated(),
+    //</debug>
+
+    /**
+     * @private
+     */
+    destroy: function() {
+        Ext.destroy(this.innerCt, this.overflowHandler);
+        this.callParent(arguments);
+    }
+});