--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js"><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
+ * Defaults to <tt>'0'</tt>. Sets the padding to be applied to all child items managed by this\r
+ * container's layout. \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
+ // 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(typeof c.margins == 'string'){\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
+ * A layout that arranges items vertically\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') - 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
+ 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
+ * A layout that arranges items horizontally\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> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff