b30-1926480-1.zul

ZK是一个Ajax Java Web框架

<?xml version="1.0" encoding="UTF-8"?>

<!--
B30-1926480-1.zul

{{IS_NOTE
	Purpose:
		
	Description:
		
	History:
		Mon Mar 31 16:50:22 TST 2008, Created by jumperchen
}}IS_NOTE

Copyright (C) 2008 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
	<n:ol>
		<n:li>First of all, click the "name" header, and then the layout of grid should not be affected (the layout isn't gone).</n:li>
		<n:li>Try to click the button of "add Column to end", "add Column to first", and "delete Column", then the layout of listbox should be formal.</n:li>
	</n:ol>
	<grid id="grid" width="250px" fixedLayout="true">
		<columns sizable="true">
			<column label="name" onClick='self.label = "Header1"'
				style="border: 1px solid red;" />
			<column label="gender"/>
		</columns>
		<rows>
			<row>
				<label value="Mary" />
				<label value="FEMALE" />
			</row>
			<row>
				<label value="John" />
				<label value="MALE" />
			</row>
			<row>
				<label value="Jane" />
				<label value="FEMALE" />
			</row>
			<row>
				<label value="Henry" />
				<label value="MALE" />
		</row>
		</rows>
		<foot>
			<footer label="Footer1"/>
			<footer label="Footer2"/>
		</foot>
	</grid>
	<button label="add Column to end">
		<attribute name="onClick">
			new Column("Test").setParent(grid.getColumns());
		</attribute>
	</button>
	<button label="add Column to first">
		<attribute name="onClick">
			grid.getColumns().insertBefore(new Column("Test"), grid.getColumns().getChildren().get(0));
		</attribute>
	</button>
	<button label="delete Column">
		<attribute name="onClick">
			if (grid.getColumns().getChildren().size() > 2)
			((Column)grid.getColumns().getChildren().get(0)).detach();
			else alert("Nothing to do.");
		</attribute>
	</button>
</zk>