Home > Class Reference > ENSLIB namespace > %ZEN.Component.toolbar
Private  Storage   


class %ZEN.Component.toolbar extends component, dataView

Implements a simple HTML5 toolbar component.
This is an HTML5 component; it will only correctly run on HTML5 compliant browsers. A toolbar can show drop down menu choice, tabs, messages, choice boxes and other items. It is controlled by a JSON data model.


Parameters Properties Methods Queries Indices ForeignKeys Triggers
2 8 16


%condition %controller %import %includeFiles
%page %resource align aux
composite containerStyle controller controllerId
dragEnabled dropEnabled enclosingClass enclosingStyle
error height hidden hint
hintClass hintStyle id imageStyle
index label labelClass labelDisabledClass
labelStyle name onafterdrag onbeforedrag
onchange ondrag ondrop ongetdata
onhide onnotifyView onpagechange onrefresh
onselect onshow onupdate parent
scrollOffset selectedIndex showLabel slice
style title tuple valign
visible width window

%AddToSaveSet %Attr %BindExport %ClassIsLatestVersion
%ClassName %ConstructClone %DispatchClassMethod %DispatchGetModified
%DispatchGetProperty %DispatchMethod %DispatchSetModified %DispatchSetMultidimProperty
%DispatchSetProperty %DrawComponentHTML %DrawHTML %DrawJSStrings
%EnclosingDivId %Eval %EvalC %Extends
%ForceClientRender %GetEventHandlers %GetParameter %GetXMLName
%IsA %IsModified %MakeId %New
%NormalizeObject %ObjectModified %OnAddToPageAfter %OnAddToPageBefore
%OnDrawEnclosingDiv %OnDrawObjectProperties %OnObjectSynch %OnZENDeserialize
%OriginalNamespace %PackageName %QuoteValue %QuoteValueL10N
%RemoveFromSaveSet %Self %SerializeObject %SetModified
%ValidateObject XMLDTD XMLExport XMLExportToStream
XMLExportToString XMLNew XMLSchema XMLSchemaNamespace
XMLSchemaType choiceClick controlChange controlFocus
controlKeyPress dragFinishHandler dragHandler dragNotifyHandler
dragStartHandler dropHandler dropStartHandler exposeComponent
findElement fireOnUpdateEvent getController getEnclosingDiv
getHidden getHintElement getLabelElement getModel
getPagingHTML getProperty getSettings getTopItemHTML
getType hideAll invokeSuper isOfType
makeId menuActionHandler menuClickHandler onCreate
onDelete onDisplayHandler onEndModalHandler onPopupAction
onRefreshContents onSerialize onStartModalHandler onloadHandler
onunloadHandler onupdateHandler pageChangeHandler refreshContents
render renderContents renderSVG scrollClickHandler
selectTab sendEventToController setControllerId setHidden
setOverlayMode setProperty setWidth startProgressBar


• parameter DEFAULTENCLOSINGCLASS = "ztb-menu";
Subclasses can set this to change default enclosingClass used for this component.
• parameter SYSMODULE;
Do not include in "form" module.


• property imageStyle as %ZEN.Datatype.style;
Additional style to apply to images in the menu.
Use this to change the size of images.
• property onchange as %ZEN.Datatype.eventHandler;
onchange event handler: Notification that a control within the toolbar (such as a "choice") has changed value. This event is passed 3 arguments: key, value, and final. final is true when a value is finished changing.
• property ongetdata as %ZEN.Datatype.eventHandler;
ongetdata event handler: If defined, this event is returns an array of items to be displayed within the menu.
• property onpagechange as %ZEN.Datatype.eventHandler;
onpagechange event handler: If defined, this event is fired when the user selects a new page number from a "pages" item. This is passed: key and page (selected page, 1-based). from the data element associated with the menu choice.
• property onselect as %ZEN.Datatype.eventHandler;
onselect event handler: If defined, this event is fired when the user clicks on a item within the menu. This is passed: key, action, and targetId from the data element associated with the menu choice.
• property scrollOffset as %ZEN.Datatype.integer [ InitialExpression = 0 ];
Index (0-based) first top-level item to display when scrolled.
• property selectedIndex as %ZEN.Datatype.integer [ InitialExpression = -1 ];
Index (0-based) of selected item within the top-level menu.
• property style as %ZEN.Datatype.style;
Additional style to apply to items in the menu.


• method choiceClick(evt, index, choiceNo, newValue) [ Language = javascript ]
Mouse click handler for choice control.
• method controlChange(id, index) [ Language = javascript ]
Change handler for text control.
• method controlFocus(id) [ Language = javascript ]
Focus handler for text control.
• method controlKeyPress(evt, id, index) [ Language = javascript ]
Key press handler for text control.
• method getModel() [ Language = javascript ]
Get the model used to drive the menu.
• method getPagingHTML(index, pageNo) [ Language = javascript ]
GetHTML for a "page" item.
• method getTopItemHTML(info, index) [ Language = javascript ]
Get HTML for one top-level menu item.
• method hideAll() [ Language = javascript ]
Hide all dropdowns
• method menuActionHandler(itemId, type, key, action, targetId) [ Language = javascript ]
Action handler for menu item.
• method menuClickHandler(evt, type, id, key, action, targetId) [ Language = javascript ]
User click on a menu item.
• method pageChangeHandler(evt, itemId, key, page) [ Language = javascript ]
Click handler for paging item.
• method renderContents() [ Language = javascript ]
Client-side method to render this component.
• method scrollClickHandler(evt, which) [ Language = javascript ]
User click on scroll button.
• method selectTab(key) [ Language = javascript ]
Select a tab item given its key.
• method setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.
• method setWidth(width) [ Language = javascript ]
Set the width (in pixels) of this component.