/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/** * @class Ext.layout.BoxLayout * @extends Ext.layout.ContainerLayout *

Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.

*/ Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
/** * @cfg {Object} defaultMargins *

If the individual contained items do not have a margins * property specified, the default margins from this property will be * applied to each item.

*

This property may be specified as an object containing margins * to apply in the format:


{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}
*

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:

*
*

Defaults to:


     * {top:0, right:0, bottom:0, left:0}
     * 
*/ defaultMargins : {left:0,top:0,right:0,bottom:0},
/** * @cfg {String} padding *

Sets the padding to be applied to all child items managed by this layout.

*

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:

*
*

Defaults to: "0"

*/ 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); },
/** * 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); } });
/** * @class Ext.layout.VBoxLayout * @extends Ext.layout.BoxLayout *

A layout that arranges items vertically down a Container. This layout optionally divides available vertical * space between child items containing a numeric flex configuration.

* 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: *
*/ 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: *
*/
/** * @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 * 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;
/** * @class Ext.layout.HBoxLayout * @extends Ext.layout.BoxLayout *

A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal * space between child items containing a numeric flex configuration.

* 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, {
/** * @cfg {String} align * Controls how the child items of the container are aligned. Acceptable configuration values for this * property are: *