dijit.layout.StackContainer ¶

since:	V1.0

Contents

dijit.layout.StackContainer

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:

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

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

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

    var controller = new dijit.layout.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

dojo.require("dijit.layout.StackContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");

<button id="previous" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){dijit.byId('stackContainer').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(){dijit.byId('stackContainer').forward()}">&gt;</button>

<div data-dojo-type="dijit.layout.StackContainer" id="stackContainer">
  <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

dijit.layout.StackContainer

dijit.layout.StackContainer¶

Introduction¶

Usage¶