Using BorderContainer
One of the most popular layout containers is the BorderContainer Dijit. This layout container lets you arrange content panes inside a common border by assigning values to their region attributes: "top", "bottom", "left", "right", and "center".
You can also allow the user to resize a content pane with the mouse by setting the content pane's splitter attribute to "true".
The example bordercontainer.html uses three content panes.
- Open your Web page in a text editor.
- Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.BorderContainer"); statements to your code.
To draw a border container with three content panes, create a new border container using a <div> element with its dojoType attribute set to dijit.form.BorderContainer and place three content panes inside it, with their region attributes set to "top", "center", and "bottom". Set the top and bottom content panes' splitter attributes to "true".
Script 4.3 shows what your page should look like after you make the additions.
Script 4.3. Adding border containers.
1 <html> 2 <head> 3 <title>Using Border 4 Containers</title> (5-19) . . . 20 <script type="text/javascript"> 21 dojo.require("dojo.parser"); 22 dojo.require( 23 "dijit.layout.ContentPane"); 24 dojo.require( 25 "dijit.layout.BorderContainer"); 26 </script> 27 </head> 28 <body class="tundra"> 29 <h1>Using Border Containers</h1> 30 <br> 31 <div 32 dojoType= 33 "dijit.layout.BorderContainer" 34 style= 35 "height:100px;width:150px; 36 border:solid 2px;"> 37 <div 38 dojoType= 39 "dijit.layout.ContentPane" 40 region="top" 41 style="background-color:pink; 42 height:30px;" splitter="true" 43 minSize="10" maxSize="800"> 44 Top region 45 </div> 46 <div 47 dojoType= 48 "dijit.layout.ContentPane" 49 region="center"> 50 Center region 51 </div> 52 <div 53 dojoType= 54 "dijit.layout.ContentPane" 55 region="bottom" 56 style="background-color:cyan; 57 height:30px;" 58 splitter="true" 59 minSize="10" maxSize="800"> 60 Bottom region 61 </div> 62 </div> 63 </body> 64 </html>
- Save your file.
- Navigate to your file in a browser. You should see a border container with three content panes (Figure 4.3).
Figure 4.3 A border container with three content panes.