z35-columnlayout-0002.zul

ZK是一个Ajax Java Web框架

<zk xmlns="http://www.zkoss.org/2005/zul"
	xmlns:h="http://www.w3.org/1999/xhtml" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<vbox>
<label value="Orginally, three columns are 50%,20%,30% in width;" />
<label value="Use setWidth() in zscript caused the rightmost column been pushed down to next line." />
</vbox>
<zscript><![CDATA[ 
//@IMPORT
import org.zkoss.zkmax.zul.Columnchildren;
                  ]]></zscript>
<hbox>                  
<button id="modify" label="1. adjust width to 20%,20%,30%">
			<attribute name="onClick"><![CDATA[ 
			       
			        cLef.setWidth("20%");
			        cMid.setWidth("20%");
			        cRig.setWidth("30%");
			     
			                        ]]>
			</attribute>
			</button>
			<button id="remove" label="2. set back to 50%,20%,30%">
			<attribute name="onClick"><![CDATA[ 
			                                   
					cLef.setWidth("50%");
					cMid.setWidth("20%");
					cRig.setWidth("30%");                           
								     
			                        ]]>
			</attribute>
			</button>
</hbox>            
<columnlayout id="cLay">
		<columnchildren id="cLef" width="50%" style="padding: 5px">
			<panel height="100px" style="margin-bottom:10px"
				title="column1-1" border="normal" maximizable="true"
				collapsible="true">
				<panelchildren>Panel</panelchildren>
			</panel>
			<panel height="100px" framable="true" title="column1-2"
				border="normal" maximizable="true" style="margin-bottom:10px">
				<panelchildren>Panel</panelchildren>
			</panel>
			<panel height="100px" title="column1-3" border="normal"
				closable="true">
				<panelchildren>Panel</panelchildren>
			</panel>
					
						
		</columnchildren>

		<columnchildren id="cMid" width="20%" style="padding: 5px">
			<panel height="400px">
				<panelchildren>
					<borderlayout height="100%" width="100%">
						<north maxsize="300" size="50%" border="0"
							splittable="true" collapsible="true">
							<borderlayout>
								<west size="25%" border="none"
									flex="true" maxsize="250" splittable="true"
									collapsible="true">
									<div style="background:#B8D335">
										<label value="25%"
											style="color:white;font-size:30px" />
									</div>
								</west>
								<center border="none" flex="true">
									<div style="background:#E6D92C">
										<label value="25%"
											style="color:white;font-size:30px" />
									</div>
								</center>
								<east size="50%" border="none"
									flex="true">
									<label value="Here is a non-border"
										style="color:gray;font-size:30px" />
								</east>
							</borderlayout>
						</north>
						<center border="0">
							<borderlayout>
								<west maxsize="600" size="30%"
									flex="true" border="0" splittable="true">
									<div style="background:#E6D92C">
										<label value="30%"
											style="color:white;font-size:30px" />
									</div>
								</west>
								<center>
									<label value="Here is a border"
										style="color:gray;font-size:30px" />
								</center>
								<east size="30%" flex="true" border="0"
									collapsible="true">
									<div style="background:#B8D335">
										<label value="30%"
											style="color:white;font-size:30px" />
									</div>
								</east>
							</borderlayout>
						</center>
					</borderlayout>
				</panelchildren>
			</panel>
		</columnchildren>

		<columnchildren id="cRig" width="30%" style="padding: 10px">
			<panel title="Data" framable="true" border="normal"
				style="margin-bottom:10px">
				<panelchildren>
					<grid>
						<columns>
							<column label="category" />
							<column label="value" />
						</columns>
						<rows>
							<row>
								<label id="c0" value="C/C++" />
								<decimalbox id="v0" value="21.2"
									constraint="no empty" onChange="update(0)" />
							</row>
							<row>
								<label id="c1" value="VB" />
								<decimalbox id="v1" value="10.2"
									constraint="no empty" onChange="update(1)" />
							</row>
							<row>
								<label id="c2" value="Java" />
								<decimalbox id="v2" value="40.4"
									constraint="no empty" onChange="update(2)" />
							</row>
							<row>
								<label id="c3" value="PHP" />
								<decimalbox id="v3" value="28.2"
									constraint="no empty" onChange="update(3)" />
							</row>
						</rows>
					</grid>
				</panelchildren>
			</panel>
			<panel border="normal">
				<panelchildren>
					<checkbox label="3D Chart" checked="true"
						onCheck="mychart.setThreeD(self.isChecked())" />
					<chart id="mychart" title="Pie Chart Demo" width="300px"
						type="pie" threeD="true" fgAlpha="128">
						<attribute name="onClick">
							String areaid = event.getArea(); if (areaid
							!= null) { Area area =
							self.getFellow(areaid);
							alert(""+area.getAttribute("entity")+":"+area.getTooltiptext());
							}
						</attribute>
						<zscript><![CDATA[ 
							void update(int rowIndex) { Label lb =
							(Label) self.getFellow("c"+rowIndex);
							Decimalbox db = (Decimalbox)
							self.getFellow("v"+rowIndex);
							model.setValue(lb.value, new
							Double(db.getValue().doubleValue())); }

							PieModel model = new SimplePieModel();
							for(int j=0; j < 4; ++j) { update(j); }
							mychart.setModel(model);
							 ]]></zscript>
					</chart>
				</panelchildren>
			</panel>
		</columnchildren>
	</columnlayout>
</zk>