if (!dojo._hasResource["dojox.layout.BorderContainer"]) { // _hasResource // checks added by // build. Do not use // _hasResource // directly in your // code. dojo._hasResource["dojox.layout.BorderContainer"] = true; dojo.provide("dojox.layout.BorderContainer"); dojo.require("dijit.layout._LayoutWidget"); dojo.experimental("dojox.layout.BorderContainer"); dojo.declare("dojox.layout.BorderContainer", // [dijit._Widget, dijit._Container, dijit._Contained], dijit.layout._LayoutWidget, { // summary // Provides layout in 5 regions, a center and borders along its // 4 sides. // // details // A BorderContainer is a box with a specified size (like // style="width: 500px; height: 500px;"), // that contains children widgets marked with "position" of // "top", "bottom", "left", "right", "center". // It takes it's children marked as top/bottom/left/right, and // lays them out along the edges of the center box, // with "top" and "bottom" extending the full width of the // container. // // usage // //
//
header text
//
table of contents
//
client // area
//
top : {}, bottom : {}, left : {}, // inside? right : {}, // outside? center : {}, layout : function() { this._layoutChildren(this.domNode, this._contentBox, this .getChildren()); }, addChild : function(/* Widget */child, /* Integer? */insertIndex) { dijit._Container.prototype.addChild.apply(this, arguments); if (this._started) { this._layoutChildren(this.domNode, this._contentBox, this.getChildren()); } }, removeChild : function(/* Widget */widget) { dijit._Container.prototype.removeChild.apply(this, arguments); if (this._started) { this._layoutChildren(this.domNode, this._contentBox, this.getChildren()); } }, _layoutChildren : function(/* DomNode */container, /* Object */ dim, /* Object[] */children) { /** * summary Layout a bunch of child dom nodes within a parent * dom node container: parent node dim: {l, t, w, h} object * specifying dimensions of container into which to place * children children: an array like [ {domNode: foo, * position: "bottom" }, {domNode: bar, position: "client"} ] */ // TODO: what is dim and why doesn't it look right? // copy dim because we are going to modify it // dim = dojo.mixin({}, dim); this.domNode.style.position = "relative"; // FIXME: do this once? somewhere else? dojo.addClass(container, "dijitBorderContainer"); dojo.forEach(children, function(child) { var style = child.domNode.style; style.position = "absolute"; if (child.position) { this[child.position] = child.domNode; } }, this); var topStyle = this.top.style; var rightStyle = this.right.style; var leftStyle = this.left.style; var centerStyle = this.center.style; var bottomStyle = this.bottom.style; var rightCoords = dojo.coords(this.right); var leftCoords = dojo.coords(this.left); var centerCoords = dojo.coords(this.center); var bottomCoords = dojo.coords(this.bottom); var topCoords = dojo.coords(this.top); rightStyle.top = leftStyle.top = centerStyle.top = topCoords.h + "px"; topStyle.top = topStyle.left = topStyle.right = "0px"; bottomStyle.left = bottomStyle.bottom = bottomStyle.right = "0px"; leftStyle.left = rightStyle.right = "0px"; centerStyle.left = leftCoords.w + "px"; centerStyle.right = rightCoords.w + "px"; rightStyle.bottom = leftStyle.bottom = centerStyle.bottom = bottomCoords.h + "px"; }, resize : function(args) { this.layout(); } }); // This argument can be specified for the children of a BorderContainer. // Since any widget can be specified as a LayoutContainer child, mix it // into the base widget class. (This is a hack, but it's effective.) dojo.extend(dijit._Widget, { // position: String // "top", "bottom", "left", "right", "center". // See the BorderContainer description for details on this // parameter. position : 'none' }); }