/*! + * Ext JS Library 3.3.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * @class Ext.layout.VBoxLayout + * @extends Ext.layout.BoxLayout + *+ + \ No newline at end of fileA layout that arranges items vertically down a Container. This layout optionally divides available vertical + * space between child items containing a numeric
+ * 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, { + /** + * @cfg {String} align + * Controls how the child items of the container are aligned. Acceptable configuration values for this + * property are: + *flexconfiguration.+ */ + align : 'left', // left, center, stretch, strechmax + type: 'vbox', + + /** + * @cfg {String} pack + * Controls how the child items of the container are packed together. Acceptable configuration values + * for this property are: + *+ *
- left : Default
+ *child items are aligned horizontally + * at the left side of the container- center :
+ *child items are aligned horizontally at the + * mid-width of the container- stretch :
+ *child items are stretched horizontally to fill + * the width of the container- stretchmax :
+ *child items are stretched horizontally to + * the size of the largest item.+ */ + + /** + * @cfg {Number} flex + * This configuation option is to be applied to child items of the container managed + * by this layout. Each child item with a flex property will be flexed vertically + * according to each item's relative flex value compared to the sum of all items with + * a flex value specified. Any child items that have either a flex = 0 or + * flex = undefined will not be 'flexed' (the initial size will not be changed). + */ + + /** + * @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, + desiredHeight= 0, + minimumHeight= 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, + horizMargins, vertMargins, 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 && typeof child.doLayout == 'function'; + + // Static height (numeric) requires no calcs + if (typeof childHeight != 'number') { + + // 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; + vertMargins = childMargins.top + childMargins.bottom; + + nonFlexHeight += vertMargins + (childHeight || 0); + desiredHeight += vertMargins + (child.flex ? child.minHeight || 0 : childHeight); + minimumHeight += vertMargins + (child.minHeight || childHeight || 0); + + // Max width for align - force layout of non-layed out subcontainers without a numeric width + if (typeof childWidth != 'number') { + 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 + }); + } + + var shortfall = desiredHeight - height, + tooNarrow = minimumHeight > height; + + //the height available to the flexed items + var availableHeight = Math.max(0, (height - nonFlexHeight - paddingVert)); + + if (tooNarrow) { + for (i = 0, length = visibleCount; i < length; i++) { + boxes[i].height = visibleItems[i].minHeight || visibleItems[i].height || boxes[i].height; + } + } else { + //all flexed items should be sized to their minimum width, other items should be shrunk down until + //the shortfall has been accounted for + if (shortfall > 0) { + var minHeights = []; + + /** + * When we have a shortfall but are not tooNarrow, we need to shrink the height of each non-flexed item. + * Flexed items are immediately reduced to their minHeight and anything already at minHeight is ignored. + * The remaining items are collected into the minHeights array, which is later used to distribute the shortfall. + */ + for (var index = 0, length = visibleCount; index < length; index++) { + var item = visibleItems[index], + minHeight = item.minHeight || 0; + + //shrink each non-flex tab by an equal amount to make them all fit. Flexed items are all + //shrunk to their minHeight because they're flexible and should be the first to lose height + if (item.flex) { + boxes[index].height = minHeight; + } else { + minHeights.push({ + minHeight: minHeight, + available: boxes[index].height - minHeight, + index : index + }); + } + } + + //sort by descending minHeight value + minHeights.sort(function(a, b) { + return a.available > b.available ? 1 : -1; + }); + + /* + * Distribute the shortfall (difference between total desired with of all items and actual height available) + * between the non-flexed items. We try to distribute the shortfall evenly, but apply it to items with the + * smallest difference between their height and minHeight first, so that if reducing the height by the average + * amount would make that item less than its minHeight, we carry the remainder over to the next item. + */ + for (var i = 0, length = minHeights.length; i < length; i++) { + var itemIndex = minHeights[i].index; + + if (itemIndex == undefined) { + continue; + } + + var item = visibleItems[itemIndex], + box = boxes[itemIndex], + oldHeight = box.height, + minHeight = item.minHeight, + newHeight = Math.max(minHeight, oldHeight - Math.ceil(shortfall / (length - i))), + reduction = oldHeight - newHeight; + + boxes[itemIndex].height = newHeight; + shortfall -= reduction; + } + } else { + //temporary variables used in the flex height calculations below + var remainingHeight = availableHeight, + remainingFlex = totalFlex; + + //calculate the height of each flexed item + for (i = 0; i < visibleCount; i++) { + child = visibleItems[i]; + calcs = boxes[i]; + + childMargins = child.margins; + horizMargins = childMargins.left + childMargins.right; + + if (isStart && child.flex && !child.height) { + flexedHeight = Math.ceil((child.flex / remainingFlex) * remainingHeight); + remainingHeight -= flexedHeight; + remainingFlex -= child.flex; + + calcs.height = flexedHeight; + calcs.dirtySize = true; + } + } + } + } + + if (isCenter) { + topOffset += availableHeight / 2; + } else if (isEnd) { + topOffset += availableHeight; + } + + //finally, calculate the left and top position of each item + for (i = 0; i < visibleCount; i++) { + child = visibleItems[i]; + calcs = boxes[i]; + + childMargins = child.margins; + topOffset += childMargins.top; + horizMargins = childMargins.left + childMargins.right; + + + 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, + nonFlexHeight: nonFlexHeight, + desiredHeight: desiredHeight, + minimumHeight: minimumHeight, + shortfall : desiredHeight - height, + tooNarrow : tooNarrow + } + }; + } +}); + +Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout; ++ *
- start : Default
+ *child items are packed together at + * top side of container- center :
+ *child items are packed together at + * mid-height of container- end :
+ *child items are packed together at bottom + * side of container