b35-2075760.zul

ZK是一个Ajax Java Web框架

<zk>
	 <vbox>
	 <label>on FireFox v3 with 1024x768 screen size,</label>
	 <label>1.scroll the right most slider to max,</label> 
	 <label>2.click collapse arrow,</label> 
	 <label>3.change the leftmost layout option radio box</label>
	 <label>4.expand the rightmost collapsed column. the rightmost column is overflowed by browser scroll bar
	 </label>
	 </vbox>
	<columnlayout>
		<columnchildren>
			<panel>
				<panelchildren>
					<window title="this is window" border="normal" width="148px">
						<groupbox>
							<caption label="3. modify layout" />
							<radiogroup>
								<radio label="1" selected="true">
									<attribute name="onCheck"><![CDATA[ 
        								la1.setOrient("vertical");
        								la2.setOrient("horizontal");
        							]]></attribute>
								</radio>

								<radio label="2">
									<attribute name="onCheck"><![CDATA[ 
										la1.setOrient("horizontal");
        								la2.setOrient("vertical");
       					 			]]></attribute>
								</radio>
							</radiogroup>
						</groupbox>
					</window>
				</panelchildren>
			</panel>
			<panel border="normal">
				<panelchildren>
					<box id="la1" orient="vertical">
						<button label="button 1"></button>
						<button label="button 2"></button>
						<button label="button 3"></button>
						<button label="button 4"></button>
						<button label="button 5"></button>
					
					</box>
				</panelchildren>
			</panel>
			<panel border="normal">
				<panelchildren>
					<box id="la2" orient="horizontal">
						<button label="button 6"></button>
						<button label="button 7"></button>
					</box>
				</panelchildren>
			</panel>
		</columnchildren>
		 
		<columnchildren width="300px">
			<panel title="middle column" border="normal" collapsible="true">
				<panelchildren>
						<grid>
							<columns sizable="true" menupopup="auto">
								<column label="Type" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}" />
								<column label="Content" />
							</columns>
							<rows>
								<row>
									<label value="File:" />
									<textbox width="98%" />
								</row>
								<row>
									<label value="Type:" />
									<hbox>
										<listbox rows="1" mold="select">
											<listitem label="Java Files,(*.java)" />
											<listitem label="All Files,(*.*)" />
										</listbox>
										<button label="Browse..." />
									</hbox>
								</row>
								<row>
									<label value="Options:" />
									<textbox rows="3" width="98%" />
								</row>
							</rows>
						</grid>
				</panelchildren>
			</panel>
			<panel title="middle buttom column" border="normal" collapsible="true">
				<panelchildren>
					<window title="Grid Demo with Group" border="normal" width="100%">
						<grid>
							<columns sizable="true">
								<column label="Type" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}" />
								<column label="Content" />
							</columns>
							<rows>
								<group>
									<label value="Group1: type" />
									<label value="Group1: content" />
								</group>
								<row>
									<label style="padding-left:15px" value="File:" />
									<textbox width="98%" />
								</row>
								<row>
									<label style="padding-left:15px" value="Type:" />
									<hbox>
										<listbox rows="1" mold="select">
											<listitem label="Java Files,(*.java)" />
											<listitem label="All Files,(*.*)" />
										</listbox>
										<button label="Browse..." />
									</hbox>
								</row>
								<group label="Group 2" open="false" />
								<row>
									<label style="padding-left:15px" value="Options:" />
									<textbox rows="3" width="98%" />
								</row>
								<groupfoot spans="2">
									<label value="This a summary about Group 2" />
								</groupfoot>
							</rows>
						</grid>
					</window>
				</panelchildren>
			</panel>
		</columnchildren>
		 
		 
		<columnchildren>
			<panel border="normal" title="2.&amp; 4. collapse button" collapsible="true">
				<panelchildren>
					<label>1.scroll to max.</label>
					<slider id="slider1" curpos="50" onScroll="zoom(slider1, img1)" />
					<image id="img1" src="/img/sun.jpg" width="${slider1.curpos*3+10}px" />
					<zscript><![CDATA[
					//@DECLARARTION        	                  
					void zoom(Slider slider, Image img) {
						int v = slider.getCurpos();
						img.setWidth((v*3 + 10) + "px");
					}
	  ]]></zscript>
				</panelchildren>
			</panel>
			<panel title="listbox" border="normal">
				<panelchildren>
					<vbox>
						<listbox rows="1" mold="select">
							<listitem label="option1" />
							<listitem label="option2" />
							<listitem label="option3" />
						</listbox>

						<listbox width="200px">
							<listhead sizable="true">
								<listheader label="name" sort="auto" />
								<listheader label="gender" sort="auto" />
							</listhead>
							<listitem>
								<listcell label="Mary" />
								<listcell label="FEMALE" />
							</listitem>
							<listitem>
								<listcell label="John" />
								<listcell label="MALE" />
							</listitem>
							<listitem>
								<listcell label="Jane" />
								<listcell label="FEMALE" />
							</listitem>
							<listitem>
								<listcell label="Henry" />
								<listcell label="MALE" />
							</listitem>
						</listbox>
					</vbox>
				</panelchildren>
			</panel>
		</columnchildren>
		
	</columnlayout>
</zk>