This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating BorderContainer Dijits in Code
You can also create layout containers in code, not just markup as in the previous task. You'll do this in the next example, bordercontainerprogram.html.
To create a border container in code:
- Open your Web page in a text editor.
- Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.BorderContainer"); statements to your code.
Create a new border container and three content panes in code; then call the container's startup method and the addChild method to add the content panes.
Script 4.4 shows what your page should look like after you make the additions.
Script 4.4. Creating a border container in code.
1 <html> 2 <head><title>Creating Border Containers 3 in Code</title> (4-18) . . . 19 <script type="text/javascript"> 20 dojo.require("dojo.parser"); 21 dojo.require( 22 "dijit.layout.ContentPane"); 23 dojo.require( 24 "dijit.layout.BorderContainer"); 25 26 dojo.addOnLoad(function() { 27 var container = new 28 dijit.layout.BorderContainer( 29 {style: "height:100px; 30 width:150px;border:solid 2px"}, 31 "container" 32 ); 33 var div1 = 34 document.createElement("div"); 35 div1.appendChild(document 36 .createTextNode("Top region")); 37 var div2 = 38 document.createElement("div"); 39 div2.appendChild(document 40 .createTextNode("Center 41 region")); 42 var div3 = 43 document.createElement("div"); 44 div3.appendChild(document 45 .createTextNode("Bottom 46 region")); 47 var top = new 48 dijit.layout.ContentPane( 49 { 50 region: "top", 51 style: "background- 52 color:pink;height:30px;", 53 splitter: true, 54 minSize : 10, 55 maxSize : 80 56 }, 57 div1 58 ); 59 var center = new 60 dijit.layout.ContentPane( 61 { 62 region: "center" 63 }, 64 div2 65 ); 66 var bottom = new 67 dijit.layout.ContentPane( 68 { 69 region: "bottom", 70 style: "background-color:cyan; 71 height:30px", 72 splitter: true 73 }, 74 div3 75 ); 76 container.startup(); 77 container.addChild(top); 78 container.addChild(center); 79 container.addChild(bottom); 80 }); 81 </script> 82 <head> 83 <body class="tundra"> 84 <h1>Creating Border Containers in 85 Code</h1> 86 <br> 87 <div id="container"> 88 </div> 89 </body> 90 </html>- Save your file.
- Navigate to your file in a browser. You should see a new border container (Figure 4.4).
Figure 4.4 A border container created in code.
)