djStackContainer - Dojo Stack Container

Contains panes stacked on top of each other.

Category

Extension Library

Syntax

<xe:djStackContainer attributes>content</xe:djStackContainer>
Table 1. Essential properties
Property Description
id Defaults to djStackContainer1, djStackContainer2, and so on.
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
basics binding, dir, doLayout, id, lang, loaded, persist, rendered, rendererType, selectedTab
dojo dojoAttributes, dojoType, dragRestriction, tooltip
events onBlur, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A StackContainer control holds StackPane controls stacked top to bottom in the order of definition.

This control is not tested against the latest accessibility standards. The recommended accessible path is the Panel control.

Examples

This example shows three Stack Pane controls inside a Stack Container control. A button toggles the value of a scoped variable. The first two stack panes are visible depending on the variable value. When the top pane is not visible, the second pane is seen. When the top two panes are not visible, the third pane is seen.
<xp:button value="toggle" id="button1">
	<xp:eventHandler event="onclick" submit="true"
		refreshMode="complete">
		<xp:this.action><![CDATA[#{javascript:switch(sessionScope.dbinfo) {
case "path" : sessionScope.dbinfo = "created"; break;
case "created" : sessionScope.dbinfo = "title"; break;
default : sessionScope.dbinfo = "path";}}]]>
		</xp:this.action>
	</xp:eventHandler>
</xp:button>
<xe:djStackContainer id="djStackContainer1">
	<xe:djStackPane id="djStackPane1">
		<xe:this.rendered>
			<![CDATA[#{javascript:sessionScope.dbinfo == null || sessionScope.dbinfo == "title"}]]>
		</xe:this.rendered>
		<xp:text escape="true" id="computedField1"
			value="#{javascript:database.getTitle()}">
		</xp:text>
	</xe:djStackPane>
	<xe:djStackPane id="djStackPane2">
		<xe:this.rendered>
			<![CDATA[#{javascript:sessionScope.dbinfo == "path"}]]>
		</xe:this.rendered>
		<xp:text escape="true" id="computedField2"
			value="#{javascript:database.getFilePath()}">
		</xp:text>
	</xe:djStackPane>
	<xe:djStackPane id="djStackPane3">
		<xp:text escape="true" id="computedField3"
			value="#{javascript:database.getCreated().getLocalTime()}">
		</xp:text>
	</xe:djStackPane>
</xe:djStackContainer>