This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating StackContainer Dijits in Code
You can also create stack containers in code. You create a new dijit.layout.StackContainer container and content panes to place in it. To place HTML in a content pane, we'll use the content pane's domNode property and place HTML in the content pane like this:
page1.domNode.innerHTML="<b>Ralph Kramden</b><br>CEO";
The example stackcontainerprogram.html mimics the previous task, but creates its container in code.
To create a stack container in code:
- Open your Web page in a text editor.
- Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.StackContainer"); statements to your code.
Create a new stack container and four content panes in code; then use the page1.domNode.innerHTML property to place HTML in each content pane. Add the content panes to the container with the addChild method and add two navigation buttons.
Script 4.6 shows what your page should look like after you make the additions.
Script 4.6. Creating a stack container in code.
1 <html> 2 <hea-d> 3 <title>Creating Stack Containers in 4 Code</title> (5-19) . . . 20 <script type="text/javascript"> 21 dojo.require( 22 dojo.require("dojo.parser"); 23 "dijit.layout.ContentPane"); 24 dojo.require( 25 "dijit.layout.StackContainer"); 26 dojo.addOnLoad(function(){ 27 var container = new 28 dijit.layout.StackContainer({}, 29 "stack"); 30 var page1 = new 31 dijit.layout.ContentPane({}); 32 page1.domNode.innerHTML="<b>Ralph 33 Kramden</b><br>CEO"; 34 35 var page2 = new 36 dijit.layout.ContentPane({}); 37 page2.domNode.innerHTML="<b>Ed 38 Norton</b><br>VP Operations"; 39 40 var page3 = new 41 dijit.layout.ContentPane({}); 42 page3.domNode.innerHTML="<b>Alice 43 Kramden</b><br>VP Marketing"; 44 45 var page4 = new 46 dijit.layout.ContentPane({}); 47 page4.domNode.innerHTML="<b>Trixie 48 Norton</b><br>Treasurer"; 49 50 container.addChild(page1); 51 container.addChild(page2); 52 container.addChild(page3); 53 container.addChild(page4); 54 55 container.startup(); 56 }); 57 </script> 58 </head> 59 <body class="tundra"> 60 <h1>Creating Stack Containers in 61 Code</h1> 62 <br> 63 <div id="stack" 64 style="width:150px; height:75px; 65 border:solid 1px;"> 66 </div> 67 <button 68 dojoType="dijit.form.Button">< 69 <script type="dojo/method" 70 event="onClick" args="evt"> 71 dijit.byId("stack").back(); 72 </script> 73 </button> 74 <button 75 dojoType="dijit.form.Button">> 76 <script type="dojo/method" 77 event="onClick" args="evt"> 78 dijit.byId("stack").forward(); 79 </script> 80 </button> 81 </body> 82 </html>- Save your file.
- Navigate to your file in a browser. You will see a new stack container (Figure 4.7).
Figure 4.7 A Dijit stack container created in code.
)