/**
* @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);
}
-});