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 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:

  1. Open your Web page in a text editor.
  2. Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.BorderContainer"); statements to your code.
  3. 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>
    
  4. Save your file.
  5. Navigate to your file in a browser. You should see a new border container (Figure 4.4).
    Figure 4.4

    Figure 4.4 A border container created in code.

  • + Share This
  • 🔖 Save To Your Account