X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/530ef4b6c5b943cfa68b779d11cf7de29aa878bf..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/BoxLayout.html?ds=sidebyside diff --git a/docs/source/BoxLayout.html b/docs/source/BoxLayout.html deleted file mode 100644 index e23536ce..00000000 --- a/docs/source/BoxLayout.html +++ /dev/null @@ -1,687 +0,0 @@ - - - - The source code - - - - - 
/*!
- * 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:
-     *
- - \ No newline at end of file