Special Properties

The checkmark Property

The checkmark property controls whether to display a checkbox or a radio button in front of each list item.

In the following example, you will see how a checkbox is added automatically, when you move a list item from the left list box to the right one. The checkbox is removed when you move a list item from right to left.

<hbox>
    <listbox id="src" rows="0" multiple="true" width="200px">    
        <listhead>        
            <listheader label="Population"/>            
            <listheader label="Percentage"/>            
        </listhead>        
        <listitem id="a" value="A">        
            <listcell label="A. Graduate"/>            
            <listcell label="20%"/>            
        </listitem>        
        <listitem id="b" value="B">        
            <listcell label="B. College"/>            
            <listcell label="23%"/>            
        </listitem>        
        <listitem id="c" value="C">        
            <listcell label="C. High School"/>            
            <listcell label="40%"/>            
        </listitem>        
        <listitem id="d" value="D">        
            <listcell label="D. Others"/>            
            <listcell label="17%"/>            
        </listitem>        
    </listbox>    
    <vbox>    
        <button label="=&gt;" onClick="move(src, dst)"/>        
        <button label="&lt;=" onClick="move(dst, src)"/>        
    </vbox>    
    <listbox id="dst" checkmark="true" rows="0" multiple="true" width="200px">    
        <listhead>        
            <listheader label="Population"/>            
            <listheader label="Percentage"/>            
        </listhead>        
        <listitem id="e" value="E">        
            <listcell label="E. Supermen"/>            
            <listcell label="21%"/>            
        </listitem>        
    </listbox>    
    <zscript>    
void move(Listbox src, Listbox dst) {
    Listitem s = src.getSelectedItem();    
    if (s == null)    
        Messagebox.show("Select an item first");        
    else    
        s.setParent(dst);        
}
    </zscript>    
</hbox>

Notice that if the multiple property is false, the radio buttons are displayed instead, as depicted at the right.

The vflex Property

The vflex property controls whether to grow and shrink vertical to fit their given space. It is so-called vertical flexibility. For example, if the list is too big to fit in the browser window, it will shrink its height to make the whole list control visible in the browser window.

This property is ignored if the rows property is specified.

The maxlength Property

The maxlength property defines the maximal allowed characters being visible at the browser. By setting this property, you could make a narrower list box.