<zk>
    <zscript><![CDATA[
		List list = new ArrayList();
		
		for (int i = 0; i < 200; i++) {
			list.add("item " + i);
		}
		
		ListModelList model = new ListModelList(list);
		ListModelList model2 = new ListModelList(list);
		ListModelList model3 = new ListModelList(list);
		ListModelList model4 = new ListModelList(list);
		ListModelList model5 = new ListModelList(list);
		ListModelList model6 = new ListModelList(list);
    ]]></zscript>
    <hlayout>
    <grid model="${model}" height="200px" width="200px">
    	<auxhead>
    		<auxheader label="grid"/>
    	</auxhead>
    	<columns >
    		<column label="model">
    			<button label="clear" onClick="model.clear();"/>
    		</column>
    	</columns>
    </grid>
    <grid id="grid" height="200px"  width="200px">
    	<auxhead>
    		<auxheader label="grid"/>
    	</auxhead>
    	<columns >
    		<column label="comps">
    			<button label="clear" onClick="grid.getRows().getChildren().clear();"/>
    		</column>
    	</columns>
    	<rows>
    		<row forEach="${list}">${each}</row>
    	</rows>
    </grid>
    
    <listbox model="${model2}" height="200px" width="200px">
    	<auxhead>
    		<auxheader label="listbox"/>
    	</auxhead>
    	<listhead>
    		<listheader label="model">
    			<button label="clear" onClick="model2.clear();"/>
    		</listheader>
    	</listhead>
    </listbox>
    
     <listbox id="listbox" height="200px" width="200px">
    	<auxhead>
    		<auxheader label="listbox"/>
    	</auxhead>
    	<listhead>
    		<listheader label="comps">
    			<button label="clear" onClick="listbox.getItems().clear();"/>
    			<label value="not optimal yet" style="color: red;"/>
    		</listheader>
    	</listhead>
    	<listitem forEach="${list}" label="${each}"/>
    </listbox>

     <vlayout>
     	<div>
     		<button label="clear" onClick="model5.clear();" />
     		<listbox model="${model5}" mold="select" />
     		<label value="model"/>
     	</div>
     	<div>
     		<button label="clear"
     			onClick="listbox3.getItems().clear();" />
     		<listbox id="listbox3" mold="select" >
     			<listitem forEach="${list}" label="${each}"/>
     		</listbox>
     		<label value="comps"/>
     		<label value="not optimal yet" style="color: red;"/>
     	</div>
     </vlayout>



    </hlayout>
    
    
    
    
    
    <separator></separator>
    <label value="rod off" style="font-size:38px;"/>
    <hlayout>
    <grid model="${model3}" height="200px" width="200px">
    	<custom-attributes org.zkoss.zul.grid.rod="false"/>
    	<auxhead>
    		<auxheader label="grid"/>
    	</auxhead>
    	<columns >
    		<column label="model">
    			<button label="clear" onClick="model3.clear();"/>
    		</column>
    	</columns>
    </grid>
    <grid id="grid2" height="200px"  width="200px">
    	<custom-attributes org.zkoss.zul.grid.rod="false"/>
    	<auxhead>
    		<auxheader label="grid"/>
    	</auxhead>
    	<columns >
    		<column label="comps">
    			<button label="clear" onClick="grid2.getRows().getChildren().clear();"/>
    			<label value="not optimal yet" style="color: red;"/>
    		</column>
    	</columns>
    	<rows>
    		<row forEach="${list}">${each}</row>
    	</rows>
    </grid>
    
    <listbox model="${model4}" height="200px" width="200px">
    	<custom-attributes org.zkoss.zul.listbox.rod="false"/>
    	<auxhead>
    		<auxheader label="listbox"/>
    	</auxhead>
    	<listhead>
    		<listheader label="model">
    			<button label="clear" onClick="model4.clear();"/>
    		</listheader>
    	</listhead>
    </listbox>
    
     <listbox id="listbox2" height="200px" width="200px">
     	<custom-attributes org.zkoss.zul.listbox.rod="false"/>
    	<auxhead>
    		<auxheader label="listbox"/>
    	</auxhead>
    	<listhead>
    		<listheader label="comps">
    			<button label="clear" onClick="listbox2.getItems().clear();"/>
    			<label value="not optimal yet" style="color: red;"/>
    		</listheader>
    	</listhead>
    	<listitem forEach="${list}" label="${each}"/>
    </listbox>
    
    <vlayout>
     	<div>
     		<button label="clear" onClick="model6.clear();" />
     		<listbox model="${model6}" mold="select" >
     			<custom-attributes org.zkoss.zul.listbox.rod="false"/>
     		</listbox>
     		<label value="model"/>
     	</div>
     	<div>
     		<button label="clear"
     			onClick="listbox4.getItems().clear();" />
     		<listbox id="listbox4" mold="select" >
     			<custom-attributes org.zkoss.zul.listbox.rod="false"/>
     			<listitem forEach="${list}" label="${each}"/>
     		</listbox>
     		<label value="comps"/>
   			<label value="not optimal yet" style="color: red;"/>
     	</div>
     </vlayout>
    </hlayout>
</zk>