Dojo Layouts

There are a number of layout mechanisms in Dojo.  These allow layouts to be quite simply performed but to give great results.

ContentPane

This is a simple holder and can be used to hold any standard html or dijit widgets.  It is constructed by using,

    <div id="myContent" data-dojo-type="dijit.layout.ContentPane">

As with all widgets dojo will expand out this div into multiple layers.

Reference: http://dojotoolkit.org/reference-guide/dijit/layout/ContentPane.html for more details.

BorderContainer

The border container gives a top, bottom, left, right and center region that another pane can be added to.  This makes Headers, Menus and footers incredibly easy to create.  It works in a very similar way to the java swing BorderLayout.

    <div id="myContent" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="liveSplitters:true">
        <div id="myTop" data-dojo-type="dijit.layout.ContentPane"  data-dojo-props="region:'top', splitter:true">...</div>
        <div id="myCenter" data-dojo-type="dijit.layout.ContentPane"  data-dojo-props="region:'center'">...</div>

    </div>

Note the difference between 'Headline' and 'Sidebar' views. Headline has the top and bottom having 100% width but sidebar has the left and right having 100% height.

To allow the user to move the regions include data-dojo-props="liveSplitters:true" to the BorderContainer div and put data-dojo-props="splitters:true" on the regions you want to be able to resize.

Reference: http://dojotoolkit.org/reference-guide/dijit/layout/BorderContainer.html
Tests: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/BorderContainer.html

AccordionPane

Accordions can make very useful tools for menus or tools.  They are easy to set up in Dojo.  Create a div element of type diji.layout.AccordionContainer.  Nested within this create some ContentPane div elements and each will be an accordion tab.


    <div id="accordionContainer" data-dojo-type="dijit.layout.AccordionContainer">
        <div id="menuPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'Menu'">
            ...
        </div>
    </div>


Reference: http://dojotoolkit.org/reference-guide/dijit/layout/AccordionContainer.html
Tests: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/AccordionContainer.html