<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
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.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
-Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;
-</pre>
+<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);
+ }
+
+ var handler = this.overflowHandler;
+
+ if (typeof handler == 'string') {
+ handler = {
+ type: handler
+ };
+ }
+
+ var handlerType = 'none';
+ if (handler && handler.type != undefined) {
+ handlerType = handler.type;
+ }
+
+ var constructor = Ext.layout.boxOverflow[handlerType];
+ if (constructor[this.type]) {
+ constructor = constructor[this.type];
+ }
+
+ this.overflowHandler = new constructor(this, handler);
+ },
+
+ /**
+ * @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 tSize = this.getLayoutTargetSize(),
+ items = this.getVisibleItems(container),
+ calcs = this.calculateChildBoxes(items, tSize),
+ boxes = calcs.boxes,
+ meta = calcs.meta;
+
+ //invoke the overflow handler, if one is configured
+ if (tSize.width > 0) {
+ var handler = this.overflowHandler,
+ method = meta.tooNarrow ? 'handleOverflow' : 'clearOverflow';
+
+ var results = handler[method](calcs, tSize);
+
+ if (results) {
+ if (results.targetSize) {
+ tSize = results.targetSize;
+ }
+
+ if (results.recalculate) {
+ items = this.getVisibleItems(container);
+ calcs = this.calculateChildBoxes(items, tSize);
+ boxes = calcs.boxes;
+ }
+ }
+ }
+
+ /**
+ * @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 = calcs;
+
+ this.updateInnerCtSize(tSize, calcs);
+ this.updateChildBoxes(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: function(tSize, calcs) {
+ var align = this.align,
+ padding = this.padding,
+ width = tSize.width,
+ height = tSize.height;
+
+ if (this.type == 'hbox') {
+ var innerCtWidth = width,
+ innerCtHeight = calcs.meta.maxHeight + padding.top + padding.bottom;
+
+ if (align == 'stretch') {
+ innerCtHeight = height;
+ } else if (align == 'middle') {
+ innerCtHeight = Math.max(height, innerCtHeight);
+ }
+ } else {
+ var innerCtHeight = height,
+ innerCtWidth = calcs.meta.maxWidth + padding.left + padding.right;
+
+ if (align == 'stretch') {
+ innerCtWidth = width;
+ } else if (align == 'center') {
+ innerCtWidth = Math.max(width, innerCtWidth);
+ }
+ }
+
+ this.innerCt.setSize(innerCtWidth || undefined, innerCtHeight || undefined);
+ },
+
+ /**
+ * @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 && c.shouldLayout !== false){
+ 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);
+ },
+
+ /**
+ * @private
+ */
+ destroy: function() {
+ Ext.destroy(this.overflowHandler);
+
+ Ext.layout.BoxLayout.superclass.destroy.apply(this, arguments);
+ }
+});
+
+
+
+Ext.ns('Ext.layout.boxOverflow');
+
+<div id="cls-Ext.layout.boxOverflow.None"></div>/**
+ * @class Ext.layout.boxOverflow.None
+ * @extends Object
+ * Base class for Box Layout overflow handlers. These specialized classes are invoked when a Box Layout
+ * (either an HBox or a VBox) has child items that are either too wide (for HBox) or too tall (for VBox)
+ * for its container.
+ */
+
+Ext.layout.boxOverflow.None = Ext.extend(Object, {
+ constructor: function(layout, config) {
+ this.layout = layout;
+
+ Ext.apply(this, config || {});
+ },
+
+ handleOverflow: Ext.emptyFn,
+
+ clearOverflow: Ext.emptyFn
+});
+
+
+Ext.layout.boxOverflow.none = Ext.layout.boxOverflow.None;
+</pre>
</body>
</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff