/**
* @class Ext.layout.BoxLayout
* @extends Ext.layout.ContainerLayout
* <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>
*/
Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
/**
* @cfg {Object} defaultMargins
* <p>If the individual contained items do not have a <tt>margins</tt>
* property specified, the default margins from this property will be
* applied to each item.</p>
* <br><p>This property may be specified as an object containing margins
* to apply in the format:</p><pre><code>
{
top: (top margin),
right: (right margin),
bottom: (bottom margin),
left: (left margin)
}</code></pre>
* <p>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:</p>
* <div class="mdetail-params"><ul>
* <li>If there is only one value, it applies to all sides.</li>
* <li>If there are two values, the top and bottom borders are set to the
* first value and the right and left are set to the second.</li>
* <li>If there are three values, the top is set to the first value, the left
* and right are set to the second, and the bottom is set to the third.</li>
* <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 : {left:0,top:0,right:0,bottom: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
* space-separated, numeric padding values. The order of the sides associated
* with each value matches the way CSS processes padding values:</p>
* <div class="mdetail-params"><ul>
* <li>If there is only one value, it applies to all sides.</li>
* <li>If there are two values, the top and bottom borders are set to the
* first value and the right and left are set to the second.</li>
* <li>If there are three values, the top is set to the first value, the left
* and right are set to the second, and the bottom is set to the third.</li>
* <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',
// private
monitorResize : true,
type: 'box',
scrollOffset : 0,
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);
}
var handler = this.overflowHandler;
if (typeof handler == 'string') {
handler = {
type: handler
};
}
var handlerType = 'none';
if (handler && handler.type != undefined) {
handlerType = handler.type;
}
var constructor = Ext.layout.boxOverflow[handlerType];
if (constructor[this.type]) {
constructor = constructor[this.type];
}
this.overflowHandler = new constructor(this, handler);
},
/**
* @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 tSize = this.getLayoutTargetSize(),
items = this.getVisibleItems(container),
calcs = this.calculateChildBoxes(items, tSize),
boxes = calcs.boxes,
meta = calcs.meta;
//invoke the overflow handler, if one is configured
if (tSize.width > 0) {
var handler = this.overflowHandler,
method = meta.tooNarrow ? 'handleOverflow' : 'clearOverflow';
var results = handler[method](calcs, tSize);
if (results) {
if (results.targetSize) {
tSize = results.targetSize;
}
if (results.recalculate) {
items = this.getVisibleItems(container);
calcs = this.calculateChildBoxes(items, tSize);
boxes = calcs.boxes;
}
}
}
/**
* @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 = calcs;
this.updateInnerCtSize(tSize, calcs);
this.updateChildBoxes(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: function(tSize, calcs) {
var align = this.align,
padding = this.padding,
width = tSize.width,
height = tSize.height;
if (this.type == 'hbox') {
var innerCtWidth = width,
innerCtHeight = calcs.meta.maxHeight + padding.top + padding.bottom;
if (align == 'stretch') {
innerCtHeight = height;
} else if (align == 'middle') {
innerCtHeight = Math.max(height, innerCtHeight);
}
} else {
var innerCtHeight = height,
innerCtWidth = calcs.meta.maxWidth + padding.left + padding.right;
if (align == 'stretch') {
innerCtWidth = width;
} else if (align == 'center') {
innerCtWidth = Math.max(width, innerCtWidth);
}
}
this.innerCt.setSize(innerCtWidth || undefined, innerCtHeight || undefined);
},
/**
* @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 && c.shouldLayout !== false){
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.isIE9m && 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);
},
/**
* @private
*/
destroy: function() {
Ext.destroy(this.overflowHandler);
Ext.layout.BoxLayout.superclass.destroy.apply(this, arguments);
}
});
/**
* @class Ext.layout.boxOverflow.None
* @extends Object
* Base class for Box Layout overflow handlers. These specialized classes are invoked when a Box Layout
* (either an HBox or a VBox) has child items that are either too wide (for HBox) or too tall (for VBox)
* for its container.
*/
Ext.layout.boxOverflow.None = Ext.extend(Object, {
constructor: function(layout, config) {
this.layout = layout;
Ext.apply(this, config || {});
},
handleOverflow: Ext.emptyFn,
clearOverflow: Ext.emptyFn
});
Ext.layout.boxOverflow.none = Ext.layout.boxOverflow.None;