Skip to Content | Skip to Navigation


dijit/layout/StackContainer

since:V1.0

A container that has multiple children, but shows only one child at a time (like looking at the pages in a book one by one).

Introduction

This container is good for wizards, slide shows, and long lists or text blocks.

Usage

var foo = new dijit.layout.StackContainer(params, srcNodeRef);
parameters:
parameter type description
params object Optional.
srcNodeRef DomNode|String  

Set the current pane

StackContainer’s current pane can be set via the selectChild() method, or it can be controlled from a StackController. StackController is a controller not in the MVC send of the word, but like a TV remote control: it sets which page the StackController is tuned to.

Retrieving the currently selected Container

To retrieve the currently selected container use following attribute

var selectedContainer = yourContainer.selectedChildWidget

yourContainer has to be a reference (for example: dijit.byId(“myStackContainer”)) to the ContainerWidget, meaning the StackContainer or any widgets inheriting from StackContainer

Set the size of the pane

doLayout=”false” sets the size of the StackContainer to the size of his child panes.

Published topics

StackContainer publishes topics

  • [widgetId]-addChild,
  • [widgetId]-removeChild, and
  • [widgetId]-selectChild.

Examples

Programmatic example

Here’s an example of a programmatically created StackContainer, and associated StackController:

require(["dojo/ready", "dijit/layout/StackContainer", "dijit/layout/ContentPane", "dijit/layout/StackController"], function(ready, StackContainer, ContentPane, StackController){
    ready(function(){
        var sc = new StackContainer({
            style: "height: 300px; width: 400px;",
            id: "myProgStackContainer"
        }, "scontainer-prog");

        var cp1 = new ContentPane({
            title: "page 1",
            content: "page 1 content"
        });
        sc.addChild(cp1);

        var cp2 = new ContentPane({
            title: "page 2",
            content: "page 2 content"
        });
        sc.addChild(cp2);

        var controller = new StackController({containerId: "myProgStackContainer"}, "scontroller-prog");

        sc.startup();
        controller.startup();
    });
});

The HTML is very simple

<div id="scontainer-prog"></div>
<div id="scontroller-prog"></div>

Declarative example

Here you will see a declaratively created StackContainer

require(["dojo/parser", "dijit/layout/StackContainer", "dijit/layout/StackController", "dijit/layout/ContentPane", "dijit/form/Button"]);
<button id="previous" data-dojo-type="dijit/form/Button" data-dojo-props="onClick:function(){myStackContainer.back()}">&lt;</button>
    <span data-dojo-type="dijit/layout/StackController" data-dojo-props="containerId:'stackContainer'"></span>
<button id="next" data-dojo-type="dijit/form/Button" data-dojo-props="onClick:function(){myStackContainer.forward()}">&gt;</button>

<div data-dojo-type="dijit/layout/StackContainer" data-dojo-id="myStackContainer">
    <div data-dojo-type="dijit/layout/ContentPane" title="Questions">
        Please answer following questions
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="Answers">
        Here is what you should have answered :P
    </div>
</div>
#stackContainer {
    border: 1px solid #ccc;
    margin-top: 10px;
}

#stackContainer div {
    padding: 5px;
}

Accessibility

Keyboard

Action Key
Navigate to next tab button Right arrow
Navigate to previous tab button Left arrow
Navigate into page Tab
Navigate to next page Ctrl + page down, ctrl + tab (except IE7)
Navigate to previous page Ctrl + page up