djextImageSelect - Dojo Image Select

Accepts a value based on a selected image.

Category

Dojo Form

Syntax

<xe:djextImageSelect attributes>content</xe:djextImageSelect>
Table 1. Essential properties
Property Description
id Defaults to djextImageSelect1, djextImageSelect2, and so on.
value Binds the control to a data element.
imageValues Specifies the images.
Table 2. All properties
Category Properties
accessibility alt, tabIndex, title, waiRole, waiState
basics autoComplete, binding, dir, disabled, id, imageValues, immediate, lang, loaded, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, type
data converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events onBlur, onChange, 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.

At run time, images appear. The user can select one which causes the value to be set.

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

Examples

This example consists of an Image Select control bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.
<xp:table>
	<xp:tr>
		<xp:td>Image Select</xp:td>
		<xp:td>
			<xe:djextImageSelect id="djextImageSelect1"
				value="#{sessionScope.djextImageSelect1}">
				<xe:this.imageValues>
					<xe:selectImage image="/folder.gif"
						selectedValue="folder" selectedImage="/folder.gif">
					</xe:selectImage>
					<xe:selectImage image="/link.gif"
						selectedImage="/link.gif" selectedValue="link">
					</xe:selectImage>
					<xe:selectImage image="/binary.gif"
						selectedImage="/binary.gif" selectedValue="binary">
					</xe:selectImage>
				</xe:this.imageValues>
			</xe:djextImageSelect>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td></xp:td>
		<xp:td>
			<xp:button value="submit" id="button1"><xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true"></xp:eventHandler></xp:button></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td>
			<xp:text escape="true" id="computedField1"
				value="#{sessionScope.djextImageSelect1}">
			</xp:text>
		</xp:td>
	</xp:tr>
</xp:table>