Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / docs / source / BoxLayout.html
index b9142d0..e23536c 100644 (file)
 <html>
 <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
   <title>The source code</title>
     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
 </head>
 <body  onload="prettyPrint();">
     <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-<div id="cls-Ext.layout.BoxLayout"></div>/**\r
- * @class Ext.layout.BoxLayout\r
- * @extends Ext.layout.ContainerLayout\r
- * <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>\r
- */\r
-Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {\r
-    <div id="cfg-Ext.layout.BoxLayout-defaultMargins"></div>/**\r
-     * @cfg {Object} defaultMargins\r
-     * <p>If the individual contained items do not have a <tt>margins</tt>\r
-     * property specified, the default margins from this property will be\r
-     * applied to each item.</p>\r
-     * <br><p>This property may be specified as an object containing margins\r
-     * to apply in the format:</p><pre><code>\r
-{\r
-    top: (top margin),\r
-    right: (right margin),\r
-    bottom: (bottom margin),\r
-    left: (left margin)\r
-}</code></pre>\r
-     * <p>This property may also be specified as a string containing\r
-     * space-separated, numeric margin values. The order of the sides associated\r
-     * with each value matches the way CSS processes margin values:</p>\r
-     * <div class="mdetail-params"><ul>\r
-     * <li>If there is only one value, it applies to all sides.</li>\r
-     * <li>If there are two values, the top and bottom borders are set to the\r
-     * first value and the right and left are set to the second.</li>\r
-     * <li>If there are three values, the top is set to the first value, the left\r
-     * and right are set to the second, and the bottom is set to the third.</li>\r
-     * <li>If there are four values, they apply to the top, right, bottom, and\r
-     * left, respectively.</li>\r
-     * </ul></div>\r
-     * <p>Defaults to:</p><pre><code>\r
-     * {top:0, right:0, bottom:0, left:0}\r
-     * </code></pre>\r
-     */\r
-    defaultMargins : {left:0,top:0,right:0,bottom:0},\r
-    <div id="cfg-Ext.layout.BoxLayout-padding"></div>/**\r
-     * @cfg {String} padding\r
-     * <p>Sets the padding to be applied to all child items managed by this layout.</p> \r
-     * <p>This property must be specified as a string containing\r
-     * space-separated, numeric padding values. The order of the sides associated\r
-     * with each value matches the way CSS processes padding values:</p>\r
-     * <div class="mdetail-params"><ul>\r
-     * <li>If there is only one value, it applies to all sides.</li>\r
-     * <li>If there are two values, the top and bottom borders are set to the\r
-     * first value and the right and left are set to the second.</li>\r
-     * <li>If there are three values, the top is set to the first value, the left\r
-     * and right are set to the second, and the bottom is set to the third.</li>\r
-     * <li>If there are four values, they apply to the top, right, bottom, and\r
-     * left, respectively.</li>\r
-     * </ul></div>\r
-     * <p>Defaults to: <code>"0"</code></p>\r
-     */\r
-    padding : '0',\r
-    // documented in subclasses\r
-    pack : 'start',\r
-\r
-    // private\r
-    monitorResize : true,\r
-    scrollOffset : 0,\r
-    extraCls : 'x-box-item',\r
-    ctCls : 'x-box-layout-ct',\r
-    innerCls : 'x-box-inner',\r
-    \r
-    constructor : function(config){\r
-        Ext.layout.BoxLayout.superclass.constructor.call(this, config);\r
-        if(Ext.isString(this.defaultMargins)){\r
-            this.defaultMargins = this.parseMargins(this.defaultMargins);\r
-        }\r
-    },\r
-\r
-    // private\r
-    isValidParent : function(c, target){\r
-        return c.getEl().dom.parentNode == this.innerCt.dom;\r
-    },\r
-\r
-    // private\r
-    onLayout : function(ct, target){\r
-        var cs = ct.items.items, len = cs.length, c, i, last = len-1, cm;\r
-\r
-        if(!this.innerCt){\r
-            target.addClass(this.ctCls);\r
-\r
-            // the innerCt prevents wrapping and shuffling while\r
-            // the container is resizing\r
-            this.innerCt = target.createChild({cls:this.innerCls});\r
-            this.padding = this.parseMargins(this.padding); \r
-        }\r
-        this.renderAll(ct, this.innerCt);\r
-    },\r
-\r
-    // private\r
-    renderItem : function(c){\r
-        if(Ext.isString(c.margins)){\r
-            c.margins = this.parseMargins(c.margins);\r
-        }else if(!c.margins){\r
-            c.margins = this.defaultMargins;\r
-        }\r
-        Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);\r
-    },\r
-\r
-    getTargetSize : function(target){
-        return (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getStyleSize() : target.getViewSize();\r
-    },\r
-    \r
-    getItems: function(ct){\r
-        var items = [];\r
-        ct.items.each(function(c){\r
-            if(c.isVisible()){\r
-                items.push(c);\r
-            }\r
-        });\r
-        return items;\r
-    }\r
-\r
-    <div id="prop-Ext.layout.BoxLayout-activeItem"></div>/**\r
-     * @property activeItem\r
-     * @hide\r
-     */\r
-});\r
-\r
-<div id="cls-Ext.layout.VBoxLayout"></div>/**\r
- * @class Ext.layout.VBoxLayout\r
- * @extends Ext.layout.BoxLayout\r
- * <p>A layout that arranges items vertically down a Container. This layout optionally divides available vertical\r
- * space between child items containing a numeric <code>flex</code> configuration.</p>\r
- * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.\r
- */\r
-Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {\r
-    <div id="cfg-Ext.layout.VBoxLayout-align"></div>/**\r
-     * @cfg {String} align\r
-     * Controls how the child items of the container are aligned. Acceptable configuration values for this\r
-     * property are:\r
-     * <div class="mdetail-params"><ul>\r
-     * <li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally\r
-     * at the <b>left</b> side of the container</div></li>\r
-     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the\r
-     * <b>mid-width</b> of the container</div></li>\r
-     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill\r
-     * the width of the container</div></li>\r
-     * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched horizontally to\r
-     * the size of the largest item.</div></li>\r
-     * </ul></div>\r
-     */\r
-    align : 'left', // left, center, stretch, strechmax\r
-    <div id="cfg-Ext.layout.VBoxLayout-pack"></div>/**\r
-     * @cfg {String} pack\r
-     * Controls how the child items of the container are packed together. Acceptable configuration values\r
-     * for this property are:\r
-     * <div class="mdetail-params"><ul>\r
-     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at\r
-     * <b>top</b> side of container</div></li>\r
-     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at\r
-     * <b>mid-height</b> of container</div></li>\r
-     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>bottom</b>\r
-     * side of container</div></li>\r
-     * </ul></div>\r
-     */\r
-    <div id="cfg-Ext.layout.VBoxLayout-flex"></div>/**\r
-     * @cfg {Number} flex\r
-     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed\r
-     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>vertically</b>\r
-     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with\r
-     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or\r
-     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).\r
-     */\r
-\r
-    // private\r
-    onLayout : function(ct, target){\r
-        Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target);\r
-                    \r
-        \r
-        var cs = this.getItems(ct), cm, ch, margin,\r
-            size = this.getTargetSize(target),\r
-            w = size.width - target.getPadding('lr'),\r
-            h = size.height - target.getPadding('tb') - this.scrollOffset,\r
-            l = this.padding.left, t = this.padding.top,\r
-            isStart = this.pack == 'start',\r
-            isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,\r
-            stretchWidth = w - (this.padding.left + this.padding.right),\r
-            extraHeight = 0,\r
-            maxWidth = 0,\r
-            totalFlex = 0,\r
-            flexHeight = 0,\r
-            usedHeight = 0;\r
-            \r
-        Ext.each(cs, function(c){\r
-            cm = c.margins;\r
-            totalFlex += c.flex || 0;\r
-            ch = c.getHeight();\r
-            margin = cm.top + cm.bottom;\r
-            extraHeight += ch + margin;\r
-            flexHeight += margin + (c.flex ? 0 : ch);\r
-            maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right);\r
-        });\r
-        extraHeight = h - extraHeight - this.padding.top - this.padding.bottom;\r
-        \r
-        var innerCtWidth = maxWidth + this.padding.left + this.padding.right;\r
-        switch(this.align){\r
-            case 'stretch':\r
-                this.innerCt.setSize(w, h);\r
-                break;\r
-            case 'stretchmax':\r
-            case 'left':\r
-                this.innerCt.setSize(innerCtWidth, h);\r
-                break;\r
-            case 'center':\r
-                this.innerCt.setSize(w = Math.max(w, innerCtWidth), h);\r
-                break;\r
-        }\r
-\r
-        var availHeight = Math.max(0, h - this.padding.top - this.padding.bottom - flexHeight),\r
-            leftOver = availHeight,\r
-            heights = [],\r
-            restore = [],\r
-            idx = 0,\r
-            availableWidth = Math.max(0, w - this.padding.left - this.padding.right);\r
-            \r
-\r
-        Ext.each(cs, function(c){\r
-            if(isStart && c.flex){\r
-                ch = Math.floor(availHeight * (c.flex / totalFlex));\r
-                leftOver -= ch;\r
-                heights.push(ch);\r
-            }\r
-        }); \r
-        \r
-        if(this.pack == 'center'){\r
-            t += extraHeight ? extraHeight / 2 : 0;\r
-        }else if(this.pack == 'end'){\r
-            t += extraHeight;\r
-        }\r
-        Ext.each(cs, function(c){\r
-            cm = c.margins;\r
-            t += cm.top;\r
-            c.setPosition(l + cm.left, t);\r
-            if(isStart && c.flex){\r
-                ch = Math.max(0, heights[idx++] + (leftOver-- > 0 ? 1 : 0));\r
-                if(isRestore){\r
-                    restore.push(c.getWidth());\r
-                }\r
-                c.setSize(availableWidth, ch);\r
-            }else{\r
-                ch = c.getHeight();\r
-            }\r
-            t += ch + cm.bottom;\r
-        });\r
-        \r
-        idx = 0;\r
-        Ext.each(cs, function(c){\r
-            cm = c.margins;\r
-            if(this.align == 'stretch'){\r
-                c.setWidth((stretchWidth - (cm.left + cm.right)).constrain(\r
-                    c.minWidth || 0, c.maxWidth || 1000000));\r
-            }else if(this.align == 'stretchmax'){\r
-                c.setWidth((maxWidth - (cm.left + cm.right)).constrain(\r
-                    c.minWidth || 0, c.maxWidth || 1000000));\r
-            }else{\r
-                if(this.align == 'center'){\r
-                    var diff = availableWidth - (c.getWidth() + cm.left + cm.right);\r
-                    if(diff > 0){\r
-                        c.setPosition(l + cm.left + (diff/2), c.y);\r
-                    }\r
-                }\r
-                if(isStart && c.flex){\r
-                    c.setWidth(restore[idx++]);\r
-                }\r
-            }\r
-        }, this);\r
-    }\r
-    <div id="prop-Ext.layout.VBoxLayout-activeItem"></div>/**\r
-     * @property activeItem\r
-     * @hide\r
-     */\r
-});\r
-\r
-Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout;\r
-\r
-<div id="cls-Ext.layout.HBoxLayout"></div>/**\r
- * @class Ext.layout.HBoxLayout\r
- * @extends Ext.layout.BoxLayout\r
- * <p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal\r
- * space between child items containing a numeric <code>flex</code> configuration.</p>\r
- * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.\r
- */\r
-Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {\r
-    <div id="cfg-Ext.layout.HBoxLayout-align"></div>/**\r
-     * @cfg {String} align\r
-     * Controls how the child items of the container are aligned. Acceptable configuration values for this\r
-     * property are:\r
-     * <div class="mdetail-params"><ul>\r
-     * <li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically\r
-     * at the <b>left</b> side of the container</div></li>\r
-     * <li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically at the\r
-     * <b>mid-height</b> of the container</div></li>\r
-     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill\r
-     * the height of the container</div></li>\r
-     * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to\r
-     * the size of the largest item.</div></li>\r
-     */\r
-    align : 'top', // top, middle, stretch, strechmax\r
-    <div id="cfg-Ext.layout.HBoxLayout-pack"></div>/**\r
-     * @cfg {String} pack\r
-     * Controls how the child items of the container are packed together. Acceptable configuration values\r
-     * for this property are:\r
-     * <div class="mdetail-params"><ul>\r
-     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at\r
-     * <b>left</b> side of container</div></li>\r
-     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at\r
-     * <b>mid-width</b> of container</div></li>\r
-     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b>\r
-     * side of container</div></li>\r
-     * </ul></div>\r
-     */\r
-    <div id="cfg-Ext.layout.HBoxLayout-flex"></div>/**\r
-     * @cfg {Number} flex\r
-     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed\r
-     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>\r
-     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with\r
-     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or\r
-     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).\r
-     */\r
-\r
-    // private\r
-    onLayout : function(ct, target){\r
-        Ext.layout.HBoxLayout.superclass.onLayout.call(this, ct, target);\r
-        \r
-        var cs = this.getItems(ct), cm, cw, margin,\r
-            size = this.getTargetSize(target),\r
-            w = size.width - target.getPadding('lr') - this.scrollOffset,\r
-            h = size.height - target.getPadding('tb'),\r
-            l = this.padding.left, t = this.padding.top,\r
-            isStart = this.pack == 'start',\r
-            isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,\r
-            stretchHeight = h - (this.padding.top + this.padding.bottom),\r
-            extraWidth = 0,\r
-            maxHeight = 0,\r
-            totalFlex = 0,\r
-            flexWidth = 0,\r
-            usedWidth = 0;\r
-        \r
-        Ext.each(cs, function(c){\r
-            cm = c.margins;\r
-            totalFlex += c.flex || 0;\r
-            cw = c.getWidth();\r
-            margin = cm.left + cm.right;\r
-            extraWidth += cw + margin;\r
-            flexWidth += margin + (c.flex ? 0 : cw);\r
-            maxHeight = Math.max(maxHeight, c.getHeight() + cm.top + cm.bottom);\r
-        });\r
-        extraWidth = w - extraWidth - this.padding.left - this.padding.right;\r
-        \r
-        var innerCtHeight = maxHeight + this.padding.top + this.padding.bottom;\r
-        switch(this.align){\r
-            case 'stretch':\r
-                this.innerCt.setSize(w, h);\r
-                break;\r
-            case 'stretchmax':\r
-            case 'top':\r
-                this.innerCt.setSize(w, innerCtHeight);\r
-                break;\r
-            case 'middle':\r
-                this.innerCt.setSize(w, h = Math.max(h, innerCtHeight));\r
-                break;\r
-        }\r
-        \r
-\r
-        var availWidth = Math.max(0, w - this.padding.left - this.padding.right - flexWidth),\r
-            leftOver = availWidth,\r
-            widths = [],\r
-            restore = [],\r
-            idx = 0,\r
-            availableHeight = Math.max(0, h - this.padding.top - this.padding.bottom);\r
-            \r
-\r
-        Ext.each(cs, function(c){\r
-            if(isStart && c.flex){\r
-                cw = Math.floor(availWidth * (c.flex / totalFlex));\r
-                leftOver -= cw;\r
-                widths.push(cw);\r
-            }\r
-        }); \r
-        \r
-        if(this.pack == 'center'){\r
-            l += extraWidth ? extraWidth / 2 : 0;\r
-        }else if(this.pack == 'end'){\r
-            l += extraWidth;\r
-        }\r
-        Ext.each(cs, function(c){\r
-            cm = c.margins;\r
-            l += cm.left;\r
-            c.setPosition(l, t + cm.top);\r
-            if(isStart && c.flex){\r
-                cw = Math.max(0, widths[idx++] + (leftOver-- > 0 ? 1 : 0));\r
-                if(isRestore){\r
-                    restore.push(c.getHeight());\r
-                }\r
-                c.setSize(cw, availableHeight);\r
-            }else{\r
-                cw = c.getWidth();\r
-            }\r
-            l += cw + cm.right;\r
-        });\r
-        \r
-        idx = 0;\r
-        Ext.each(cs, function(c){\r
-            var cm = c.margins;\r
-            if(this.align == 'stretch'){\r
-                c.setHeight((stretchHeight - (cm.top + cm.bottom)).constrain(\r
-                    c.minHeight || 0, c.maxHeight || 1000000));\r
-            }else if(this.align == 'stretchmax'){\r
-                c.setHeight((maxHeight - (cm.top + cm.bottom)).constrain(\r
-                    c.minHeight || 0, c.maxHeight || 1000000));\r
-            }else{\r
-                if(this.align == 'middle'){\r
-                    var diff = availableHeight - (c.getHeight() + cm.top + cm.bottom);\r
-                    if(diff > 0){\r
-                        c.setPosition(c.x, t + cm.top + (diff/2));\r
-                    }\r
-                }\r
-                if(isStart && c.flex){\r
-                    c.setHeight(restore[idx++]);\r
-                }\r
-            }\r
-        }, this);\r
-    }\r
-\r
-    <div id="prop-Ext.layout.HBoxLayout-activeItem"></div>/**\r
-     * @property activeItem\r
-     * @hide\r
-     */\r
-});\r
-\r
+<div id="cls-Ext.layout.BoxLayout"></div>/**
+ * @class Ext.layout.BoxLayout
+ * @extends Ext.layout.ContainerLayout
+ * <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>
+ */
+Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
+    <div id="cfg-Ext.layout.BoxLayout-defaultMargins"></div>/**
+     * @cfg {Object} defaultMargins
+     * <p>If the individual contained items do not have a <tt>margins</tt>
+     * property specified, the default margins from this property will be
+     * applied to each item.</p>
+     * <br><p>This property may be specified as an object containing margins
+     * to apply in the format:</p><pre><code>
+{
+    top: (top margin),
+    right: (right margin),
+    bottom: (bottom margin),
+    left: (left margin)
+}</code></pre>
+     * <p>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:</p>
+     * <div class="mdetail-params"><ul>
+     * <li>If there is only one value, it applies to all sides.</li>
+     * <li>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.</li>
+     * <li>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.</li>
+     * <li>If there are four values, they apply to the top, right, bottom, and
+     * left, respectively.</li>
+     * </ul></div>
+     * <p>Defaults to:</p><pre><code>
+     * {top:0, right:0, bottom:0, left:0}
+     * </code></pre>
+     */
+    defaultMargins : {left:0,top:0,right:0,bottom:0},
+    <div id="cfg-Ext.layout.BoxLayout-padding"></div>/**
+     * @cfg {String} padding
+     * <p>Sets the padding to be applied to all child items managed by this layout.</p>
+     * <p>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:</p>
+     * <div class="mdetail-params"><ul>
+     * <li>If there is only one value, it applies to all sides.</li>
+     * <li>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.</li>
+     * <li>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.</li>
+     * <li>If there are four values, they apply to the top, right, bottom, and
+     * left, respectively.</li>
+     * </ul></div>
+     * <p>Defaults to: <code>"0"</code></p>
+     */
+    padding : '0',
+    // documented in subclasses
+    pack : 'start',
+
+    // private
+    monitorResize : true,
+    type: 'box',
+    scrollOffset : 0,
+    extraCls : 'x-box-item',
+    targetCls : 'x-box-layout-ct',
+    innerCls : 'x-box-inner',
+
+    constructor : function(config){
+        Ext.layout.BoxLayout.superclass.constructor.call(this, config);
+
+        if (Ext.isString(this.defaultMargins)) {
+            this.defaultMargins = this.parseMargins(this.defaultMargins);
+        }
+    },
+
+    /**
+     * @private
+     * Runs the child box calculations and caches them in childBoxCache. Subclasses can used these cached values
+     * when laying out
+     */
+    onLayout: function(container, target) {
+        Ext.layout.BoxLayout.superclass.onLayout.call(this, container, target);
+
+        var items = this.getVisibleItems(container),
+            tSize = this.getLayoutTargetSize();
+
+        /**
+         * @private
+         * @property layoutTargetLastSize
+         * @type Object
+         * Private cache of the last measured size of the layout target. This should never be used except by
+         * BoxLayout subclasses during their onLayout run.
+         */
+        this.layoutTargetLastSize = tSize;
+
+        /**
+         * @private
+         * @property childBoxCache
+         * @type Array
+         * Array of the last calculated height, width, top and left positions of each visible rendered component
+         * within the Box layout.
+         */
+        this.childBoxCache = this.calculateChildBoxes(items, tSize);
+
+        this.updateInnerCtSize(tSize, this.childBoxCache);
+        this.updateChildBoxes(this.childBoxCache.boxes);
+
+        // Putting a box layout into an overflowed container is NOT correct and will make a second layout pass necessary.
+        this.handleTargetOverflow(tSize, container, target);
+    },
+
+    <div id="method-Ext.layout.BoxLayout-updateChildBoxes"></div>/**
+     * Resizes and repositions each child component
+     * @param {Array} boxes The box measurements
+     */
+    updateChildBoxes: function(boxes) {
+        for (var i = 0, length = boxes.length; i < length; i++) {
+            var box  = boxes[i],
+                comp = box.component;
+
+            if (box.dirtySize) {
+                comp.setSize(box.width, box.height);
+            }
+            // Don't set positions to NaN
+            if (isNaN(box.left) || isNaN(box.top)) {
+                continue;
+            }
+            comp.setPosition(box.left, box.top);
+        }
+    },
+
+    /**
+     * @private
+     * Called by onRender just before the child components are sized and positioned. This resizes the innerCt
+     * to make sure all child items fit within it. We call this before sizing the children because if our child
+     * items are larger than the previous innerCt size the browser will insert scrollbars and then remove them
+     * again immediately afterwards, giving a performance hit.
+     * Subclasses should provide an implementation.
+     * @param {Object} currentSize The current height and width of the innerCt
+     * @param {Array} calculations The new box calculations of all items to be laid out
+     */
+    updateInnerCtSize: Ext.emptyFn,
+
+    /**
+     * @private
+     * This should be called after onLayout of any BoxLayout subclass. If the target's overflow is not set to 'hidden',
+     * we need to lay out a second time because the scrollbars may have modified the height and width of the layout
+     * target. Having a Box layout inside such a target is therefore not recommended.
+     * @param {Object} previousTargetSize The size and height of the layout target before we just laid out
+     * @param {Ext.Container} container The container
+     * @param {Ext.Element} target The target element
+     */
+    handleTargetOverflow: function(previousTargetSize, container, target) {
+        var overflow = target.getStyle('overflow');
+
+        if (overflow && overflow != 'hidden' &&!this.adjustmentPass) {
+            var newTargetSize = this.getLayoutTargetSize();
+            if (newTargetSize.width != previousTargetSize.width || newTargetSize.height != previousTargetSize.height){
+                this.adjustmentPass = true;
+                this.onLayout(container, target);
+            }
+        }
+
+        delete this.adjustmentPass;
+    },
+
+    // private
+    isValidParent : function(c, target){
+        return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
+    },
+
+    /**
+     * @private
+     * Returns all items that are both rendered and visible
+     * @return {Array} All matching items
+     */
+    getVisibleItems: function(ct) {
+        var ct  = ct || this.container,
+            t   = ct.getLayoutTarget(),
+            cti = ct.items.items,
+            len = cti.length,
+
+            i, c, items = [];
+
+        for (i = 0; i < len; i++) {
+            if((c = cti[i]).rendered && this.isValidParent(c, t) && c.hidden !== true  && c.collapsed !== true){
+                items.push(c);
+            }
+        }
+
+        return items;
+    },
+
+    // private
+    renderAll : function(ct, target){
+        if(!this.innerCt){
+            // the innerCt prevents wrapping and shuffling while
+            // the container is resizing
+            this.innerCt = target.createChild({cls:this.innerCls});
+            this.padding = this.parseMargins(this.padding);
+        }
+        Ext.layout.BoxLayout.superclass.renderAll.call(this, ct, this.innerCt);
+    },
+
+    getLayoutTargetSize : function(){
+        var target = this.container.getLayoutTarget(), ret;
+        if (target) {
+            ret = target.getViewSize();
+
+            // IE in strict mode will return a width of 0 on the 1st pass of getViewSize.
+            // Use getStyleSize to verify the 0 width, the adjustment pass will then work properly
+            // with getViewSize
+            if (Ext.isIE && Ext.isStrict && ret.width == 0){
+                ret =  target.getStyleSize();
+            }
+
+            ret.width -= target.getPadding('lr');
+            ret.height -= target.getPadding('tb');
+        }
+        return ret;
+    },
+
+    // private
+    renderItem : function(c){
+        if(Ext.isString(c.margins)){
+            c.margins = this.parseMargins(c.margins);
+        }else if(!c.margins){
+            c.margins = this.defaultMargins;
+        }
+        Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);
+    }
+});
+
+<div id="cls-Ext.layout.VBoxLayout"></div>/**
+ * @class Ext.layout.VBoxLayout
+ * @extends Ext.layout.BoxLayout
+ * <p>A layout that arranges items vertically down a Container. This layout optionally divides available vertical
+ * space between child items containing a numeric <code>flex</code> configuration.</p>
+ * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.
+ */
+Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
+    <div id="cfg-Ext.layout.VBoxLayout-align"></div>/**
+     * @cfg {String} align
+     * Controls how the child items of the container are aligned. Acceptable configuration values for this
+     * property are:
+     * <div class="mdetail-params"><ul>
+     * <li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally
+     * at the <b>left</b> side of the container</div></li>
+     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the
+     * <b>mid-width</b> of the container</div></li>
+     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill
+     * the width of the container</div></li>
+     * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched horizontally to
+     * the size of the largest item.</div></li>
+     * </ul></div>
+     */
+    align : 'left', // left, center, stretch, strechmax
+    type: 'vbox',
+
+    <div id="cfg-Ext.layout.VBoxLayout-pack"></div>/**
+     * @cfg {String} pack
+     * Controls how the child items of the container are packed together. Acceptable configuration values
+     * for this property are:
+     * <div class="mdetail-params"><ul>
+     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
+     * <b>top</b> side of container</div></li>
+     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
+     * <b>mid-height</b> of container</div></li>
+     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>bottom</b>
+     * side of container</div></li>
+     * </ul></div>
+     */
+
+    <div id="cfg-Ext.layout.VBoxLayout-flex"></div>/**
+     * @cfg {Number} flex
+     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
+     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>vertically</b>
+     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
+     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
+     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
+     */
+
+    /**
+     * @private
+     * See parent documentation
+     */
+    updateInnerCtSize: function(tSize, calcs) {
+        var innerCtHeight = tSize.height,
+            innerCtWidth  = calcs.meta.maxWidth + this.padding.left + this.padding.right;
+
+        if (this.align == 'stretch') {
+            innerCtWidth = tSize.width;
+        } else if (this.align == 'center') {
+            innerCtWidth = Math.max(tSize.width, innerCtWidth);
+        }
+
+        //we set the innerCt size first because if our child items are larger than the previous innerCt size
+        //the browser will insert scrollbars and then remove them again immediately afterwards
+        this.innerCt.setSize(innerCtWidth || undefined, innerCtHeight || undefined);
+    },
+
+    /**
+     * @private
+     * Calculates the size and positioning of each item in the VBox. This iterates over all of the rendered,
+     * visible items and returns a height, width, top and left for each, as well as a reference to each. Also
+     * returns meta data such as maxHeight which are useful when resizing layout wrappers such as this.innerCt.
+     * @param {Array} visibleItems The array of all rendered, visible items to be calculated for
+     * @param {Object} targetSize Object containing target size and height
+     * @return {Object} Object containing box measurements for each child, plus meta data
+     */
+    calculateChildBoxes: function(visibleItems, targetSize) {
+        var visibleCount = visibleItems.length,
+
+            padding      = this.padding,
+            topOffset    = padding.top,
+            leftOffset   = padding.left,
+            paddingVert  = topOffset  + padding.bottom,
+            paddingHoriz = leftOffset + padding.right,
+
+            width        = targetSize.width - this.scrollOffset,
+            height       = targetSize.height,
+            availWidth   = Math.max(0, width - paddingHoriz),
+
+            isStart      = this.pack == 'start',
+            isCenter     = this.pack == 'center',
+            isEnd        = this.pack == 'end',
+
+            nonFlexHeight= 0,
+            maxWidth     = 0,
+            totalFlex    = 0,
+
+            //used to cache the calculated size and position values for each child item
+            boxes        = [],
+
+            //used in the for loops below, just declared here for brevity
+            child, childWidth, childHeight, childSize, childMargins, canLayout, i, calcs, flexedHeight, horizMargins, stretchWidth;
+
+            //gather the total flex of all flexed items and the width taken up by fixed width items
+            for (i = 0; i < visibleCount; i++) {
+                child = visibleItems[i];
+                childHeight = child.height;
+                childWidth  = child.width;
+                canLayout   = !child.hasLayout && Ext.isFunction(child.doLayout);
+
+
+                // Static height (numeric) requires no calcs
+                if (!Ext.isNumber(childHeight)) {
+
+                    // flex and not 'auto' height
+                    if (child.flex && !childHeight) {
+                        totalFlex += child.flex;
+
+                    // Not flexed or 'auto' height or undefined height
+                    } else {
+                        //Render and layout sub-containers without a flex or width defined, as otherwise we
+                        //don't know how wide the sub-container should be and cannot calculate flexed widths
+                        if (!childHeight && canLayout) {
+                            child.doLayout();
+                        }
+
+                        childSize = child.getSize();
+                        childWidth = childSize.width;
+                        childHeight = childSize.height;
+                    }
+                }
+
+                childMargins = child.margins;
+
+                nonFlexHeight += (childHeight || 0) + childMargins.top + childMargins.bottom;
+
+                // Max width for align - force layout of non-layed out subcontainers without a numeric width
+                if (!Ext.isNumber(childWidth)) {
+                    if (canLayout) {
+                        child.doLayout();
+                    }
+                    childWidth = child.getWidth();
+                }
+
+                maxWidth = Math.max(maxWidth, childWidth + childMargins.left + childMargins.right);
+
+                //cache the size of each child component
+                boxes.push({
+                    component: child,
+                    height   : childHeight || undefined,
+                    width    : childWidth || undefined
+                });
+            }
+
+            //the height available to the flexed items
+            var availableHeight = Math.max(0, (height - nonFlexHeight - paddingVert));
+
+            if (isCenter) {
+                topOffset += availableHeight / 2;
+            } else if (isEnd) {
+                topOffset += availableHeight;
+            }
+
+            //temporary variables used in the flex height calculations below
+            var remainingHeight = availableHeight,
+                remainingFlex   = totalFlex;
+
+            //calculate the height of each flexed item, and the left + top positions of every item
+            for (i = 0; i < visibleCount; i++) {
+                child = visibleItems[i];
+                calcs = boxes[i];
+
+                childMargins = child.margins;
+                horizMargins = childMargins.left + childMargins.right;
+
+                topOffset   += childMargins.top;
+
+                if (isStart && child.flex && !child.height) {
+                    flexedHeight     = Math.ceil((child.flex / remainingFlex) * remainingHeight);
+                    remainingHeight -= flexedHeight;
+                    remainingFlex   -= child.flex;
+
+                    calcs.height = flexedHeight;
+                    calcs.dirtySize = true;
+                }
+
+                calcs.left = leftOffset + childMargins.left;
+                calcs.top  = topOffset;
+
+                switch (this.align) {
+                    case 'stretch':
+                        stretchWidth = availWidth - horizMargins;
+                        calcs.width  = stretchWidth.constrain(child.minWidth || 0, child.maxWidth || 1000000);
+                        calcs.dirtySize = true;
+                        break;
+                    case 'stretchmax':
+                        stretchWidth = maxWidth - horizMargins;
+                        calcs.width  = stretchWidth.constrain(child.minWidth || 0, child.maxWidth || 1000000);
+                        calcs.dirtySize = true;
+                        break;
+                    case 'center':
+                        var diff = availWidth - calcs.width - horizMargins;
+                        if (diff > 0) {
+                            calcs.left = leftOffset + horizMargins + (diff / 2);
+                        }
+                }
+
+                topOffset += calcs.height + childMargins.bottom;
+            }
+
+        return {
+            boxes: boxes,
+            meta : {
+                maxWidth: maxWidth
+            }
+        };
+    }
+});
+
+Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout;
+
+<div id="cls-Ext.layout.HBoxLayout"></div>/**
+ * @class Ext.layout.HBoxLayout
+ * @extends Ext.layout.BoxLayout
+ * <p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
+ * space between child items containing a numeric <code>flex</code> configuration.</p>
+ * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.
+ */
+Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
+    <div id="cfg-Ext.layout.HBoxLayout-align"></div>/**
+     * @cfg {String} align
+     * Controls how the child items of the container are aligned. Acceptable configuration values for this
+     * property are:
+     * <div class="mdetail-params"><ul>
+     * <li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically
+     * at the <b>top</b> of the container</div></li>
+     * <li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically in the
+     * <b>middle</b> of the container</div></li>
+     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill
+     * the height of the container</div></li>
+     * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to
+     * the height of the largest item.</div></li>
+     */
+    align: 'top', // top, middle, stretch, strechmax
+
+    type : 'hbox',
+
+    /**
+     * @private
+     * See parent documentation
+     */
+    updateInnerCtSize: function(tSize, calcs) {
+        var innerCtWidth  = tSize.width,
+            innerCtHeight = calcs.meta.maxHeight + this.padding.top + this.padding.bottom;
+
+        if (this.align == 'stretch') {
+            innerCtHeight = tSize.height;
+        } else if (this.align == 'middle') {
+            innerCtHeight = Math.max(tSize.height, innerCtHeight);
+        }
+
+        this.innerCt.setSize(innerCtWidth || undefined, innerCtHeight || undefined);
+    },
+
+    <div id="cfg-Ext.layout.HBoxLayout-pack"></div>/**
+     * @cfg {String} pack
+     * Controls how the child items of the container are packed together. Acceptable configuration values
+     * for this property are:
+     * <div class="mdetail-params"><ul>
+     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
+     * <b>left</b> side of container</div></li>
+     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
+     * <b>mid-width</b> of container</div></li>
+     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b>
+     * side of container</div></li>
+     * </ul></div>
+     */
+    <div id="cfg-Ext.layout.HBoxLayout-flex"></div>/**
+     * @cfg {Number} flex
+     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
+     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>
+     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
+     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
+     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
+     */
+
+    /**
+     * @private
+     * Calculates the size and positioning of each item in the HBox. This iterates over all of the rendered,
+     * visible items and returns a height, width, top and left for each, as well as a reference to each. Also
+     * returns meta data such as maxHeight which are useful when resizing layout wrappers such as this.innerCt.
+     * @param {Array} visibleItems The array of all rendered, visible items to be calculated for
+     * @param {Object} targetSize Object containing target size and height
+     * @return {Object} Object containing box measurements for each child, plus meta data
+     */
+    calculateChildBoxes: function(visibleItems, targetSize) {
+        var visibleCount = visibleItems.length,
+
+            padding      = this.padding,
+            topOffset    = padding.top,
+            leftOffset   = padding.left,
+            paddingVert  = topOffset  + padding.bottom,
+            paddingHoriz = leftOffset + padding.right,
+
+            width        = targetSize.width - this.scrollOffset,
+            height       = targetSize.height,
+            availHeight  = Math.max(0, height - paddingVert),
+
+            isStart      = this.pack == 'start',
+            isCenter     = this.pack == 'center',
+            isEnd        = this.pack == 'end',
+            // isRestore    = ['stretch', 'stretchmax'].indexOf(this.align) == -1,
+
+            nonFlexWidth = 0,
+            maxHeight    = 0,
+            totalFlex    = 0,
+
+            //used to cache the calculated size and position values for each child item
+            boxes        = [],
+
+            //used in the for loops below, just declared here for brevity
+            child, childWidth, childHeight, childSize, childMargins, canLayout, i, calcs, flexedWidth, vertMargins, stretchHeight;
+
+            //gather the total flex of all flexed items and the width taken up by fixed width items
+            for (i = 0; i < visibleCount; i++) {
+                child       = visibleItems[i];
+                childHeight = child.height;
+                childWidth  = child.width;
+                canLayout   = !child.hasLayout && Ext.isFunction(child.doLayout);
+
+                // Static width (numeric) requires no calcs
+                if (!Ext.isNumber(childWidth)) {
+
+                    // flex and not 'auto' width
+                    if (child.flex && !childWidth) {
+                        totalFlex += child.flex;
+
+                    // Not flexed or 'auto' width or undefined width
+                    } else {
+                        //Render and layout sub-containers without a flex or width defined, as otherwise we
+                        //don't know how wide the sub-container should be and cannot calculate flexed widths
+                        if (!childWidth && canLayout) {
+                            child.doLayout();
+                        }
+
+                        childSize   = child.getSize();
+                        childWidth  = childSize.width;
+                        childHeight = childSize.height;
+                    }
+                }
+
+                childMargins = child.margins;
+
+                nonFlexWidth += (childWidth || 0) + childMargins.left + childMargins.right;
+
+                // Max height for align - force layout of non-layed out subcontainers without a numeric height
+                if (!Ext.isNumber(childHeight)) {
+                    if (canLayout) {
+                        child.doLayout();
+                    }
+                    childHeight = child.getHeight();
+                }
+
+                maxHeight = Math.max(maxHeight, childHeight + childMargins.top + childMargins.bottom);
+
+                //cache the size of each child component
+                boxes.push({
+                    component: child,
+                    height   : childHeight || undefined,
+                    width    : childWidth || undefined
+                });
+            }
+
+            //the width available to the flexed items
+            var availableWidth = Math.max(0, (width - nonFlexWidth - paddingHoriz));
+
+            if (isCenter) {
+                leftOffset += availableWidth / 2;
+            } else if (isEnd) {
+                leftOffset += availableWidth;
+            }
+
+            //temporary variables used in the flex width calculations below
+            var remainingWidth = availableWidth,
+                remainingFlex  = totalFlex;
+
+            //calculate the widths of each flexed item, and the left + top positions of every item
+            for (i = 0; i < visibleCount; i++) {
+                child = visibleItems[i];
+                calcs = boxes[i];
+
+                childMargins = child.margins;
+                vertMargins  = childMargins.top + childMargins.bottom;
+
+                leftOffset  += childMargins.left;
+
+                if (isStart && child.flex && !child.width) {
+                    flexedWidth     = Math.ceil((child.flex / remainingFlex) * remainingWidth);
+                    remainingWidth -= flexedWidth;
+                    remainingFlex  -= child.flex;
+
+                    calcs.width = flexedWidth;
+                    calcs.dirtySize = true;
+                }
+
+                calcs.left = leftOffset;
+                calcs.top  = topOffset + childMargins.top;
+
+                switch (this.align) {
+                    case 'stretch':
+                        stretchHeight = availHeight - vertMargins;
+                        calcs.height  = stretchHeight.constrain(child.minHeight || 0, child.maxHeight || 1000000);
+                        calcs.dirtySize = true;
+                        break;
+                    case 'stretchmax':
+                        stretchHeight = maxHeight - vertMargins;
+                        calcs.height  = stretchHeight.constrain(child.minHeight || 0, child.maxHeight || 1000000);
+                        calcs.dirtySize = true;
+                        break;
+                    case 'middle':
+                        var diff = availHeight - calcs.height - vertMargins;
+                        if (diff > 0) {
+                            calcs.top = topOffset + vertMargins + (diff / 2);
+                        }
+                }
+                leftOffset += calcs.width + childMargins.right;
+            }
+
+        return {
+            boxes: boxes,
+            meta : {
+                maxHeight: maxHeight
+            }
+        };
+    }
+});
+
 Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;
-</pre>
+</pre>    
 </body>
 </html>
\ No newline at end of file