djStackPane - Dojo Stack Pane

Provides content for one pane in a stack container.

Category

Extension Library

Syntax

<xe:djStackPane attributes>content</xe:djStackPane>
Table 1. Essential properties
Property Description
id Defaults to djStackPane1, djStackPane2, and so on.
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
basics binding, dir, errorMessage, extractContent, href, id, lang, loaded, loadingMessage, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType
dojo dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A Stack Container control holds Stack Pane 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>