Synopsis
- LZX: combobox
- JavaScript: combobox
- Type: Class
- Access: public
- Topic: Components.Laszlo Components
- Declared in: lps/components/lz/combobox.lzx
Description
A combobox is a common UI element for
displaying a pop-up list associated with a text field. 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.
<canvas width="200" height="100">
<combobox id="cbox" x="5" y="5" width="130" editable="false">
<textlistitem text="Dark Blue" value="0x000055"/>
<textlistitem text="Turquoise" value="0x66dddd"/>
<textlistitem text="Light Blue" value="0xaaddff"/>
</combobox>
<view x="150" y="5" width="20" height="20"
bgcolor="${cbox.value}"/>
</canvas>
A combobox can also be populated by assigning a
datapath to a textlistitem'.
Also the number of items shown can be set with the
shownitems attribute.
<canvas width="200" height="130">
<dataset name="items">
<item value="item1">item one</item>
<item value="item2">item two</item>
<item value="item3">item three</item>
<item value="item4">item four</item>
</dataset>
<combobox x="5" y="5"
width="130"
shownitems="3"
defaulttext="choose one..." >
<textlistitem datapath="items:/item" text="$path{'text()'}"
value="$path{'@value'}"/>
</combobox>
</canvas>
Finally, a combox can also have custom items in its list by tending
the listitem class. An example of this is shown
below:
<canvas width="200" height="130">
<class name="mylistitem" extends="listitem" width="100%" height="20" >
<attribute name="text" value="" type="string"/>
<!-- place a red square in the left hand side of mylistitem -->
<view bgcolor="red" width="10" height="10" x="5" y="5"/>
<!-- constrain the text to the text attribute of listitem -->
<text x="20" text="${classroot.text}" fgcolor="0x4B4B4B">
</text>
</class>
<dataset name="items">
<item value="item1">item one</item>
<item value="item2">item two</item>
<item value="item3">item three</item>
<item value="item4">item four</item>
</dataset>
<combobox x="5" y="5"
width="130" editable="false">
<mylistitem datapath="items:/item" text="$path{'text()'}"
value="$path{'@value'}"/>
</combobox>
</canvas>
For details on how this component is constructed see the combobox section of The Component Design Guide.
A dropdown list of selectable items. Can either be editable or not.