Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
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:

  1. Open your Web page in a text editor.
  2. Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.StackContainer"); statements to your code.
  3. 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">&lt;
    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">&gt;
    76        <script type="dojo/method"
    77          event="onClick" args="evt">
    78          dijit.byId("stack").forward();
    79        </script>
    80      </button>
    81    </body>
    82  </html>
    
  4. Save your file.
  5. Navigate to your file in a browser. You will see a new stack container (Figure 4.7).
    Figure 4.7

    Figure 4.7 A Dijit stack container created in code.

  • + Share This
  • 🔖 Save To Your Account