LayoutContainer

Similar to a layout pane in Java AWT and Delphi, a LayoutContainer is a box with a specified size (like style="width: 500px; height: 500px;"), that contains children widgets marked with "layoutAlign" of "left", "right", "bottom", "top", and "client". It takes it's children marked as left/top/bottom/right, and lays them out along the edges of the box, and then it takes the child marked "client" and puts it into the remaining space in the middle.

Left/right positioning is similar to CSS's "float: left" and "float: right", and top/bottom positioning would be similar to "float: top" and "float: bottom", if there were such CSS.

Note that there can only be one client element, but there can be multiple left, right, top, or bottom elements.

Examples

A Layout Container easily formats a table of contents:

The Dojo Book

Table of Contents

Introduction

Dojo: What is It?

History

What Dojo Gives You

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Layout Container Demo 2</title>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

    <style>  

        /* NOTE: for a full screen layout, must set body size equal to the viewport. */

        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

    </style>

    <script type="text/javascript">

        dojo.require("dojo.parser");

        dojo.require("dijit.layout.ContentPane");

        dojo.require("dijit.layout.LayoutContainer");

     </script>

</head>

<body class="tundra">

<div dojoType="dijit.layout.LayoutContainer" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 0;">

   <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color:red">

        The Dojo Book

   </div>

   <div dojoType="dijit.layout.ContentPane" layoutAlign="left" 

        style="background-color:lightblue;width: 120px;">

        Table of Contents

    </div>

    <div dojoType="dijit.layout.ContentPane" layoutAlign="client" 

        style="background-color:yellow">

            <blockquote><a href="../node/717">Introduction</a>

                <ol>

                    <li><a href="../node/718">Dojo: What is It?</a></li>

                    <li><a href="../node/719">History</a></li>

                    <li><a href="../node/733">What Dojo Gives You</a></li>

                </ol>

                </blockquote>

    </div>

</div>        

</body></html>

To change the drawing order:

The LayoutContainer goes through the children as specified, and each child is laid out into the "remaining space", where "remaining space" is initially the content area of this widget, but is reduced to a smaller rectangle each time a child is added. So, changing the order of the children will change how they are laid out.

Table of Contents

The Dojo Book

Introduction

Dojo: What is It?

History

What Dojo Gives You

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Layout Container Demo 2</title>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

     <style>  

        /* NOTE: for a full screen layout, must set body size equal to the viewport. */

        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

    </style>

    <script type="text/javascript">

       dojo.require("dojo.parser");

       dojo.require("dijit.layout.ContentPane");

       dojo.require("dijit.layout.LayoutContainer");

     </script>

</head>

<body class="tundra">

<div dojoType="dijit.layout.LayoutContainer" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 0;">

   <div dojoType="dijit.layout.ContentPane" layoutAlign="left" 

        style="background-color:lightblue;width: 120px;">

        Table of Contents

    </div>

   <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color:red">

        The Dojo Book

   </div>

    <div dojoType="dijit.layout.ContentPane" layoutAlign="client" 

        style="background-color:yellow">

            <blockquote><a href="../node/717">Introduction</a>

                <ol>

                    <li><a href="../node/718">Dojo: What is It?</a></li>

                    <li><a href="../node/719">History</a></li>

                    <li><a href="../node/733">What Dojo Gives You</a></li>

                </ol>

                </blockquote>

    </div>

</div>        

</body></html>

dijit.layout.LayoutContainer Provides Delphi-style panel layout semantics.
Methods
addChild(/Widget/ child, /Integer?/ insertIndex)	Process the given child widget, inserting its dom node as a child of our dom node
Widget[] getChildren()	returns array of children widgets
Widget getParent()	returns the parent widget of this widget, assuming the parent implements dijit._Container
removeChild(/Widget/ page)	removes the passed widget instance from this widget but does not destroy it
resize(/* Object */ args)	Explicitly set this widget size (in pixels), and then call layout() to resize contents (and maybe adjust child widgets). Args is of form {w: int, h: int, l: int, t: int}.