-
FEATURED COMPONENTS
First time here? Check out the FAQ!
ZK 6.02
I have an app layout based mainly on the excellent zksample2 example ZK application. (Many thanks).
I am however trying to change the screen layout to use autopaging so that the different size screens have the maximum rows in a listbox. (The example code is below.. )
I have a window with a listbox with auto paging, which becomes 20 on each render no matter what size of screen. This is leading to scrolling to see the rows on a smaller screen and on larger screens, not all the screen is used.
Im guessing this is because the listbox is not getting any other sizing criteria (because of vflex settings) but I want the layout to change size automatically without hardcoding sizes of panels.
Any pointers are welcome.
While the real example is java based, Ive reproduced it here in zul (with small bit of java code (BigList) from demo site)
Full Example code..
<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"> <window border="none" vflex="true" hflex="true"> <style> .z-listbox-autopaging .z-listcell-cnt { height: 15px; overflow: hidden; } </style> <borderlayout vflex="true"> <north border="none" vflex="min"> <div height="25px" width="100%"> </div> </north> <center border="none" margins="0,0,0,0" hflex="true" vflex="min" autoscroll="true"> <div > <groupbox > <caption label="CCCCCCC" ></caption> <tabbox width="100%" style="padding: 0px"> <tabs> <tab label="Tab1"></tab> </tabs> <tabpanels> <tabpanel vflex="min" style="overflow:auto;padding:0 0px;"> <!--=============================================== Included window ===================================================--> <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"> <!--=========================== See http://www.zkoss.org/zkdemo/listbox/paging for BigList Code. import java.util.AbstractList; public class BigList extends AbstractList<Integer> { private int _sz; public BigList(int sz) { if (sz < 0) throw new IllegalArgumentException("Negative not allowed: " + sz); _sz = sz; } public int size() { return _sz; } public Integer get(int j) { return Integer.valueOf(j); } } ============================ --> <zscript><![CDATA[ List items = new BigList(1000); //a big list of Integer ]]></zscript> <window id="incWindow" border="none" hflex="true" vflex="min"> <panel title="inpanel" border="none" ></panel> <hbox align="stretch" pack="stretch" width="100%"> <cell> <vbox align="stretch" pack="stretch" width="100%"> <div > <listbox hflex="true" multiple="false" mold="paging" pagingPosition="top" autopaging="true" > <listhead sizable="true"> <listheader hflex="1" label="col1" ></listheader> <listheader hflex="1" label="col2" ></listheader> <listheader hflex="1" label="col3" ></listheader> <listheader hflex="1" label="col4" ></listheader> </listhead> <listitem forEach="${items}"> <listcell label="${each}-1" ></listcell> <listcell label="${each}-2" ></listcell> <listcell label="${each}-3" ></listcell> <listcell label="${each}-4" ></listcell> </listitem> </listbox> </div> </vbox> </cell> </hbox> </window> </zk> <!--=============================================== END Included window ===================================================--> </tabpanel> </tabpanels> </tabbox> </groupbox> </div> </center> <south border="none" margins="1,0,0,0" height="25px" hflex="true"> <div id="divSouth"> </div> </south> </borderlayout> </window> </zk>
I'm likewise going through this process and banging my head against the wall trying to get the planets to align to achieve all the functionality I'm after. So although I can't give you a solution I will suggest adding vflex="true' to your listbox. Hopefully this gets you one step closer to your solution anyway.
Asked: 2012-08-21 08:16:41 +0800
Seen: 241 times
Last updated: Oct 21 '15