0

Listbox autopaging and maximising screen use

asked 2012-08-21 08:16:41 +0800

danielgoodwin gravatar image danielgoodwin
76 2

updated 2012-08-21 08:17:36 +0800

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>

delete flag offensive retag edit

2 Replies

Sort by ยป oldest newest

answered 2012-09-21 03:53:00 +0800

Col gravatar image Col
135 1 6

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.

link publish delete flag offensive edit

answered 2015-10-21 15:16:48 +0800

WilliamB gravatar image WilliamB
1609 1 6

Same issue here, I get stuck with that scroll and 20 rows.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-08-21 08:16:41 +0800

Seen: 241 times

Last updated: Oct 21 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More