ZK - Open Source Ajax Java Framework
|
how to auto scroll listbox scrolling bottom
Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4563430
By: alexdusty
I've a similar problem (at least I suppose): I'm dinamically adding rows to a grid and when the visible part is full the scrollbar appears on the grid but I'm unable to programmatically show the last row. i.e.: I always see the first N rows and I have to scroll down manually to see the new ones added.
Is the problem solvable?
Is there a programmatic way to bring the last row in the grid visible?
Thanks.
you can try
index.zul
<window border="normal" apply="ctrl.MyCtrl"> <grid height="50px"> <rows id="rows" /> </grid> <button label="add" id="addBtn" /> </window>
MyCtrl.java
package ctrl;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.*;
public class MyCtrl extends GenericForwardComposer {
private Rows rows;
private static int count=0;
@Override
public void doAfterCompose(Component comp) throws Exception {
// TODO Auto-generated method stub
super.doAfterCompose(comp);
}
public void onClick$addBtn(){
count++;
Row row =new Row();
row.appendChild(new Label("new"+count));
row.setParent(rows);
Clients.scrollIntoView(row);
}
}
//jimmy
Thank you, Jimmy. It works great! :)
Grazie 1000 jimmy
your post was be very useful to me too!
fds
It was very useful for me too!
I'm using the Clients.scrollIntoView to scroll into a div because I am developing a AJAX chat.
Thanks
Ciao Jimmy,
Clients.scrollIntoView() seems does not work properly with Google Chrome (my test is with version 16.0.912.75 m).
My VBOX does not scroll down after that a new item was added.
Instead on Firefox,Opera and Explorer everything's gone ok.
Any suggestion is appreciated!
thanks
fds
Hi fds,
can you post your sample?
Ciao Jimmy,
... I want to thank you for your disponibility... but maybe I found the solution ... I have read in forum that with zk ver 5.0.4 has been introduced the "vlayout" element ... maybe it's the solution. I currently use a vbox with zk ver 5.0.1
grazie
fds
Ciao Jimmy,
during activity porting from zk ver 5.0.1 to zk ver 5.0.10
I had to intervene on all layout element (window etc) because they have changed shape and size.
why? I've done something wrong?
how can i avoid this extra-effort?
grazie
fds
We fixed a lot of layout(flex) issue , so some of UI could be change the size, can you provide some sample, and I will check the sample and fix it.
Ciao Jimmy,
thank you for your reply.
<?page contentType="text/html;charset=UTF-8"?>
<zk>
<window title=" Crea Nuova Pratica" id="winApriPratica" border="normal"
mode="modal" apply="fds.melajo.zkdelegate.zkPages.studioLegale.GestisciPraticaNuovaZK"
maximizable="false" width="430px" height="125px">
<caption image="/icone/folder_add.png" ></caption>
<grid fixedLayout="true" id="inserimento">
<columns>
<column align="left" width="30%" />
<column align="left" width="70%" />
</columns>
<rows >
<row>
Descrizione <textbox id="desrizioneApriPratica" constraint="no empty"/>
</row>
<row>
Contesto <combobox id="oggettoApriPratica" readonly="true" autocomplete="true" autodrop="true" buttonVisible="false" width="90%" constraint="no empty"></combobox>
</row>
<row spans="2">
<div align="center">
<hbox>
<button id="apriPratica"
label="Procedi"
forward="onClick=winApriPratica.onNuovaPratica_ZK">
</button>
<button id="chiudiRicerca" label="Chiudi"
forward="winApriPratica.onChiudiPopUpApri_ZK">
</button>
</hbox>
</div>
</row>
</rows>
</grid>
<separator />
<grid fixedLayout="true" id="sceltaUlteriore" visible="false">
<rows >
<row spans="2" align="center">
<label value="Esiste già una pratica con stessa descrizione/contesto:" style="color:#FF0000" />
</row>
<row>
Procedi comunque
<div align="center">
<button id="apriNuovaPratica" label="Nuova" forward="winApriPratica.onNuovaPraticaCmq_ZK" width="60px">
</button>
</div>
</row>
<row spans="2">
<groupbox mold="3d" contentStyle="height:150px;overflow:scroll" width="100%" >
<listbox id="box" rows="0">
<listhead sizable="true">
<listheader label="ID"
width="60%" sort="auto" align="left"/>
<listheader label="Anteprima"
width="20%" align="center"/>
<listheader label="Apri"
width="20%" align="center" />
</listhead>
</listbox>
</groupbox>
</row>
</rows>
</grid>
</window>
</zk>
In the sample above, in ZK version 3.6 all go well; in ZK version 5.0.10 vertical dimension isn't enough, and the buttons appear only in part.
Another exemple:
file upload seems doesn't work well: now I must push button "upload" two times ... here the code:
<?page contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Dettaglio Atto Pratica" id="winAttoPratica"
border="normal" mode="modal"
apply="fds.melajo.zkdelegate.zkPages.studioLegale.GestisciUploadAttoZK"
maximizable="false" width="440px" height="305px" >
<caption image="/icone/folder_database.png"></caption>
<grid fixedLayout="true" id="inserimento">
<columns>
<column align="left" width="30%" />
<column align="left" width="70%" />
</columns>
<rows>
<row>
<vbox>
<div>Descrizione</div>
<div>(max 100)</div>
</vbox>
<textbox id="descrizioneFile" multiline="true" width="200px" rows="2"
constraint="no empty,/[a-z,A-Z,0-9,'?!.:;,_ ]{1,100}/: non vuoto, max 100 caratteri alfanumerici (ammessi '?!.:;,_ e spazio)"
/>
</row>
<row >
Nome File
<hbox>
<textbox id="nomeFile" readonly="true" />
<button id="idUploadButton" label="Aggiungi file" upload="true"
forward="onClick==winAttoPratica.onInserisciFile_ZK"/>
<button visible="false" id="idAggiornaUploadButton" label="Aggiorna file" upload="true"
forward="onClick==winAttoPratica.onAggiornaFile_ZK"/>
<button id="idApriAttoButton" visible="false" label="Visualizza Atto" tooltiptext="per aprire l'atto"
forward="onClick==winAttoPratica.onMostraFile_ZK"/>
</hbox>
</row>
<row>
Num. Pratica
<textbox id="idPratica" readonly="true" />
</row>
<row>
Num. Protocollo File
<textbox id="idDoc" readonly="true" />
</row>
<row>
Data registrazione
<textbox id="registrata" readonly="true" />
</row>
<row>
Versione
<textbox id="versione" readonly="true" />
</row>
<row spans="2" id="bottonInserisci">
<div align="center">
<hbox>
<button label="Conferma"
forward="onClick==winAttoPratica.onConfermaAtto_ZK"/>
<button label="Reset"
forward="onClick==winAttoPratica.onAnnullaUpload_ZK"/>
</hbox>
</div>
</row>
<row spans="2" id="bottonsAzioniDettaglio" visible="false">
<div align="center">
<hbox>
<button id="InviaAttoButton" label="Invia" tooltiptext="per inviare riferimento all'atto a qlc tramite email" forward="onClick==winAttoPratica.onInviaAtto_ZK">
</button>
<button id="ModificaAttoButton" label="Modifica" tooltiptext="per modificare atto" forward="onClick==winAttoPratica.onModificaAtto_ZK">
</button>
<button id="EliminaAttoButton" label="Elimina" tooltiptext="per eliminare l'atto (cancellazione logica)" forward="onClick==winAttoPratica.onEliminaAtto_ZK">
</button>
</hbox>
</div>
</row>
<row spans="2" id="bottonsAzioniModifica" visible="false" >
<div align="center">
<hbox>
<button id="AggiornaAttoButton" label="Conferma"
tooltiptext="per aggiornare l'atto"
forward="onClick==winAttoPratica.onConfermaAtto_ZK">
</button>
<button label="Annulla" disabled="true" id="AnnullaAggiornamentoAtto"
tooltiptext="per annullare le modifiche"
forward="onClick==winAttoPratica.onAnnullaAggiornaAtto_ZK">
</button>
</hbox>
</div>
</row>
<row spans="2" id="bottonChiudiDettaglio" >
<div align="center">
<hbox>
<button label="Chiudi" id="idBottonChiudiDettaglio"
forward="onClick==winAttoPratica.onChiudiAtto_ZK"/>
</hbox>
</div>
</row>
</rows>
</grid>
</window>
</zk>
ciao
fds
Hi fds,
1. the layout calculate has a lot change between ZK5 and ZK3, you can try to remove the height of the window.
2.what browser are you using? I have tested your sample with IE8 firefox and zk 5.0.10, it works fine.
Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4563404
By: yuzexu_zk
how to auto scroll listbox scrolling bottom