dijit.layout.BorderContainer._layoutChildren
dojo.require("dijit.layout.BorderContainer");
defined in dijit/layout/BorderContainer.js
Usage
function (/*String?*/ changedRegion) (view source)
var sidebarLayout = (this.design == "sidebar"); var topHeight = 0, bottomHeight = 0, leftWidth = 0, rightWidth = 0; var topStyle = {}, leftStyle = {}, rightStyle = {}, bottomStyle = {}, centerStyle = (this._center && this._center.style) || {}; var changedSide = /left|right/.test(changedRegion); var layoutSides = !changedRegion || (!changedSide && !sidebarLayout); var layoutTopBottom = !changedRegion || (changedSide && sidebarLayout); if(this._top){ topStyle = layoutTopBottom && this._top.style; topHeight = dojo.marginBox(this._top).h; } if(this._left){ leftStyle = layoutSides && this._left.style; leftWidth = dojo.marginBox(this._left).w; } if(this._right){ rightStyle = layoutSides && this._right.style; rightWidth = dojo.marginBox(this._right).w; } if(this._bottom){ bottomStyle = layoutTopBottom && this._bottom.style; bottomHeight = dojo.marginBox(this._bottom).h; } var splitters = this._splitters; var topSplitter = splitters.top; var bottomSplitter = splitters.bottom; var leftSplitter = splitters.left; var rightSplitter = splitters.right; var splitterThickness = this._splitterThickness; var topSplitterThickness = splitterThickness.top || 0; var leftSplitterThickness = splitterThickness.left || 0; var rightSplitterThickness = splitterThickness.right || 0; var bottomSplitterThickness = splitterThickness.bottom || 0; // Check for race condition where CSS hasn't finished loading, so // the splitter width == the viewport width (#5824) if(leftSplitterThickness > 50 || rightSplitterThickness > 50){ setTimeout(dojo.hitch(this, function(){ for(var region in this._splitters){ this._computeSplitterThickness(region); } this._layoutChildren(); }), 50); return false; } var splitterBounds = { left: (sidebarLayout ? leftWidth + leftSplitterThickness: "0") + "px", right: (sidebarLayout ? rightWidth + rightSplitterThickness: "0") + "px" }; if(topSplitter){ dojo.mixin(topSplitter.style, splitterBounds); topSplitter.style.top = topHeight + "px"; } if(bottomSplitter){ dojo.mixin(bottomSplitter.style, splitterBounds); bottomSplitter.style.bottom = bottomHeight + "px"; } splitterBounds = { top: (sidebarLayout ? "0" : topHeight + topSplitterThickness) + "px", bottom: (sidebarLayout ? "0" : bottomHeight + bottomSplitterThickness) + "px" }; if(leftSplitter){ dojo.mixin(leftSplitter.style, splitterBounds); leftSplitter.style.left = leftWidth + "px"; } if(rightSplitter){ dojo.mixin(rightSplitter.style, splitterBounds); rightSplitter.style.right = rightWidth + "px"; } dojo.mixin(centerStyle, { top: topHeight + topSplitterThickness + "px", left: leftWidth + leftSplitterThickness + "px", right: rightWidth + rightSplitterThickness + "px", bottom: bottomHeight + bottomSplitterThickness + "px" }); var bounds = { top: sidebarLayout ? "0" : centerStyle.top, bottom: sidebarLayout ? "0" : centerStyle.bottom }; dojo.mixin(leftStyle, bounds); dojo.mixin(rightStyle, bounds); leftStyle.left = rightStyle.right = topStyle.top = bottomStyle.bottom = "0"; if(sidebarLayout){ topStyle.left = bottomStyle.left = leftWidth + (this.isLeftToRight() ? leftSplitterThickness : 0) + "px"; topStyle.right = bottomStyle.right = rightWidth + (this.isLeftToRight() ? 0 : rightSplitterThickness) + "px"; }else{ topStyle.left = topStyle.right = bottomStyle.left = bottomStyle.right = "0"; } // Nodes in IE respond to t/l/b/r, and TEXTAREA doesn't respond in any browser var janky = dojo.isIE || dojo.some(this.getChildren(), function(child){ return child.domNode.tagName == "TEXTAREA"; }); if(janky){ // Set the size of the children the old fashioned way, by calling // childNode.resize({h: int, w: int}) for each child node) var borderBox = function(n, b){ n=dojo.byId(n); var s = dojo.getComputedStyle(n); if(!b){ return dojo._getBorderBox(n, s); } var me = dojo._getMarginExtents(n, s); dojo._setMarginBox(n, b.l, b.t, b.w + me.w, b.h + me.h, s); return null; }; var resizeWidget = function(widget, dim){ if(widget){ widget.resize ? widget.resize(dim) : dojo.marginBox(widget.domNode, dim); } }; // TODO: use dim passed in to resize() (see _LayoutWidget.js resize()) // Then can make borderBox setBorderBox(), since no longer need to ever get the borderBox() size var thisBorderBox = borderBox(this.domNode); var containerHeight = thisBorderBox.h; var middleHeight = containerHeight; if(this._top){ middleHeight -= topHeight; } if(this._bottom){ middleHeight -= bottomHeight; } if(topSplitter){ middleHeight -= topSplitterThickness; } if(bottomSplitter){ middleHeight -= bottomSplitterThickness; } var centerDim = { h: middleHeight }; var sidebarHeight = sidebarLayout ? containerHeight : middleHeight; if(leftSplitter){ leftSplitter.style.height = sidebarHeight; } if(rightSplitter){ rightSplitter.style.height = sidebarHeight; } resizeWidget(this._leftWidget, {h: sidebarHeight}); resizeWidget(this._rightWidget, {h: sidebarHeight}); var containerWidth = thisBorderBox.w; var middleWidth = containerWidth; if(this._left){ middleWidth -= leftWidth; } if(this._right){ middleWidth -= rightWidth; } if(leftSplitter){ middleWidth -= leftSplitterThickness; } if(rightSplitter){ middleWidth -= rightSplitterThickness; } centerDim.w = middleWidth; var sidebarWidth = sidebarLayout ? middleWidth : containerWidth; if(topSplitter){ topSplitter.style.width = sidebarWidth; } if(bottomSplitter){ bottomSplitter.style.width = sidebarWidth; } resizeWidget(this._topWidget, {w: sidebarWidth}); resizeWidget(this._bottomWidget, {w: sidebarWidth}); resizeWidget(this._centerWidget, centerDim); }else{ // We've already sized the children by setting style.top/bottom/left/right... // Now just need to call resize() on those children so they can re-layout themselves // TODO: calling child.resize() without an argument is bad, because it forces // the child to query it's own size (even though this function already knows // the size), plus which querying the size of a node right after setting it // is known to cause problems (incorrect answer or an exception). // This is a setback from older layout widgets, which // don't do that. See #3399, #2678, #3624 and #2955, #1988 var resizeList = {}; if(changedRegion){ resizeList[changedRegion] = resizeList.center = true; if(/top|bottom/.test(changedRegion) && this.design != "sidebar"){ resizeList.left = resizeList.right = true; }else if(/left|right/.test(changedRegion) && this.design == "sidebar"){ resizeList.top = resizeList.bottom = true; } } dojo.forEach(this.getChildren(), function(child){ if(child.resize && (!changedRegion || child.region in resizeList)){ // console.log(this.id, ": resizing child id=" + child.id + " (region=" + child.region + "), style before resize is " + // "{ t: " + child.domNode.style.top + // ", b: " + child.domNode.style.bottom + // ", l: " + child.domNode.style.left + // ", r: " + child.domNode.style.right + // ", w: " + child.domNode.style.width + // ", h: " + child.domNode.style.height + // "}" // ); child.resize(); // console.log(this.id, ": after resize of child id=" + child.id + " (region=" + child.region + ") " + // "{ t: " + child.domNode.style.top + // ", b: " + child.domNode.style.bottom + // ", l: " + child.domNode.style.left + // ", r: " + child.domNode.style.right + // ", w: " + child.domNode.style.width + // ", h: " + child.domNode.style.height + // "}" // ); } }, this); }
parameter | type | description |
---|---|---|
changedRegion | String | Optional. |