1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
5 <title>BorderContainer Experiments | The Dojo Toolkit</title>
7 <link rel="stylesheet" href="../../themes/tundra/tundra.css" />
8 <style type="text/css">
9 @import "../../../dojo/resources/dojo.css";
10 @import "../css/dijitTests.css";
11 #pane1 { background-color:red;
14 background-color:green;
17 background-color:blue;
20 background-color:#ededed;
22 .wrapper { padding:25px; }
23 .bc { margin:10px; border:2px solid #ededed; }
26 <script type="text/javascript" src="../../../dojo/dojo.js"
27 djConfig="parseOnLoad:true, isDebug:true"></script>
29 <script type="text/javascript">
30 dojo.require("dijit.form.Button");
31 dojo.require("dijit.layout.ContentPane");
32 dojo.require("dijit.layout.BorderContainer");
33 dojo.declare("my.BorderContainer",dijit.layout.BorderContainer,{
39 { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"100%" } },
40 { id: "pane1", hidden:true },
41 { id: "pane2", hidden:true },
42 { id: "pane3", hidden:true }
48 { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"50%" } },
49 { id: "pane1", sizeable:true, region:"bottom", style: { width:"100%", height:"50%" } },
50 { id: "pane2", hidden:true },
51 { id: "pane3", hidden:true }
57 { id: "pane0", sizeable:true, region:"left", style: { width:"50%", height:"100%" } },
58 { id: "pane1", sizeable:false, region:"center", style: { width:"50%", height:"100%" } },
59 { id: "pane2", hidden:true },
60 { id: "pane3", hidden:true }
66 _clearSplitters: function(){
67 // cleanup all splitters on the page
68 dojo.query(".dijitSplitter",this.domNode).forEach(function(n){
69 dijit.byNode(n).destroy();
71 dojo.query(".dijitSplitterCover").forEach(function(n){
72 dojo._destroyElement(n);
74 delete this._splitters;
78 setLayoutENUM: function(lay){
79 // set the layout to a predefined setup
80 if(this._layoutSetting != lay){
82 this._layoutSetting = lay;
83 var struct = this.opts[lay] || false;
84 this._clearSplitters();
86 dojo.forEach(struct.panes,function(pane,i){
88 var d = dijit.byId(pane.id);
89 d.region = pane.region || "center";
90 d.splitter = pane.sizeable;
91 if(pane.minSize){ d.minSize = pane.minSize; }
92 if(pane.maxSize){ d.maxSize = pane.maxSize; }
94 // reset this widget to our hidden holder node
95 this.extractChild(d,dojo.byId("holder"));
102 // object setter via style only in trunk:
103 dojo.style(d.domNode,pane.style);
112 extractChild: function(/*Widget*/ child, /* DomNode */node){
113 // a non-destructive cleanup for the bordercontainer.
114 // cleanup a widget, and append it's domNode to some
115 // other node in the dom
116 var region = child.region;
117 var splitter = this._splitters[region];
119 dijit.byNode(splitter).destroy();
120 delete this._splitters[region];
122 delete this["_"+region];
123 node.appendChild(child.domNode);
125 this._layoutChildren();
127 return child.domNode;
133 dojo.addOnLoad(function(){
135 dojo.forEach(["a","av","ah"],function(n){
137 var but = new dijit.form.Button({
141 layout.setLayoutENUM(n);
144 dojo.byId("buttons").appendChild(but.domNode);
152 <body class="tundra">
154 <h1>This is a test</h1>
155 <p>This is only a test. An experiment in dynamically altering a BorderContainer's layout
156 (a seemingly unsupported feature just yet). It Demonstrates how to programatically alter/animate
157 the size of non-center regions though, and several simple layout configurations
162 <div id="buttons"></div>
165 <div jsId="layout" id="container" dojoType="my.BorderContainer" style="width:600px; height:300px; border:3px solid #333;">
166 <div dojoType="dijit.layout.ContentPane" region="center" id="pane0">
171 <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px">
172 <div dojoType="dijit.layout.ContentPane" region="center">
177 <div class="wrapper">
178 <h3>two panes, vertical split:</h3>
181 <div class="bc" id="animBC" dojoType="dijit.layout.BorderContainer" style="height:200px">
182 <div dojoType="dijit.layout.ContentPane" id="sizing1" style="background-color:red" region="left" splitter="true">
185 <div dojoType="dijit.layout.ContentPane" region="center">
187 <button dojoType="dijit.form.Button">
189 <script type="dojo/method" event="onClick">
190 var n = dijit.byId("sizing1").domNode;
191 dojo.animateProperty({
194 properties: { width: { end: (open ? "100" : "400"), unit:"px" } },
197 dijit.byId("animBC").layout();
205 <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px">
206 <div dojoType="dijit.layout.ContentPane" region="center" splitter="true">
207 Sinlge pane - center (splitter) (this is unsupported, and does not work)
209 <div dojoType="dijit.layout.ContentPane" region="right">
210 Sinlge pane - right (no splitter)
214 <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px">
215 <div dojoType="dijit.layout.ContentPane" region="center">
216 Sinlge pane - center (no splitter)
218 <div dojoType="dijit.layout.ContentPane" region="right" splitter="true">
219 Sinlge pane - right (splitter)
224 <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;">
225 <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">
226 Sinlge pane - top (splitter)
229 <div dojoType="dijit.layout.ContentPane" region="center">
234 <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;">
235 <div dojoType="dijit.layout.ContentPane" region="center">
238 <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true">
239 Single Pane Bottom (splitter)
241 <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">
242 Single Pane Top (splitter)
246 <div id="holder" style="visibility:hidden">
247 <div dojoType="dijit.layout.ContentPane" id="pane1">pane 1</div>
248 <div dojoType="dijit.layout.ContentPane" id="pane2">pane 2</div>
249 <div dojoType="dijit.layout.ContentPane" id="pane3">pane 3</div>