2150 |
mathias |
1 |
if(!dojo._hasResource["dojox.layout.BorderContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
|
|
|
2 |
dojo._hasResource["dojox.layout.BorderContainer"] = true;
|
|
|
3 |
dojo.provide("dojox.layout.BorderContainer");
|
|
|
4 |
|
|
|
5 |
dojo.require("dijit.layout._LayoutWidget");
|
|
|
6 |
|
|
|
7 |
dojo.experimental("dojox.layout.BorderContainer");
|
|
|
8 |
|
|
|
9 |
dojo.declare(
|
|
|
10 |
"dojox.layout.BorderContainer",
|
|
|
11 |
// [dijit._Widget, dijit._Container, dijit._Contained],
|
|
|
12 |
dijit.layout._LayoutWidget,
|
|
|
13 |
{
|
|
|
14 |
// summary
|
|
|
15 |
// Provides layout in 5 regions, a center and borders along its 4 sides.
|
|
|
16 |
//
|
|
|
17 |
// details
|
|
|
18 |
// A BorderContainer is a box with a specified size (like style="width: 500px; height: 500px;"),
|
|
|
19 |
// that contains children widgets marked with "position" of "top", "bottom", "left", "right", "center".
|
|
|
20 |
// It takes it's children marked as top/bottom/left/right, and lays them out along the edges of the center box,
|
|
|
21 |
// with "top" and "bottom" extending the full width of the container.
|
|
|
22 |
//
|
|
|
23 |
// usage
|
|
|
24 |
// <style>
|
|
|
25 |
// html, body{ height: 100%; width: 100%; }
|
|
|
26 |
// </style>
|
|
|
27 |
// <div dojoType="BorderContainer" style="width: 100%; height: 100%">
|
|
|
28 |
// <div dojoType="ContentPane" position="top">header text</div>
|
|
|
29 |
// <div dojoType="ContentPane" position="right" style="width: 200px;">table of contents</div>
|
|
|
30 |
// <div dojoType="ContentPane" position="center">client area</div>
|
|
|
31 |
// </div>
|
|
|
32 |
|
|
|
33 |
top: {},
|
|
|
34 |
bottom: {},
|
|
|
35 |
left: {}, // inside?
|
|
|
36 |
right: {}, // outside?
|
|
|
37 |
center: {},
|
|
|
38 |
|
|
|
39 |
layout: function(){
|
|
|
40 |
this._layoutChildren(this.domNode, this._contentBox, this.getChildren());
|
|
|
41 |
},
|
|
|
42 |
|
|
|
43 |
addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){
|
|
|
44 |
dijit._Container.prototype.addChild.apply(this, arguments);
|
|
|
45 |
if(this._started){
|
|
|
46 |
this._layoutChildren(this.domNode, this._contentBox, this.getChildren());
|
|
|
47 |
}
|
|
|
48 |
},
|
|
|
49 |
|
|
|
50 |
removeChild: function(/*Widget*/ widget){
|
|
|
51 |
dijit._Container.prototype.removeChild.apply(this, arguments);
|
|
|
52 |
if(this._started){
|
|
|
53 |
this._layoutChildren(this.domNode, this._contentBox, this.getChildren());
|
|
|
54 |
}
|
|
|
55 |
},
|
|
|
56 |
|
|
|
57 |
_layoutChildren: function(/*DomNode*/ container, /*Object*/ dim, /*Object[]*/ children){
|
|
|
58 |
/**
|
|
|
59 |
* summary
|
|
|
60 |
* Layout a bunch of child dom nodes within a parent dom node
|
|
|
61 |
* container:
|
|
|
62 |
* parent node
|
|
|
63 |
* dim:
|
|
|
64 |
* {l, t, w, h} object specifying dimensions of container into which to place children
|
|
|
65 |
* children:
|
|
|
66 |
* an array like [ {domNode: foo, position: "bottom" }, {domNode: bar, position: "client"} ]
|
|
|
67 |
*/
|
|
|
68 |
|
|
|
69 |
//TODO: what is dim and why doesn't it look right?
|
|
|
70 |
// copy dim because we are going to modify it
|
|
|
71 |
// dim = dojo.mixin({}, dim);
|
|
|
72 |
|
|
|
73 |
this.domNode.style.position = "relative";
|
|
|
74 |
|
|
|
75 |
//FIXME: do this once? somewhere else?
|
|
|
76 |
dojo.addClass(container, "dijitBorderContainer");
|
|
|
77 |
dojo.forEach(children, function(child){
|
|
|
78 |
var style = child.domNode.style;
|
|
|
79 |
style.position = "absolute";
|
|
|
80 |
if(child.position){
|
|
|
81 |
this[child.position] = child.domNode;
|
|
|
82 |
}
|
|
|
83 |
}, this);
|
|
|
84 |
|
|
|
85 |
var topStyle = this.top.style;
|
|
|
86 |
var rightStyle = this.right.style;
|
|
|
87 |
var leftStyle = this.left.style;
|
|
|
88 |
var centerStyle = this.center.style;
|
|
|
89 |
var bottomStyle = this.bottom.style;
|
|
|
90 |
var rightCoords = dojo.coords(this.right);
|
|
|
91 |
var leftCoords = dojo.coords(this.left);
|
|
|
92 |
var centerCoords = dojo.coords(this.center);
|
|
|
93 |
var bottomCoords = dojo.coords(this.bottom);
|
|
|
94 |
var topCoords = dojo.coords(this.top);
|
|
|
95 |
rightStyle.top = leftStyle.top = centerStyle.top = topCoords.h + "px";
|
|
|
96 |
topStyle.top = topStyle.left = topStyle.right = "0px";
|
|
|
97 |
bottomStyle.left = bottomStyle.bottom = bottomStyle.right = "0px";
|
|
|
98 |
leftStyle.left = rightStyle.right = "0px";
|
|
|
99 |
centerStyle.left = leftCoords.w + "px";
|
|
|
100 |
centerStyle.right = rightCoords.w + "px";
|
|
|
101 |
rightStyle.bottom = leftStyle.bottom = centerStyle.bottom = bottomCoords.h + "px";
|
|
|
102 |
},
|
|
|
103 |
|
|
|
104 |
resize: function(args){
|
|
|
105 |
this.layout();
|
|
|
106 |
}
|
|
|
107 |
});
|
|
|
108 |
|
|
|
109 |
// This argument can be specified for the children of a BorderContainer.
|
|
|
110 |
// Since any widget can be specified as a LayoutContainer child, mix it
|
|
|
111 |
// into the base widget class. (This is a hack, but it's effective.)
|
|
|
112 |
dojo.extend(dijit._Widget, {
|
|
|
113 |
// position: String
|
|
|
114 |
// "top", "bottom", "left", "right", "center".
|
|
|
115 |
// See the BorderContainer description for details on this parameter.
|
|
|
116 |
position: 'none'
|
|
|
117 |
});
|
|
|
118 |
|
|
|
119 |
}
|