Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
Another new ZK fiddle
2guest172.70.54.33qs9184Dec 12, 2025 4:55:43 PMlinkAnother new ZK fiddle
1guest172.68.76.130qs9184Dec 12, 2025 3:02:25 PMlinkAnother new ZK fiddle
5guest162.158.123.16919uqcccDec 10, 2025 12:36:13 PMlinkAnother new ZK fiddle
4guest104.22.23.2619uqcccDec 10, 2025 12:26:29 PMlinkAnother new ZK fiddle
3guest104.22.23.2719uqcccDec 10, 2025 12:03:08 PMlinkAnother new ZK fiddle
2guest104.22.23.2719uqcccDec 10, 2025 12:02:40 PMlinkAnother new ZK fiddle
1guest104.22.23.2619uqcccDec 10, 2025 12:01:58 PMlinkAnother new ZK fiddle
1guest172.71.139.1693ma2m4tDec 10, 2025 9:32:00 AMlinkZK-5545 about combobox readonly
2guest172.71.139.1683u5ged0Dec 10, 2025 8:12:48 AMlinkAnother new ZK fiddle
1guest172.71.139.1693u5ged0Dec 10, 2025 8:12:25 AMlinkAnother new ZK fiddle
2guest172.70.54.33qs9184Dec 12, 2025 4:55:43 PMlinkresources
index.zulzul<!--cstIdVersion = "0002" -->
<zk>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<window id="winPoliticas" border="normal" width="100%" height="100%"
mode="embedded" apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.solsa.cre.ui.cre.Ccre0028pCtrl')">
<style src="/css/cssGeneral.css" dynamic="true" />
<borderlayout width="100%" height="100%">
<north border="none" autoscroll="true">
<vlayout height="100%" style="overflow:auto;padding:5px">
<tabbox width="100%" height="100%">
<tabs>
<tab label="PolÃticas" id="tbxPoliticas" />
<tab label="Definir Tiempo de Gracia" id="tbxLiquidacion" />
<tab label="Modalidad Descuento" id="tbxDetalles" />
</tabs>
<tabpanels>
<tabpanel>
<separator/>
<hbox>
<vbox width="120px" style="margin-top: 15px">
<label value="PolÃtica: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="Descripción: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="Situación: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="Autorizadora: " style="font-weight: bold" />
<separator orient="vertical" />
<label value="Descripción: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="Monto MÃnimo: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="Monto Máximo: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="Cuota Permitida: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="Tasa Interés: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="DÃas hasta pago: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
</vbox>
<separator orient="horizontal" width="14px" />
<vbox>
<vbox style="margin-top: 12px">
<combobox id="cmbPolitica" readonly="true" width="350px" model="@bind(vm.listaPoliticas)"
mold="rounded" selectedItem="@bind(vm.politica)" onChange="@command('mEditarPolitica')">
<template name="model" var="pol">
<comboitem label="@load(pol.descripcion)" />
</template>
</combobox>
</vbox>
<hbox style="margin-top:8px">
<textbox id="txtDescripcion" width="343px" style="text-align:left; margin-top:7px"
value="@bind(vm.politica.descripcion)" />
<vbox id="boxAgregar" width="100%" pack="center" align="center" style="margin-top:-51px; margin-left:10px">
<separator orient="horizontal" width="1px" />
<button width="100%" height="27px" id="btnAgregar" image="/images/common/add.png"
label="Agregar" mold="trendy" sclass="button mybutton aqua" onClick="@command('mAgregarPolitica')"
/>
</vbox>
</hbox>
<vbox style="margin-top: 12px">
<combobox id="cmbSituacion" readonly="true" width="150px" model="@bind(vm.listaSituacion)"
mold="rounded" selectedItem="@bind(vm.situacion)" onChange="@command('mFechaSituacion')">
<template name="model" var="sit">
<comboitem label="@load(sit.descripcion)" />
</template>
</combobox>
</vbox>
<!-- NUEVOS CHECKBOXES AÑADIDOS -->
<hbox style="margin-top:8px; padding-top: 12px; padding-bottom:5px;">
<checkbox id="chkPoliticaAdq" onCheck="@command('mCheck')" />
</hbox>
<separator orient="horizontal" width="28px" />
<hbox style="position: relative; margin-top:-76px; margin-left:170px">
<vbox style="width: 300px; height: 15px">
<label id="lblFechaSituacion" value="@bind(vm.politica.fechaSituacion)"
style="text-align:right; font-weight:bold;" width="200px" />
</vbox>
</hbox>
<hbox>
<separator orient="horizontal"/>
<vbox>
<hbox style="margin-top:3px">
<label value="Diferido: " style="font-weight: bold" />
<separator orient="horizontal" width="38px" />
<checkbox id="chkDiferido" onCheck="@command('mCheck')" visible="true"
/>
<separator width="1px"></separator>
<label value="Corriente: " style="font-weight: bold; padding-left:116px"
/>
<separator orient="horizontal" width="38px" />
<checkbox id="chkCorriente" onCheck="@command('mCheck')" visible="true"
/>
</hbox>
<separator />
</vbox>
</hbox>
<hbox style="margin-top:6px">
<doublebox id="txtMontoMinDif" width="200px" format="###,##0.00" style="text-align:right"
value="@bind(vm.politica.montoMinimoDiferido)" />
<doublebox id="txtMontoMinCor" width="200px" format="###,##0.00" style="text-align:right"
value="@bind(vm.politica.montoMinimoCorriente)" />
</hbox>
<separator />
<hbox style="margin-top:6px">
<doublebox id="txtMontoMaxDif" width="200px" format="###,##0.00" style="text-align:right"
value="@bind(vm.politica.montoMaximoDiferido)" />
<doublebox id="txtMontoMaxCor" width="200px" format="###,##0.00" style="text-align:right"
value="@bind(vm.politica.montoMaximoCorriente)" />
</hbox>
<separator />
<hbox>
<textbox id="txtListaCuotas"
width="200px"
style="text-align:right; margin-top:9px"
value="@bind(vm.politica.listaCuotasDiferidas)"
onBlur="@command('mValidarListaCuotas')" />
<button id="btnAyuda"
image="/images/common/help.png"
style="margin-top:8px"
onClick="@command('mMostrarMensaje')" />
<vbox style="margin-left:12px;">
<separator height="8px"/>
<label id="lblAyuda"
visible="@load(vm.mensajeAyuda)"
value="@load(vm.textoAyuda)"
style="font-weight:bold;padding-right:22px;" />
</vbox>
</hbox>
<separator />
<hbox style="margin-top:6px">
<doublebox id="txtInteres" width="200px" format="###,##0.00" style="text-align:right"
value="@bind(vm.politica.tasaFlatInteres)" />
<label value="Pago Parcial" style="font-weight: bold; padding-left: 33px;"
/>
<checkbox id="chkPagoParcial" style="margin-left: 27px" onCheck="@command('mCheck')"
/>
</hbox>
<separator />
<hbox style="margin-top:6px">
<intbox id="txtDiasPago" value="@bind(vm.politica.cantidadDiasHastaPago)"
width="200px" style="text-align:right" />
<label value="Cupo Operación" style="font-weight: bold; padding-left: 33px;"
/>
<checkbox id="chkCupoOperacion" style="margin-left: 3px" onCheck="@command('mCheck')"
/>
</hbox>
</vbox>
</hbox>
</tabpanel>
<tabpanel>
<separator>
</separator>
<label value="@bind(vm.politica.descripcion)" style="font-weight: bold;text-align:left"
/>
<div style="display:flex;padding-top:5px;padding-left:25px">
<hbox>
<vbox width="120px">
<separator orient="vertical" width="1px" />
<label value="Frecuencia: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="DÃa Corte: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="Tipo Mes: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
<label value="PerÃodo: " style="font-weight: bold" />
<separator orient="vertical" width="1px" />
</vbox>
<vbox>
<hbox style="margin-top:23px">
<combobox id="cmbModalidad" readonly="true" width="170px" model="@bind(vm.listaModalidad)"
mold="rounded" selectedItem="@bind(vm.modalidad)" onChange="@command('mCargarDiasCorte')">
<template name="model" var="fre">
<comboitem label="@load(fre.descripcion)" />
</template>
</combobox>
</hbox>
<separator>
</separator>
<hbox style="margin-top:1px">
<combobox id="cmbDiaCorte" readonly="true" width="170px" model="@bind(vm.listaDiasCorte)"
mold="rounded" selectedItem="@bind(vm.diaCorte)">
<template name="model" var="dia">
<comboitem label="@load(dia.descripcion)" />
</template>
</combobox>
</hbox>
<separator>
</separator>
<hbox style="margin-top:6px">
<radiogroup id="rdgTipoMes" selectedItem="@bind(vm.politica.tipoMesGraciaLiq)">
<radio id="rbCalendario" label="Calendario" value="1" />
<separator orient="vertical" width="90px" />
<radio id="rbComercial" label="Comercial" value="2" />
</radiogroup>
</hbox>
<separator>
</separator>
<hbox style="margin-top:8px">
<intbox id="txtPeriodo" value="@bind(vm.politica.cantidadPeriodosGracia)"
width="164px" style="text-align:right" />
</hbox>
</vbox>
</hbox>
</div>
</tabpanel>
<tabpanel height="100%">
<vlayout height="100%" style="overflow:auto">
<div align="center" style="padding:10px;padding-top:0px">
<vbox style="padding-top:10px" align="center" width="100%" height="100%">
<label value="@bind(vm.politica.descripcion)" style="font-weight: bold;text-align:left"
/>
</vbox>
</div>
<div align="center" style="padding:5px;height:445px">
<listbox id="lstDetPoliticas" model="@bind(vm.listaDetallePoliticas)" rows="7"
checkmark="false" selectedItem="@bind(vm.detallesPolitica)" mold="paging"
pagingPosition="bottom" multiple="false" pageSize="7"
style="overflow:auto;padding:2px" emptyMessage="PolÃtica sin detalle">
<listhead sizable="true">
<listheader width="5%" align="center" >
<checkbox
id="chkSelTodos" disabled="false"
onCheck="@command('mActualizarSeleccion')" />
</listheader>
<listheader width="30%">
<div align="center">
<label value="Frecuencia" sclass="headlist" />
</div>
</listheader>
<listheader width="30%" style="margin-top: -10px">
<div align="center">
<label value="DÃa" sclass="headlist" />
</div>
</listheader>
<listheader width="30%">
<div align="center">
<label value="Situación" sclass="headlist" />
</div>
</listheader>
<listheader width="5%" align="center">
<vbox spacing="0">
<image id="imgAdd" src="/images/common/anadir.png" hover="/images/common/anadir_hover.png"
style="cursor:pointer" onClick="@command('mAgregarDetallePolitica')" tooltiptext="mAgregarDetallePolitica"
/>
</vbox>
</listheader>
</listhead>
<template name="model" var="cue">
<listitem>
<listcell style="align:center" >
<checkbox
checked="@bind(cue.seleccionado)">
</checkbox>
</listcell>
<listcell>
<combobox width="98%" model="@bind(vm.listaModalidad)" readonly="true"
selectedItem="@bind(vm.listaModalidadDetalle.get(cue.frecuencia))" disabled="@load(!cue.seleccionado)"
onSelect="@command('mSeleccionarModalidad', valModalidad=self.selectedItem, paramModalidad=cue)">
<template name="model">
<comboitem label="@load(each.descripcion)" />
</template>
</combobox>
</listcell>
<listcell>
<textbox width="98%" value="@bind(cue.dia)" onBlur="@command('mValidarDiaCorte', paramDia=cue)"
disabled="@load(!cue.seleccionado)" maxlength="2" style="text-align: right;">
</textbox>
</listcell>
<listcell>
<combobox width="98%" model="@bind(vm.listaSituacion)" readonly="true"
selectedItem="@bind(vm.listaSituacionDetalle.get(cue.situacion))" disabled="@load(!cue.seleccionado)"
onSelect="@command('mSeleccionarSituacion', valSituacion=self.selectedItem, paramSituacion=cue)">
<template name="model">
<comboitem label="@load(each.descripcion)" />
</template>
</combobox>
</listcell>
<listcell>
<label value="*" sclass="lblError" visible="false" />
</listcell>
</listitem>
</template>
</listbox>
<separator orient="vertical" />
<div style="text-align: right; padding-top: 10px;">
<button id="btnGuardar" label="Guardar Cambios" disabled="false" onClick="@command('mGuardarPoliticas')"
mold="trendy" image="/images/common/check.png" sclass="button mybutton aqua"
/>
</div>
</div>
</vlayout>
</tabpanel>
</tabpanels>
</tabbox>
<div style="display: flex; justify-content: flex-end; padding-right:5px;">
<hbox>
<button id="btnLimpiar" label="Limpiar Campos" onClick="@command('mLimpiarPantalla')"
mold="trendy" image="/images/common/clean.png" sclass="button mybutton aqua"
visible="false" />
</hbox>
</div>
</vlayout>
</north>
<center border="none">
</center>
</borderlayout>
</window>
</zk>TestComposer.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class TestComposer extends SelectorComposer {
@Wire
private Window window;
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
@Listen("onClick=#btn")
public void onClick(Event e) {
Messagebox.show("Hi btn");
}
}