Combobox

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 Using the Laszlo Components chapter of the Guide.

Copyright © 2002-2005 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.

<combobox>

Methods