Dojo: The Definitive Guide

StackContainer

A StackContainer is a layout dijit that displays a sequence of tiles one at a time. A StackContainer is conceptually just like a slideshow in which you can page backward and forward through a "stack" of tiles. Like LayoutContainer, you provide any number of child widgets to the StackContainer, and it takes care of the display. In its most basic usage, you simply page through the available tiles, as shown in Example 14-4.

Example 14-4. Creating a StackContainer in markup

<div id="stack" dojoType="dijit.layout.StackContainer"
  style="width:100px; height:100px; margin:5px; border:solid 1px;">

    <div dojoType="dijit.layout.ContentPane">
        One fish...
    </div>
    <div dojoType="dijit.layout.ContentPane">
        Two fish...
    </div>
    <div dojoType="dijit.layout.ContentPane">
        Red fish...
    </div>
    <div dojoType="dijit.layout.ContentPane">
        Blue fish...
    </div>

</div>

<button dojoType="dijit.form.Button">&lt;
    <script type="dojo/method" event="onClick" args="evt">
        dijit.byId("stack").back(  );
    </script>
</button>

<button dojoType="dijit.form.Button">&gt;
    <script type="dojo/method" event="onClick" args="evt">
        dijit.byId("stack").forward(  );
    </script>
</button>

The usual container and generic layout methods apply to StackContainer; additionally, you should also note the features in Table 14-6.

Table 14-6. StackContainer API

Name (default)	Type	Comment
doLayout	Boolean	Used to change the size of the currently displayed child to match the container's size. true by default.
selectedChildWidget	Object	References the ...