-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi,
Is there a way to implement a listbox scrolling-on-demand like feature on a tree?
In a ListModel, we have a getElementAt method, which we can use to load the next batch of data to load on the listbox. I would like to do the same with a tree, based on the number of level-1 nodes (the child nodes of the root node).
So, for example, I would like to load 50 level-1 nodes initially, and as the user scrolls down, load the next batch.
Is there any way this can be achieved?
José.
I use this code and work.
import org.zkoss.zk.ui.IdSpace; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.event.EventListener; import org.zkoss.zk.ui.event.Events; import org.zkoss.zk.ui.util.Clients; import org.zkoss.zul.Listbox; import org.zkoss.zul.Listhead;
public class ListBoxNew extends Listbox implements IdSpace{ private static final long serialVersionUID = 1L; private OasiListBoxLayoutModel layoutModel=null; //private boolean posizionaPiede=false; private int distEndScroll=60; private int diffPrec=0; private int diff=0; private boolean fineScroll=false; protected int posScroll=0; private int rowScroll=0; public int getRowScroll() { return rowScroll; } public void setRowScroll(int rowScroll) { this.rowScroll = rowScroll; } public void setLayoutModel(OasiListBoxLayoutModel layoutModel) {
String script = "if ((this.$n('body').scrollHeight-this.$n('body').scrollTop-this.$n('body').offsetHeight)<="+this.distEndScroll+") {zAu.send(new zk.Event(this, 'onScroll', this.$n('body').scrollLeft+','+this.$n('body').scrollTop+','+this.$n('body').scrollHeight+','+this.$n('body').offsetHeight));}this.$_doScroll();";
this.setWidgetOverride("_doScroll","function () {"+script+"}");
this.addEventListener(1,"onScroll",new EventListener<Event>()
{
public void onEvent(Event event) throws Exception
{
if ( !ListBoxNew.this.isVisible() )
{
event.stopPropagation();
return;
}
String[] arrEle=event.getData().toString().split(",");
int pos=Integer.valueOf(arrEle[1]);
int posmax=Integer.valueOf(arrEle[2]);
int posOffset=Integer.valueOf(arrEle[3]);
int diff=posmax-pos-posOffset;
ListBoxNew.this.diffPrec=ListBoxNew.this.diff;
ListBoxNew.this.diff=diff;
if ( diff>ListBoxNew.this.diffPrec )
{
ListBoxNew.this.fineScroll=false;
return;
}
else if ( diff==ListBoxNew.this.diffPrec && diff==0 ) // Parte nuova inserita da vedere se va bene
{ //
ListBoxNew.this.fineScroll=false; //
ListBoxNew.this.diff=1; //
}
if ( diff<=ListBoxNew.this.distEndScroll && ListBoxNew.this.posScroll==0 )
{
if ( !ListBoxNew.this.fineScroll )
{
ListBoxNew.this.posScroll=pos;
ListBoxNew.this.fineScroll=true;
Events.postEvent("onEndScroll", ListBoxNew.this, "up");
}
}
else
ListBoxNew.this.fineScroll=false;
}
});
this.addEventListener(1,"onAfterRender",new EventListener<Event>()
{
public void onEvent(Event event) throws Exception
{
if ( ListBoxNew.this.posScroll>0 )
{
ListBoxNew.this.renderAll();
Clients.evalJavaScript("var gridEle = document.getElementById('"+ListBoxNew.this.getUuid()+"-body"+"'); gridEle.scrollTop = "+ListBoxNew.this.posScroll+";");
ListBoxNew.this.posScroll=0;
}
if ( ListBoxNew.this.getRowScroll()>0 )
{
Clients.scrollIntoView(ListBoxNew.this.getItemAtIndex(ListBoxNew.this.getRowScroll()));
ListBoxNew.this.setRowScroll(0);
}
}
});
}
}
If you work with the mvvm technique, In the lang-addon.xml file you have to add these lines
<component>
<component-name>listboxnew</component-name>
<extends>listbox</extends>
<component-class>path1.path2. .....pathn.ListBoxNew</component-class>
</component>
and then in your zul use the new tag <listboxnew>
Asked: 2013-10-20 14:41:21 +0800
Seen: 29 times
Last updated: May 13 '17
Large Tree with dynamic columns
Tree width lost after changing col width on maximized panel
MVVM tree example to show add/insert/delete/move/drag?
Error writing 'checked' on type org.zkoss.zul.Checkbox [closed]
Problem with changing MVVM tree model
zk framework: how to load zul pages from WEB-INF under directory zul