X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..refs/heads/master:/docs/source/Box.html diff --git a/docs/source/Box.html b/docs/source/Box.html index 2ccdc6b6..8f8ea267 100644 --- a/docs/source/Box.html +++ b/docs/source/Box.html @@ -1,4 +1,21 @@ -Sencha Documentation Project
/**
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
  * @class Ext.layout.container.Box
  * @extends Ext.layout.container.Container
  * <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>
@@ -11,7 +28,7 @@ Ext.define('Ext.layout.container.Box', {
     alias: ['layout.box'],
     extend: 'Ext.layout.container.Container',
     alternateClassName: 'Ext.layout.BoxLayout',
-    
+
     requires: [
         'Ext.layout.container.boxOverflow.None',
         'Ext.layout.container.boxOverflow.Menu',
@@ -22,14 +39,14 @@ Ext.define('Ext.layout.container.Box', {
 
     /* End Definitions */
 
-    /**
-     * @cfg {Mixed} animate
+    /**
+     * @cfg {Boolean/Number/Object} animate
      * <p>If truthy, child Component are <i>animated</i> into position whenever the Container
      * is layed out. If this option is numeric, it is used as the animation duration in milliseconds.</p>
      * <p>May be set as a property at any time.</p>
      */
 
-    /**
+    /**
      * @cfg {Object} defaultMargins
      * <p>If the individual contained items do not have a <tt>margins</tt>
      * property specified or margin specified via CSS, the default margins from this property will be
@@ -54,9 +71,6 @@ Ext.define('Ext.layout.container.Box', {
      * <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: {
         top: 0,
@@ -65,7 +79,7 @@ Ext.define('Ext.layout.container.Box', {
         left: 0
     },
 
-    /**
+    /**
      * @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
@@ -80,13 +94,12 @@ Ext.define('Ext.layout.container.Box', {
      * <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',
 
-    /**
+    /**
      * @cfg {String} pack
      * Controls how the child items of the container are packed together. Acceptable configuration values
      * for this property are:
@@ -99,7 +112,7 @@ Ext.define('Ext.layout.container.Box', {
      * side of container</div></li>
      * </ul></div>
      */
-    /**
+    /**
      * @cfg {Number} flex
      * This configuration option is to be applied to <b>child <tt>items</tt></b> of the container managed
      * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>
@@ -116,16 +129,22 @@ Ext.define('Ext.layout.container.Box', {
 
     bindToOwnerCtContainer: true,
 
-    fixedLayout: false,
-    
     // availableSpaceOffset is used to adjust the availableWidth, typically used
     // to reserve space for a scrollbar
     availableSpaceOffset: 0,
-    
+
     // whether or not to reserve the availableSpaceOffset in layout calculations
     reserveOffset: true,
-    
-    /**
+
+    /**
+     * @cfg {Boolean} shrinkToFit
+     * True (the default) to allow fixed size components to shrink (limited to their
+     * minimum size) to avoid overflow. False to preserve fixed sizes even if they cause
+     * overflow.
+     */
+    shrinkToFit: true,
+
+    /**
      * @cfg {Boolean} clearInnerCtOnLayout
      */
     clearInnerCtOnLayout: false,
@@ -158,26 +177,27 @@ Ext.define('Ext.layout.container.Box', {
         me.initOverflowHandler();
     },
 
-    /**
+    /**
      * @private
      * Returns the current size and positioning of the passed child item.
-     * @param {Component} child The child Component to calculate the box for
+     * @param {Ext.Component} child The child Component to calculate the box for
      * @return {Object} Object containing box measurements for the child. Properties are left,top,width,height.
      */
     getChildBox: function(child) {
         child = child.el || this.owner.getComponent(child).el;
+        var size = child.getBox(false, true);
         return {
-            left: child.getLeft(true),
-            top: child.getTop(true),
-            width: child.getWidth(),
-            height: child.getHeight()
+            left: size.left,
+            top: size.top,
+            width: size.width,
+            height: size.height
         };
     },
 
-    /**
+    /**
      * @private
      * Calculates the size and positioning of the passed child item.
-     * @param {Component} child The child Component to calculate the box for
+     * @param {Ext.Component} child The child Component to calculate the box for
      * @return {Object} Object containing box measurements for the child. Properties are left,top,width,height.
      */
     calculateChildBox: function(child) {
@@ -194,7 +214,7 @@ Ext.define('Ext.layout.container.Box', {
         }
     },
 
-    /**
+    /**
      * @private
      * Calculates the size and positioning of each item in the box. 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
@@ -227,6 +247,8 @@ Ext.define('Ext.layout.container.Box', {
             paddingPerpendicular =  perpendicularOffset + padding[me.perpendicularRightBottom],
             availPerpendicularSize = mmax(0, perpendicularSize - paddingPerpendicular),
 
+            innerCtBorderWidth = me.innerCt.getBorderWidth(me.perpendicularLT + me.perpendicularRB),
+
             isStart = me.pack == 'start',
             isCenter = me.pack == 'center',
             isEnd = me.pack == 'end',
@@ -242,16 +264,21 @@ Ext.define('Ext.layout.container.Box', {
             minSizes = [],
             calculatedWidth,
 
-            i, child, childParallel, childPerpendicular, childMargins, childSize, minParallel, tmpObj, shortfall, 
-            tooNarrow, availableSpace, minSize, item, length, itemIndex, box, oldSize, newSize, reduction, diff, 
-            flexedBoxes, remainingSpace, remainingFlex, flexedSize, parallelMargins, calcs, offset, 
+            i, child, childParallel, childPerpendicular, childMargins, childSize, minParallel, tmpObj, shortfall,
+            tooNarrow, availableSpace, minSize, item, length, itemIndex, box, oldSize, newSize, reduction, diff,
+            flexedBoxes, remainingSpace, remainingFlex, flexedSize, parallelMargins, calcs, offset,
             perpendicularMargins, stretchSize;
 
         //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];
             childPerpendicular = child[perpendicularPrefix];
-            me.layoutItem(child);
+            if (!child.flex || !(me.align == 'stretch' || me.align == 'stretchmax')) {
+                if (child.componentLayout.initialized !== true) {
+                    me.layoutItem(child);
+                }
+            }
+
             childMargins = child.margins;
             parallelMargins = childMargins[me.parallelBefore] + childMargins[me.parallelAfter];
 
@@ -287,14 +314,20 @@ Ext.define('Ext.layout.container.Box', {
             }
 
             // Track the maximum perpendicular size for use by the stretch and stretchmax align config values.
-            maxSize = mmax(maxSize, childPerpendicular + childMargins[me.perpendicularLeftTop] + childMargins[me.perpendicularRightBottom]);
+            // Ensure that the tracked maximum perpendicular size takes into account child min[Width|Height] settings!
+            maxSize = mmax(maxSize, mmax(childPerpendicular, child[perpendicularMinString]||0) + childMargins[me.perpendicularLeftTop] + childMargins[me.perpendicularRightBottom]);
 
             tmpObj[parallelPrefix] = childParallel || undefinedValue;
+            tmpObj.dirtySize = child.componentLayout.lastComponentSize ? (tmpObj[parallelPrefix] !== child.componentLayout.lastComponentSize[parallelPrefix]) : false;
             tmpObj[perpendicularPrefix] = childPerpendicular || undefinedValue;
             boxes.push(tmpObj);
         }
-        shortfall = desiredSize - parallelSize;
-        tooNarrow = minimumSize > parallelSize;
+
+        // Only calculate parallel overflow indicators if we are not auto sizing
+        if (!me.autoSize) {
+            shortfall = desiredSize - parallelSize;
+            tooNarrow = minimumSize > parallelSize;
+        }
 
         //the space available to the flexed items
         availableSpace = mmax(0, parallelSize - nonFlexSize - paddingParallel - (me.reserveOffset ? me.availableSpaceOffset : 0));
@@ -326,8 +359,7 @@ Ext.define('Ext.layout.container.Box', {
                         box = boxes[i];
                         box.dirtySize = box.dirtySize || box[parallelPrefix] != minSize;
                         box[parallelPrefix] = minSize;
-                    }
-                    else {
+                    } else if (me.shrinkToFit) {
                         minSizes.push({
                             minSize: minSize,
                             available: boxes[i][parallelPrefix] - minSize,
@@ -363,6 +395,7 @@ Ext.define('Ext.layout.container.Box', {
                     box[parallelPrefix] = newSize;
                     shortfall -= reduction;
                 }
+                tooNarrow = (shortfall > 0);
             }
             else {
                 remainingSpace = availableSpace;
@@ -452,7 +485,7 @@ Ext.define('Ext.layout.container.Box', {
                 // When calculating a centered position within the content box of the innerCt, the width of the borders must be subtracted from
                 // the size to yield the space available to center within.
                 // The updateInnerCtSize method explicitly adds the border widths to the set size of the innerCt.
-                diff = mmax(availPerpendicularSize, maxSize) - me.innerCt.getBorderWidth(me.perpendicularLT + me.perpendicularRB) - calcs[perpendicularPrefix];
+                diff = mmax(availPerpendicularSize, maxSize) - innerCtBorderWidth - calcs[perpendicularPrefix];
                 if (diff > 0) {
                     calcs[me.perpendicularLeftTop] = perpendicularOffset + Math.round(diff / 2);
                 }
@@ -476,7 +509,14 @@ Ext.define('Ext.layout.container.Box', {
         };
     },
 
-    /**
+    onRemove: function(comp){
+        this.callParent(arguments);
+        if (this.overflowHandler) {
+            this.overflowHandler.onRemove(comp);
+        }
+    },
+
+    /**
      * @private
      */
     initOverflowHandler: function() {
@@ -489,7 +529,7 @@ Ext.define('Ext.layout.container.Box', {
         }
 
         var handlerType = 'None';
-        if (handler && handler.type != undefined) {
+        if (handler && handler.type !== undefined) {
             handlerType = handler.type;
         }
 
@@ -501,7 +541,7 @@ Ext.define('Ext.layout.container.Box', {
         this.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.' + handlerType, this, handler);
     },
 
-    /**
+    /**
      * @private
      * Runs the child box calculations and caches them in childBoxCache. Subclasses can used these cached values
      * when laying out
@@ -538,7 +578,7 @@ Ext.define('Ext.layout.container.Box', {
                 }
 
                 if (results.recalculate) {
-                    items = me.getVisibleItems(owner);
+                    items = me.getVisibleItems();
                     calcs = me.calculateChildBoxes(items, targetSize);
                     boxes = calcs.boxes;
                 }
@@ -547,7 +587,7 @@ Ext.define('Ext.layout.container.Box', {
             me.overflowHandler.clearOverflow();
         }
 
-        /**
+        /**
          * @private
          * @property layoutTargetLastSize
          * @type Object
@@ -556,7 +596,7 @@ Ext.define('Ext.layout.container.Box', {
          */
         me.layoutTargetLastSize = targetSize;
 
-        /**
+        /**
          * @private
          * @property childBoxCache
          * @type Array
@@ -569,10 +609,12 @@ Ext.define('Ext.layout.container.Box', {
         me.updateChildBoxes(boxes);
         me.handleTargetOverflow(targetSize);
     },
+    
+    animCallback: Ext.emptyFn,
 
-    /**
+    /**
      * Resizes and repositions each child component
-     * @param {Array} boxes The box measurements
+     * @param {Object[]} boxes The box measurements
      */
     updateChildBoxes: function(boxes) {
         var me = this,
@@ -660,6 +702,7 @@ Ext.define('Ext.layout.container.Box', {
                 // When we've animated all changed boxes into position, clear our busy flag and call the callback.
                 length -= 1;
                 if (!length) {
+                    me.animCallback(anim);
                     me.layoutBusy = false;
                     if (Ext.isFunction(animCallback)) {
                         animCallback();
@@ -694,7 +737,7 @@ Ext.define('Ext.layout.container.Box', {
         }
     },
 
-    /**
+    /**
      * @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
@@ -702,7 +745,7 @@ Ext.define('Ext.layout.container.Box', {
      * 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
+     * @param {Object} calculations The new box calculations of all items to be laid out
      */
     updateInnerCtSize: function(tSize, calcs) {
         var me = this,
@@ -749,14 +792,14 @@ Ext.define('Ext.layout.container.Box', {
         }
     },
 
-    /**
+    /**
      * @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} container The container
-     * @param {Ext.core.Element} target The target element
+     * @param {Ext.Element} target The target element
      * @return True if the layout overflowed, and was reflowed in a secondary onLayout call.
      */
     handleTargetOverflow: function(previousTargetSize) {
@@ -822,17 +865,21 @@ Ext.define('Ext.layout.container.Box', {
         margins.right  += itemEl.getMargin('r');
         margins.bottom += itemEl.getMargin('b');
         margins.left   += itemEl.getMargin('l');
+        margins.height  = margins.top  + margins.bottom;
+        margins.width   = margins.left + margins.right;
         style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = '0';
 
         // Item must reference calculated margins.
         item.margins = margins;
     },
 
-    /**
+    /**
      * @private
      */
     destroy: function() {
-        Ext.destroy(this.overflowHandler);
+        Ext.destroy(this.innerCt, this.overflowHandler);
         this.callParent(arguments);
     }
-});
\ No newline at end of file +});
+ +