z30-listbox-0013.zul

ZK是一个Ajax Java Web框架

<zk>
 You should see the layout of the complex listbox shows properly.
        <separator/>
        Won,t fixed: The content of auxheader "A+B" is cut to half.(Safari only)
	<window id="win" title="test VFlex!!" sizable="true"
		width="600px" height="350px" border="normal">
		<caption>
			<button label="test Selected Items" onClick="findSelected()"/>
		</caption>
		<zscript><![CDATA[
			import java.util.ArrayList;
			ArrayList list = new ArrayList();
			
			for(int i=1;i<=20;i++)
			{
				list.add(new String[] {"name"+i, i%2==1?"Male":"Female",""+i,"addr"+i});
			}
			
			void findSelected()
			{
				items = libox.getSelectedItems();
				alert("items: "+items.size());
			}
			
		]]></zscript>
		
		<listbox id="libox" width="100%" multiple="true" vflex="true">
			<listhead  sizable="true">
				<listheader label="Name" sort="auto" width="25%" image="/img/coffee.gif"/>
				<listheader label="Gender" sort="auto" width="25%" image="/img/folder.gif"/>
				<listheader label="Age" sort="auto" width="25%" align="center" image="/img/cubfirs.gif"/>
				<listheader label="Description" width="25%" sort="auto" image="/img/home.gif"/>
			</listhead>
			<auxhead>
				<auxheader label="All Header" style="font-weight:bold; color:red;" align="center" colspan="4"/>
			</auxhead>
			<auxhead>
				<auxheader label="A+B" rowspan="2" colspan="2"/>
				<auxheader label="C"/>
				<auxheader label="DE" />
			</auxhead>	
			<auxhead>
				<auxheader label="A"/>
				<auxheader label="B+C+D"/>
			</auxhead>
			<auxhead>
				<auxheader label="A+B+C"  colspan="3"/>
				<auxheader label="D"/>
			</auxhead>
			<listitem forEach="${list}">
				<listcell label="${each[0]}"/>
				<listcell label="${each[1]}"/>
				<listcell label="${each[2]}"/>
				<listcell label="${each[3]}"/>
			</listitem>
		</listbox>
	</window>
</zk>