extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/layout/container/Column.js

@@ -1,234 +0,0 @@
-/**
- * This is the layout style of choice for creating structural layouts in a multi-column format where the width of each
- * column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This
- * class is intended to be extended or created via the layout:'column' {@link Ext.container.Container#layout} config,
- * and should generally not need to be created directly via the new keyword.
- *
- * ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific
- * config property of `columnWidth` that can be included in the config of any panel added to it. The layout will use
- * the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or
- * columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
- *
- * The width property is always evaluated as pixels, and must be a number greater than or equal to 1. The columnWidth
- * property is always evaluated as a percentage, and must be a decimal value greater than 0 and less than 1 (e.g., .25).
- *
- * The basic rules for specifying column widths are pretty simple. The logic makes two passes through the set of
- * contained panels. During the first layout pass, all panels that either have a fixed width or none specified (auto)
- * are skipped, but their widths are subtracted from the overall container width.
- *
- * During the second pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages
- * based on the total **remaining** container width. In other words, percentage width panels are designed to fill
- * the space left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any
- * number of columns with different percentages, the columnWidths must always add up to 1 (or 100%) when added
- * together, otherwise your layout may not render as expected.
- *
- *     @example
- *     // All columns are percentages -- they must add up to 1
- *     Ext.create('Ext.panel.Panel', {
- *         title: 'Column Layout - Percentage Only',
- *         width: 350,
- *         height: 250,
- *         layout:'column',
- *         items: [{
- *             title: 'Column 1',
- *             columnWidth: 0.25
- *         },{
- *             title: 'Column 2',
- *             columnWidth: 0.55
- *         },{
- *             title: 'Column 3',
- *             columnWidth: 0.20
- *         }],
- *         renderTo: Ext.getBody()
- *     });
- *
- *     // Mix of width and columnWidth -- all columnWidth values must add up
- *     // to 1. The first column will take up exactly 120px, and the last two
- *     // columns will fill the remaining container width.
- *
- *     Ext.create('Ext.Panel', {
- *         title: 'Column Layout - Mixed',
- *         width: 350,
- *         height: 250,
- *         layout:'column',
- *         items: [{
- *             title: 'Column 1',
- *             width: 120
- *         },{
- *             title: 'Column 2',
- *             columnWidth: 0.7
- *         },{
- *             title: 'Column 3',
- *             columnWidth: 0.3
- *         }],
- *         renderTo: Ext.getBody()
- *     });
- */
-Ext.define('Ext.layout.container.Column', {
-
-    extend: 'Ext.layout.container.Container',
-    alias: ['layout.column'],
-    alternateClassName: 'Ext.layout.ColumnLayout',
-
-    type: 'column',
-
-    itemCls: Ext.baseCSSPrefix + 'column',
-
-    targetCls: Ext.baseCSSPrefix + 'column-layout-ct',
-
-    // Columns with a columnWidth have their width managed.
-    columnWidthSizePolicy: {
-        setsWidth: 1,
-        setsHeight: 0
-    },
-
-    childEls: [
-        'innerCt'
-    ],
-
-    manageOverflow: 2,
-
-    renderTpl: [
-        '<div id="{ownerId}-innerCt" class="',Ext.baseCSSPrefix,'column-inner">',
-            '{%this.renderBody(out,values)%}',
-            '<div class="',Ext.baseCSSPrefix,'clear"></div>',
-        '</div>',
-        '{%this.renderPadder(out,values)%}'
-    ],
-
-    getItemSizePolicy: function (item) {
-        if (item.columnWidth) {
-            return this.columnWidthSizePolicy;
-        }
-        return this.autoSizePolicy;
-    },
-
-    beginLayout: function() {
-        this.callParent(arguments);
-        this.innerCt.dom.style.width = '';
-    },
-
-    calculate: function (ownerContext) {
-        var me = this,
-            containerSize = me.getContainerSize(ownerContext),
-            state = ownerContext.state;
-
-        if (state.calculatedColumns || (state.calculatedColumns = me.calculateColumns(ownerContext))) {
-            if (me.calculateHeights(ownerContext)) {
-                me.calculateOverflow(ownerContext, containerSize);
-                return;
-            }
-        }
-
-        me.done = false;
-    },
-
-    calculateColumns: function (ownerContext) {
-        var me = this,
-            containerSize = me.getContainerSize(ownerContext),
-            innerCtContext = ownerContext.getEl('innerCt', me),
-            items = ownerContext.childItems,
-            len = items.length,
-            contentWidth = 0,
-            blocked, availableWidth, i, itemContext, itemMarginWidth, itemWidth;
-
-        // Can never decide upon necessity of vertical scrollbar (and therefore, narrower
-        // content width) until the component layout has published a height for the target
-        // element.
-        if (!ownerContext.heightModel.shrinkWrap && !ownerContext.targetContext.hasProp('height')) {
-            return false;
-        }
-
-        // No parallel measurement, cannot lay out boxes.
-        if (!containerSize.gotWidth) { //\\ TODO: Deal with target padding width
-            ownerContext.targetContext.block(me, 'width');
-            blocked = true;
-        } else {
-            availableWidth = containerSize.width;
-
-            innerCtContext.setWidth(availableWidth);
-        }
-
-        // we need the widths of the columns we don't manage to proceed so we block on them
-        // if they are not ready...
-        for (i = 0; i < len; ++i) {
-            itemContext = items[i];
-
-            // this is needed below for non-calculated columns, but is also needed in the
-            // next loop for calculated columns... this way we only call getMarginInfo in
-            // this loop and use the marginInfo property in the next...
-            itemMarginWidth = itemContext.getMarginInfo().width;
-
-            if (!itemContext.widthModel.calculated) {
-                itemWidth = itemContext.getProp('width');
-                if (typeof itemWidth != 'number') {
-                    itemContext.block(me, 'width');
-                    blocked = true;
-                }
-
-                contentWidth += itemWidth + itemMarginWidth;
-            }
-        }
-
-        if (!blocked) {
-            availableWidth = (availableWidth < contentWidth) ? 0 : availableWidth - contentWidth;
-
-            for (i = 0; i < len; ++i) {
-                itemContext = items[i];
-                if (itemContext.widthModel.calculated) {
-                    itemMarginWidth = itemContext.marginInfo.width; // always set by above loop
-                    itemWidth = itemContext.target.columnWidth;
-                    itemWidth = Math.floor(itemWidth * availableWidth) - itemMarginWidth;
-                    itemWidth = itemContext.setWidth(itemWidth); // constrains to min/maxWidth
-                    contentWidth += itemWidth + itemMarginWidth;
-                }
-            }
-
-            ownerContext.setContentWidth(contentWidth);
-        }
-
-        // we registered all the values that block this calculation, so abort now if blocked...
-        return !blocked;
-    },
-
-    calculateHeights: function (ownerContext) {
-        var me = this,
-            items = ownerContext.childItems,
-            len = items.length,
-            blocked, i, itemContext;
-
-        // in order for innerCt to have the proper height, all the items must have height
-        // correct in the DOM...
-        blocked = false;
-        for (i = 0; i < len; ++i) {
-            itemContext = items[i];
-
-            if (!itemContext.hasDomProp('height')) {
-                itemContext.domBlock(me, 'height');
-                blocked = true;
-            }
-        }
-
-        if (!blocked) {
-            ownerContext.setContentHeight(me.innerCt.getHeight() + ownerContext.targetContext.getPaddingInfo().height);
-        }
-
-        return !blocked;
-    },
-
-    finishedLayout: function (ownerContext) {
-        var bc = ownerContext.bodyContext;
-
-        // Owner may not have a body - this seems to only be needed for Panels.
-        if (bc && (Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks)) {
-            // Fix for https://sencha.jira.com/browse/EXTJSIV-4979
-            bc.el.repaint();
-        }
-
-        this.callParent(arguments);
-    },
-
-    getRenderTarget : function() {
-        return this.innerCt;
-    }
-});

data/app/assets/javascripts/src/layout/container/Container.js

@@ -1,961 +0,0 @@
-/**
- * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}
- * configuration property.  See {@link Ext.container.Container#layout} for additional details.
- */
-Ext.define('Ext.layout.container.Container', {
-
-    /* Begin Definitions */
-
-    extend: 'Ext.layout.Layout',
-
-    alternateClassName: 'Ext.layout.ContainerLayout',
-
-    mixins: {
-        elementCt: 'Ext.util.ElementContainer'
-    },
-
-    requires: [
-        'Ext.XTemplate'
-    ],
-
-    type: 'container',
-
-    /* End Definitions */
-
-    /**
-     * @cfg {String} itemCls
-     * An optional extra CSS class that will be added to the container. This can be useful for
-     * adding customized styles to the container or any of its children using standard CSS
-     * rules. See {@link Ext.Component}.{@link Ext.Component#componentCls componentCls} also.
-     */
-
-    /**
-     * @cfg {Number} [manageOverflow=0]
-     * One of the following values:
-     *
-     *  - 0 if the layout should ignore overflow.
-     *  - 1 if the layout should be rerun if scrollbars are needed.
-     *  - 2 if the layout should also correct padding when overflowed.
-     */
-    manageOverflow: 0,
-
-    /**
-     * @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: Ext.emptyFn,
-
-    /**
-     * @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: Ext.emptyFn,
-
-    /**
-     * An object which contains boolean properties specifying which properties are to be 
-     * animated upon flush of child Component ContextItems. For example, Accordion would
-     * have:
-     *
-     *      {
-     *          y: true,
-     *          height: true
-     *      }
-     *
-     * @private
-     */
-    animatePolicy: null,
-
-    childEls: [
-        /**
-         * @property {Ext.Element} overflowPadderEl
-         * The element used to correct body padding during overflow.
-         */
-        'overflowPadderEl'
-    ],
-
-    renderTpl: [
-        '{%this.renderBody(out,values)%}'
-    ],
-
-    usesContainerHeight: true,
-    usesContainerWidth: true,
-    usesHeight: true,
-    usesWidth: true,
-
-
-    /**
-     * @cfg {Boolean} [reserveScrollbar=false]
-     * Set to `true` to leave space for a vertical scrollbar (if the OS shows space-consuming scrollbars) regardless
-     * of whether a scrollbar is needed.
-     *
-     * This is useful if content height changes during application usage, but you do not want the calculated width
-     * of child items to change when a scrollbar appears or disappears. The scrollbar will appear in the reserved space,
-     * and the calculated width of child Components will not change.
-     *
-     *     @example
-     *     Ext.define('Employee', {
-     *         extend: 'Ext.data.Model',
-     *         fields: [
-     *            {name: 'rating', type: 'int'},
-     *            {name: 'salary', type: 'float'},
-     *            {name: 'name'}
-     *         ]
-     *     });
-     *
-     *     function createFakeData(count) {
-     *         var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
-     *             lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
-     *             ratings      = [1, 2, 3, 4, 5],
-     *             salaries     = [100, 400, 900, 1500, 1000000];
-     *
-     *         var data = [];
-     *         for (var i = 0; i < (count || 25); i++) {
-     *             var ratingId    = Math.floor(Math.random() * ratings.length),
-     *                 salaryId    = Math.floor(Math.random() * salaries.length),
-     *                 firstNameId = Math.floor(Math.random() * firstNames.length),
-     *                 lastNameId  = Math.floor(Math.random() * lastNames.length),
-     *
-     *                 rating      = ratings[ratingId],
-     *                 salary      = salaries[salaryId],
-     *                 name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
-     *
-     *             data.push({
-     *                 rating: rating,
-     *                 salary: salary,
-     *                 name: name
-     *             });
-     *         }
-     *         store.loadData(data);
-     *     }
-     *
-     *     // create the Data Store
-     *     var store = Ext.create('Ext.data.Store', {
-     *         id: 'store',
-     *         model: 'Employee',
-     *         proxy: {
-     *             type: 'memory'
-     *         }
-     *     });
-     *     createFakeData(10);
-     *
-     *     var grid = Ext.create('Ext.grid.Panel', {
-     *         title: 'Grid loaded with varying number of records',
-     *         anchor: '100%',
-     *         store: store,
-     *         columns: [{
-     *             xtype: 'rownumberer',
-     *             width: 40,
-     *             sortable: false
-     *         },{
-     *             text: 'Name',
-     *             flex: 1,
-     *             sortable: true,
-     *             dataIndex: 'name'
-     *         },{
-     *             text: 'Rating',
-     *             width: 125,
-     *             sortable: true,
-     *             dataIndex: 'rating'
-     *         },{
-     *             text: 'Salary',
-     *             width: 125,
-     *             sortable: true,
-     *             dataIndex: 'salary',
-     *             align: 'right',
-     *             renderer: Ext.util.Format.usMoney
-     *         }]
-     *     });
-     *
-     *     Ext.create('Ext.panel.Panel', {
-     *         renderTo: document.body,
-     *         width: 800,
-     *         height: 600,
-     *         layout: {
-     *             type: 'anchor',
-     *             reserveScrollbar: true // There will be a gap even when there's no scrollbar
-     *         },
-     *         autoScroll: true,
-     *         items: grid,
-     *         tbar: {
-     *             defaults: {
-     *                 handler: function(b) {
-     *                     createFakeData(b.count);
-     *                 }
-     *             },
-     *             items: [{
-     *                  text: '10 Items',
-     *                  count: 10
-     *             },{
-     *                  text: '100 Items',
-     *                  count: 100
-     *             },{
-     *                  text: '300 Items',
-     *                  count: 300
-     *             },{
-     *                  text: '1000 Items',
-     *                  count: 1000
-     *             },{
-     *                  text: '5000 Items',
-     *                  count: 5000
-     *             }]
-     *         }
-     *     });
-     *
-     */
-    reserveScrollbar: false,
-
-    // Begin with no previous adjustments
-    lastOverflowAdjust: {
-        width: 0,
-        height: 0
-    },
-
-    constructor: function () {
-        this.callParent(arguments);
-        this.mixins.elementCt.constructor.call(this);
-    },
-
-    destroy : function() {
-        this.callParent();
-        this.mixins.elementCt.destroy.call(this);
-    },
-
-    initLayout: function() {
-        var me = this,
-            scrollbarWidth = Ext.getScrollbarSize().width;
-
-        me.callParent();
-
-        // Create a default lastOverflowAdjust based upon scrolling configuration.
-        // If the Container is to overflow, or we *always* reserve space for a scrollbar
-        // then reserve space for a vertical scrollbar
-        if (scrollbarWidth && me.manageOverflow && !me.hasOwnProperty('lastOverflowAdjust')) {
-            if (me.owner.autoScroll || me.reserveScrollbar) {
-                me.lastOverflowAdjust = {
-                    width: scrollbarWidth,
-                    height: 0
-                };
-            }
-        }
-    },
-
-    /**
-     * In addition to work done by our base classes, containers benefit from some extra
-     * cached data. The following properties are added to the ownerContext:
-     * 
-     *  - visibleItems: the result of {@link #getVisibleItems}
-     *  - childItems: the ContextItem[] for each visible item
-     *  - targetContext: the ContextItem for the {@link #getTarget} element
-     */
-    beginLayout: function (ownerContext) {
-        this.callParent(arguments);
-
-        ownerContext.targetContext = ownerContext.getEl('getTarget', this);
-
-        this.cacheChildItems(ownerContext);
-    },
-
-    beginLayoutCycle: function (ownerContext, firstCycle) {
-        var me = this,
-            padEl = me.overflowPadderEl;
-
-        me.callParent(arguments);
-
-        // Begin with the scrollbar adjustment that we used last time - this is more likely to be correct
-        // than beginning with no adjustment at all
-        if (!ownerContext.state.overflowAdjust) {
-            ownerContext.state.overflowAdjust = me.lastOverflowAdjust;
-        }
-
-        if (firstCycle) {
-            if (me.usesContainerHeight) {
-                ++ownerContext.consumersContainerHeight;
-            }
-            if (me.usesContainerWidth) {
-                ++ownerContext.consumersContainerWidth;
-            }
-        }
-
-        if (padEl) {
-            padEl.setStyle('display', 'none');
-        }
-    },
-
-    completeLayout: function (ownerContext) {
-        // Cache the scrollbar adjustment
-        this.lastOverflowAdjust = ownerContext.state.overflowAdjust;
-    },
-
-    cacheChildItems: function (ownerContext) {
-        var context = ownerContext.context,
-            childItems = [],
-            items = this.getVisibleItems(),
-            length = items.length,
-            i;
-
-        ownerContext.childItems = childItems;
-        ownerContext.visibleItems = items;
-
-        for (i = 0; i < length; ++i) {
-            childItems.push(context.getCmp(items[i]));
-        }
-    },
-
-    cacheElements: function () {
-        var owner = this.owner;
-
-        this.applyChildEls(owner.el, owner.id); // from ElementContainer mixin
-    },
-
-    calculateContentSize: function (ownerContext, dimensions) {
-        var me = this,
-            containerDimensions = (dimensions || 0) | me.manageOverflow |
-                   ((ownerContext.widthModel.shrinkWrap ? 1 : 0) |
-                    (ownerContext.heightModel.shrinkWrap ? 2 : 0)),
-            calcWidth = (containerDimensions & 1) || undefined,
-            calcHeight = (containerDimensions & 2) || undefined,
-            childItems = ownerContext.childItems,
-            length = childItems.length,
-            contentHeight = 0,
-            contentWidth = 0,
-            needed = 0,
-            props = ownerContext.props,
-            targetXY, targetX, targetY, targetPadding,
-            borders, child, childContext, childX, childY, height, i, margins, width, xy;
-
-        if (calcWidth) {
-            if (isNaN(props.contentWidth)) {
-                ++needed;
-            } else {
-                calcWidth = undefined;
-            }
-        }
-        if (calcHeight) {
-            if (isNaN(props.contentHeight)) {
-                ++needed;
-            } else {
-                calcHeight = undefined;
-            }
-        }
-
-        if (needed) {
-            // TODO - this is rather brute force... maybe a wrapping el or clientHeight/Width
-            // trick might help. Whatever we do, it must either work for Absolute layout or
-            // at least be correctable by an overridden method in that derived class.
-            for (i = 0; i < length; ++i) {
-                childContext = childItems[i];
-                child = childContext.target;
-                height = calcHeight && childContext.getProp('height');
-                width = calcWidth && childContext.getProp('width');
-                margins = childContext.getMarginInfo();
-
-                // getXY is the root method here (meaning that we cannot avoid getting both
-                // even if we need only one), so dip into the DOM if something is needed
-                if ((calcWidth && isNaN(child.x)) || (calcHeight && isNaN(child.y))) {
-                    xy = child.el.getXY();
-                    if (!targetXY) {
-                        targetXY = ownerContext.targetContext.el.getXY();
-                        borders = ownerContext.targetContext.getBorderInfo();
-                        targetX = targetXY[0] + borders.left;
-                        targetY = targetXY[1] + borders.top;
-                    }
-                    // not worth avoiding the possibly useless calculation here:
-                    childX = xy[0] - targetX;
-                    childY = xy[1] - targetY;
-                } else {
-                    // not worth avoiding these either:
-                    childX = child.x;
-                    childY = child.y;
-                }
-                // XY includes the top/left margin
-
-                height += margins.bottom;
-                width  += margins.right;
-
-                contentHeight = Math.max(contentHeight, childY + height);
-                contentWidth = Math.max(contentWidth, childX + width);
-
-                if (isNaN(contentHeight) && isNaN(contentWidth)) {
-                    me.done = false;
-                    return;
-                }
-            }
-
-            if (calcWidth || calcHeight) {
-                targetPadding = ownerContext.targetContext.getPaddingInfo();
-            }
-            if (calcWidth && !ownerContext.setContentWidth(contentWidth + targetPadding.right)) {
-                me.done = false;
-            }
-            if (calcHeight && !ownerContext.setContentHeight(contentHeight + targetPadding.bottom)) {
-                me.done = false;
-            }
-
-            /* add a '/' to turn on this log ('//* enables, '/*' disables)
-            if (me.done) {
-                var el = ownerContext.targetContext.el.dom;
-                Ext.log(this.owner.id, '.contentSize: ', contentWidth, 'x', contentHeight,
-                    ' => scrollSize: ', el.scrollWidth, 'x', el.scrollHeight);
-            }/**/
-        }
-    },
-
-    /**
-     * Handles overflow processing for a container. This should be called once the layout
-     * has determined contentWidth/Height. In addition to the ownerContext passed to the
-     * {@link #calculate} method, this method also needs the containerSize (the object
-     * returned by {@link #getContainerSize}).
-     * 
-     * @param {Ext.layout.ContextItem} ownerContext
-     * @param {Object} containerSize
-     * @param {Number} dimensions A bit mask for the overflow managed dimensions. The 0-bit
-     * is for `width` and the 1-bit is for `height`. In other words, a value of 1 would be
-     * only `width`, 2 would be only `height` and 3 would be both.
-     */
-    calculateOverflow: function (ownerContext, containerSize, dimensions) {
-        var me = this,
-            owner = me.owner,
-            manageOverflow = me.manageOverflow,
-            state = ownerContext.state,
-            overflowAdjust = state.overflowAdjust,
-            padWidth, padHeight, padElContext, padding, scrollRangeFlags,
-            overflow, scrollbarSize, contentW, contentH, ownerW, ownerH, scrollbars,
-            xauto, yauto;
-
-        if (manageOverflow && !state.secondPass && !me.reserveScrollbar) {
-            // Determine the dimensions that have overflow:auto applied. If these come by
-            // way of component config, this does not require a DOM read:
-            if (owner.autoScroll) {
-                xauto = yauto = true;
-            } else {
-                if (owner.overflowX) {
-                    xauto = owner.overflowX == 'auto';
-                } else {
-                    overflow = ownerContext.targetContext.getStyle('overflow-x');
-                    xauto = overflow && overflow != 'hidden' && overflow != 'scroll';
-                }
-
-                if (owner.overflowY) {
-                    yauto = owner.overflowY == 'auto';
-                } else {
-                    overflow = ownerContext.targetContext.getStyle('overflow-y');
-                    yauto = overflow && overflow != 'hidden' && overflow != 'scroll';
-                }
-            }
-
-            // If the container layout is not using width, we don't need to adjust for the
-            // vscroll (likewise for height). Perhaps we don't even need to run the layout
-            // again if the adjustments won't have any effect on the result!
-            if (!containerSize.gotWidth) {
-                xauto = false;
-            }
-            if (!containerSize.gotHeight) {
-                yauto = false;
-            }
-
-            if (xauto || yauto) {
-                scrollbarSize = Ext.getScrollbarSize();
-
-                // as a container we calculate contentWidth/Height, so we don't want
-                // to use getProp and make it look like we are triggered by them...
-                contentW = ownerContext.peek('contentWidth');
-                contentH = ownerContext.peek('contentHeight');
-                ownerW = containerSize.width;
-                ownerH = containerSize.height;
-
-                scrollbars = me.getScrollbarsNeeded(ownerW, ownerH, contentW, contentH);
-                state.overflowState = scrollbars;
-
-                if (typeof dimensions == 'number') {
-                    scrollbars &= ~dimensions; // ignore dimensions that have no effect
-                }
-
-                overflowAdjust = {
-                    width:  (xauto && (scrollbars & 2)) ? scrollbarSize.width : 0,
-                    height: (yauto && (scrollbars & 1)) ? scrollbarSize.height : 0
-                };
-
-                // We can have 0-sized scrollbars (new Mac OS) and so don't invalidate
-                // the layout unless this will change something...
-                if (overflowAdjust.width !== me.lastOverflowAdjust.width || overflowAdjust.height !== me.lastOverflowAdjust.height) {
-                    me.done = false;
-
-                    // we pass overflowAdjust and overflowState in as state for the next
-                    // cycle (these are discarded if one of our ownerCt's invalidates):
-                    ownerContext.invalidate({
-                        state: {
-                            overflowAdjust: overflowAdjust,
-                            overflowState: state.overflowState,
-                            secondPass: true
-                        }
-                    });
-                }
-            }
-        }
-
-        if (!me.done) {
-            return;
-        }
-
-        padElContext = ownerContext.padElContext ||
-                      (ownerContext.padElContext = ownerContext.getEl('overflowPadderEl', me));
-
-        // Even if overflow does not effect the layout, we still do need the padEl to be
-        // sized or hidden appropriately...
-        if (padElContext) {
-            scrollbars = state.overflowState; // the true overflow state
-            padWidth = containerSize.width;
-            padHeight = 0;//  TODO me.padHeightAdj; // 0 or 1
-
-            if (scrollbars) {
-                padding = ownerContext.targetContext.getPaddingInfo();
-                scrollRangeFlags = me.scrollRangeFlags;
-
-                if ((scrollbars & 2) && (scrollRangeFlags & 1)) { // if (vscroll and loses bottom)
-                    padHeight += padding.bottom;
-                }
-
-                if ((scrollbars & 1) && (scrollRangeFlags & 4)) { // if (hscroll and loses right)
-                    padWidth += padding.right;
-                }
-                padElContext.setProp('display', '');
-                padElContext.setSize(padWidth, padHeight);
-            } else {
-                padElContext.setProp('display', 'none');
-            }
-        }
-    },
-
-    /**
-     * Adds layout's itemCls and owning Container's itemCls
-     * @protected
-     */
-    configureItem: function(item) {
-        var me = this,
-            ownerItemCls = me.owner.itemCls,
-            addClasses = [].concat(me.itemCls || []);
-
-        me.callParent(arguments);
-
-        if (ownerItemCls) {
-            addClasses = Ext.Array.push(addClasses, ownerItemCls);
-        }
-        item.addCls(addClasses);
-    },
-
-    doRenderBody: 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!
-
-        this.renderItems(out, renderData);
-        this.renderContent(out, renderData);
-    },
-
-    doRenderContainer: 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.layout,
-            tpl = me.getRenderTpl(),
-            data = me.getRenderData();
-
-        tpl.applyOut(data, out);
-    },
-
-    doRenderItems: 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.$layout,
-            tree = me.getRenderTree();
-
-        if (tree) {
-            Ext.DomHelper.generateMarkup(tree, out);
-        }
-    },
-
-    /**
-     * Creates an element that makes bottom/right body padding consistent across browsers.
-     * This element is sized based on the need for scrollbars in {@link #calculateOverflow}.
-     * If the {@link #manageOverflow} option is false, this element is not created.
-     *
-     * See {@link #getScrollRangeFlags} for more details.
-     */
-    doRenderPadder: 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.$layout,
-            owner = me.owner,
-            scrollRangeFlags = me.getScrollRangeFlags();
-
-        if (me.manageOverflow == 2) {
-            if (scrollRangeFlags & 5) { // if (loses parent bottom and/or right padding)
-                out.push('<div id="',owner.id,'-overflowPadderEl" ',
-                    'style="font-size: 1px; width:1px; height: 1px;');
-
-                // We won't want the height of the padder to cause problems when we only
-                // want to adjust for right padding, so we relatively position it up 1px so
-                // its height of 1px will have no vertical effect. This trick does not work
-                // on IE due to bugs (the effects are worse than the off-by-1px in scroll
-                // height).
-                //
-                /* turns out this does not work on FF (5) either... TODO
-                if (Ext.isIE || Ext.isGecko) {
-                    me.padHeightAdj = 0;
-                } else {
-                    me.padHeightAdj = 1;
-                    out.push('position: relative; top: -1px;');
-                }/**/
-
-                out.push('"></div>');
-
-                me.scrollRangeFlags = scrollRangeFlags; // remember for calculateOverflow
-            }
-        }
-    }, 
-
-    finishRender: function () {
-        var me = this,
-            target, items;
-
-        me.callParent();
-
-        me.cacheElements();
-
-        target = me.getRenderTarget();
-        items = me.getLayoutItems();
-
-        if (me.targetCls) {
-            me.getTarget().addCls(me.targetCls);
-        }
-
-        me.finishRenderItems(target, items);
-    },
-
-    /**
-     * @private
-     * Called for every layout in the layout context after all the layouts have been finally flushed
-     */
-    notifyOwner: function() {
-        this.owner.afterLayout(this);
-    },
-
-    /**
-     * Returns the container size (that of the target). Only the fixed-sized dimensions can
-     * be returned because the shrinkWrap dimensions are based on the contentWidth/Height
-     * as determined by the container layout.
-     *
-     * If the {@link #calculateOverflow} method is used and if {@link #manageOverflow} is
-     * true, this may adjust the width/height by the size of scrollbars.
-     * 
-     * @param {Ext.layout.ContextItem} ownerContext The owner's context item.
-     * @param {Boolean} [inDom=false] True if the container size must be in the DOM.
-     * @return {Object} The size
-     * @return {Number} return.width The width
-     * @return {Number} return.height The height
-     * @protected
-     */
-    getContainerSize : function(ownerContext, inDom) {
-        // Subtle But Important:
-        // 
-        // We don't want to call getProp/hasProp et.al. unless we in fact need that value
-        // for our results! If we call it and don't need it, the layout manager will think
-        // we depend on it and will schedule us again should it change.
-
-        var targetContext = ownerContext.targetContext,
-            frameInfo = targetContext.getFrameInfo(),
-            padding = targetContext.getPaddingInfo(),
-            got = 0,
-            needed = 0,
-            overflowAdjust = ownerContext.state.overflowAdjust,
-            gotWidth, gotHeight, width, height;
-
-        // In an shrinkWrap width/height case, we must not ask for any of these dimensions
-        // because they will be determined by contentWidth/Height which is calculated by
-        // this layout...
-
-        // Fit/Card layouts are able to set just the width of children, allowing child's
-        // resulting height to autosize the Container.
-        // See examples/tabs/tabs.html for an example of this.
-
-        if (!ownerContext.widthModel.shrinkWrap) {
-            ++needed;
-            width = inDom ? targetContext.getDomProp('width') : targetContext.getProp('width');
-            gotWidth = (typeof width == 'number');
-            if (gotWidth) {
-                ++got;
-                width -= frameInfo.width + padding.width;
-                if (overflowAdjust) {
-                    width -= overflowAdjust.width;
-                }
-            }
-        }
-
-        if (!ownerContext.heightModel.shrinkWrap) {
-            ++needed;
-            height = inDom ? targetContext.getDomProp('height') : targetContext.getProp('height');
-            gotHeight = (typeof height == 'number');
-            if (gotHeight) {
-                ++got;
-                height -= frameInfo.height + padding.height;
-                if (overflowAdjust) {
-                    height -= overflowAdjust.height;
-                }
-            }
-        }
-
-        return {
-            width: width,
-            height: height,
-            needed: needed,
-            got: got,
-            gotAll: got == needed,
-            gotWidth: gotWidth,
-            gotHeight: gotHeight
-        };
-    },
-
-    /**
-     * Returns an array of child components either for a render phase (Performed in the beforeLayout
-     * method of the layout's base class), or the layout phase (onLayout).
-     * @return {Ext.Component[]} of child components
-     */
-    getLayoutItems: function() {
-        var owner = this.owner,
-            items = owner && owner.items;
-
-        return (items && items.items) || [];
-    },
-
-    getRenderData: function () {
-        var comp = this.owner;
-
-        return {
-            $comp: comp,
-            $layout: this,
-            ownerId: comp.id
-        };
-    },
-
-    /**
-     * @protected
-     * Returns all items that are rendered
-     * @return {Array} All matching items
-     */
-    getRenderedItems: function() {
-        var me = this,
-            target = me.getRenderTarget(),
-            items = me.getLayoutItems(),
-            ln = items.length,
-            renderedItems = [],
-            i, item;
-
-        for (i = 0; i < ln; i++) {
-            item = items[i];
-            if (item.rendered && me.isValidParent(item, target, i)) {
-                renderedItems.push(item);
-            }
-        }
-
-        return renderedItems;
-    },
-
-    /**
-     * Returns the element into which rendering must take place. Defaults to the owner Container's
-     * target element.
-     *
-     * May be overridden in layout managers which implement an inner element.
-     *
-     * @return {Ext.Element}
-     */
-    getRenderTarget: function() {
-        return this.owner.getTargetEl();
-    },
-
-    /**
-     * Returns the element into which extra functional DOM elements can be inserted. Defaults to the owner Component's encapsulating element.
-     *
-     * May be overridden in Component layout managers which implement a {@link #getRenderTarget component render target} which must only
-     * contain child components.
-     * @return {Ext.Element}
-     */
-    getElementTarget: function() {
-        return this.getRenderTarget();
-    },
-
-    getRenderTpl: function () {
-        var me = this,
-            renderTpl = Ext.XTemplate.getTpl(this, 'renderTpl');
-
-        // Make sure all standard callout methods for the owner component are placed on the
-        // XTemplate instance (but only once please):
-        if (!renderTpl.renderContent) {
-            me.owner.setupRenderTpl(renderTpl);
-        }
-
-        return renderTpl;
-    },
-
-    getRenderTree: function () {
-        var result,
-            items = this.owner.items,
-            itemsGen,
-            renderCfgs = {};
-        
-        do {
-            itemsGen = items.generation;
-            result = this.getItemsRenderTree(this.getLayoutItems(), renderCfgs);
-        } while (items.generation !== itemsGen);
-        return result;
-    },
-
-    getScrollbarsNeeded: function (width, height, contentWidth, contentHeight) {
-        var scrollbarSize = Ext.getScrollbarSize(),
-            hasWidth = typeof width == 'number',
-            hasHeight = typeof height == 'number',
-            needHorz = 0,
-            needVert = 0;
-
-        // No space-consuming scrollbars.
-        if (!scrollbarSize.width) {
-            return 0;
-        }
-        if (hasHeight && height < contentHeight) {
-            needVert = 2;
-            width -= scrollbarSize.width;
-        }
-
-        if (hasWidth && width < contentWidth) {
-            needHorz = 1;
-            if (!needVert && hasHeight) {
-                height -= scrollbarSize.height;
-                if (height < contentHeight) {
-                    needVert = 2;
-                }
-            }
-        }
-
-        return needVert + needHorz;
-    },
-
-    /**
-     * Returns flags indicating cross-browser handling of scrollHeight/Width. In particular,
-     * IE has issues with padding-bottom in a scrolling element (it does not include that
-     * padding in the scrollHeight). Also, margin-bottom on a child in a scrolling element
-     * can be lost.
-     * 
-     * All browsers seem to ignore margin-right on children and padding-right on the parent
-     * element (the one with the overflow)
-     * 
-     * This method returns a number with the follow bit positions set based on things not
-     * accounted for in scrollHeight and scrollWidth:
-     *
-     *  - 1: Scrolling element's padding-bottom is not included in scrollHeight.
-     *  - 2: Last child's margin-bottom is not included in scrollHeight.
-     *  - 4: Scrolling element's padding-right is not included in scrollWidth.
-     *  - 8: Child's margin-right is not included in scrollWidth.
-     *
-     * To work around the margin-bottom issue, it is sufficient to create a 0px tall last
-     * child that will "hide" the margin. This can also be handled by wrapping the children
-     * in an element, again "hiding" the margin. Wrapping the elements is about the only
-     * way to preserve their right margins. This is the strategy used by Column layout.
-     *
-     * To work around the padding-bottom problem, since it is comes from a style on the
-     * parent element, about the only simple fix is to create a last child with height
-     * equal to padding-bottom. To preserve the right padding, the sizing element needs to
-     * have a width that includes the right padding.
-     */
-    getScrollRangeFlags: (function () {
-        var flags = -1;
-
-        return function () {
-            if (flags < 0) {
-                var div = Ext.getBody().createChild({
-                        //cls: 'x-border-box x-hide-offsets',
-                        cls: Ext.baseCSSPrefix + 'border-box',
-                        style: {
-                            width: '100px', height: '100px', padding: '10px',
-                            overflow: 'auto'
-                        },
-                        children: [{
-                            style: {
-                                border: '1px solid red',
-                                width: '150px', height: '150px',
-                                margin: '0 5px 5px 0' // TRBL
-                            }
-                        }]
-                    }),
-                    scrollHeight = div.dom.scrollHeight,
-                    scrollWidth = div.dom.scrollWidth,
-                    heightFlags = {
-                        // right answer, nothing missing:
-                        175: 0,
-                        // missing parent padding-bottom:
-                        165: 1,
-                        // missing child margin-bottom:
-                        170: 2,
-                        // missing both
-                        160: 3
-                    },
-                    widthFlags = {
-                        // right answer, nothing missing:
-                        175: 0,
-                        // missing parent padding-right:
-                        165: 4,
-                        // missing child margin-right:
-                        170: 8,
-                        // missing both
-                        160: 12
-                    };
-
-                flags = (heightFlags[scrollHeight] || 0) | (widthFlags[scrollWidth] || 0);
-                //Ext.log('flags=',flags.toString(2));
-                div.remove();
-            }
-
-            return flags;
-        };
-    }()),
-
-    /**
-     * Returns the owner component's resize element.
-     * @return {Ext.Element}
-     */
-    getTarget: function() {
-        return this.owner.getTargetEl();
-    },
-
-    /**
-     * @protected
-     * Returns all items that are both rendered and visible
-     * @return {Array} All matching items
-     */
-    getVisibleItems: function() {
-        var target   = this.getRenderTarget(),
-            items = this.getLayoutItems(),
-            ln = items.length,
-            visibleItems = [],
-            i, item;
-
-        for (i = 0; i < ln; i++) {
-            item = items[i];
-            if (item.rendered && this.isValidParent(item, target, i) && item.hidden !== true) {
-                visibleItems.push(item);
-            }
-        }
-
-        return visibleItems;
-    },
-
-    setupRenderTpl: function (renderTpl) {
-        var me = this;
-
-        renderTpl.renderBody = me.doRenderBody;
-        renderTpl.renderContainer = me.doRenderContainer;
-        renderTpl.renderItems = me.doRenderItems;
-        renderTpl.renderPadder = me.doRenderPadder;
-    }
-});