A combination box or "combobox" is a common UI element for displaying a pop-up list associated with a text field.
OpenLaszlo includes two variants of the combobox:
<combobox>has list items defined inline.<datacombobox>, has list items determined by a dataset, which may be local or remote.
The selected
text of the combobox is displayed within the text field. This field
is an LzInputText field if the
editable of the combobox is true
(the default), or a static LzText field if it
is false.
The number of items shown in the combobox can be set using the
shownitems attribute. If there are more items
available than are shown, a scrollbar will be created
automatically.
The list of items in a combobox can be created explicity using the
<textlistitem> tag with assigned
text and value
attributes.
Example 55. simple datacombobox
<canvas bgcolor="#EAEAEA" height="200">
<include href="lz/datacombobox.lzx"/>
<dataset name="items">
<item value="item0">item 0</item>
<item value="item1">item 1</item>
<item value="item2">item 2</item>
<item value="item3">item 3</item>
<item value="item4">item 4</item>
<item value="item5">item 5</item>
<item value="item6">item 6</item>
<item value="item7">item 7</item>
<item value="item8">item 8</item>
<item value="item9">item 9</item>
<item value="item10">item 10</item>
<item value="item11">item 11</item>
</dataset>
<view x="20" y="20">
<simplelayout/>
<text> local data, defaulttext="choose one.." </text>
<datacombobox id="cbox1" width="130" shownitems="6" defaulttext="Choose One..." itemdatapath="items:/item"/>
</view>
</canvas>
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
menuclassname
|
string | String | floatinglist | read/write |
Attributes inherited from <basedatacombobox>
defaulttext, ismenu, isopen, itemclassname, itemdatapath, listattach, listwidth, menuclassname, selected, selectfirst, shownitems, statictext, textdatapath, value, valuedatapath
Attributes inherited from <baseformitem>
changed, ignoreform, rollbackvalue, submit, submitname, value
Attributes inherited from <basecomponent>
doesenter, enabled, hasdefault, isdefault, style, styleable, text
Attributes inherited from <view>
aaactive, aadescription, aaname, aasilent, aatabindex, align, backgroundrepeat, bgcolor, cachebitmap, capabilities, clickable, clickregion, clip, colortransform, context, contextmenu, cornerradius, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hasdirectionallayout, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, shadowangle, shadowblurradius, shadowcolor, shadowdistance, showhandcursor, source, stretches, subviews, tintcolor, totalframes, unstretchedheight, unstretchedwidth, usegetbounds, valign, visibility, visible, width, x, xoffset, xscale, y, yoffset, yscale
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods inherited from <basedatacombobox>
doSetChanged, doSetValue, getItemIndex, getValue, selectItem, selectItemAt, setOpen, toggle
Methods inherited from <baseformitem>
commit, destroy, findForm, init, rollback, setChanged, setValue, toXML
Methods inherited from <basecomponent>
acceptValue, doEnterDown, doEnterUp, doSpaceDown, doSpaceUp, presentValue, setStyle, setTint, updateDefault
Methods inherited from <view>
bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getCurrentTime, getDepthList, getDisplayObject, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, isBehind, isInFrontOf, isMouseOver, measureHeight, measureWidth, play, proxyurl, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAccessible, setAttributeRelative, setColor, setColorTransform, setPan, setProxyPolicy, setSource, setVolume, shouldYieldFocus, stop, unload, updateResourceSize
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events
Events inherited from <view>
onaddsubview, onbackgroundrepeat, onblur, onclick, onclickable, onclip, oncontext, oncornerradius, ondblclick, onerror, onfocus, onframe, onframesloadratio, ongesture, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmousetrackout, onmousetrackover, onmousetrackup, onmouseup, onmouseupoutside, onopacity, onplay, onplaying, onremovesubview, onshadowangle, onshadowblurradius, onshadowcolor, onshadowdistance, onstop, ontimeout, ontouch, onvisible, onwidth, onx, ony