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 :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkAnother new ZK fiddle
2guest112.219.161.1302b8mkvhOct 14, 2015 6:14:24 AMlinkresources
index.zulzul
<zk>
<style>
body {margin:0; padding:0;font-family:'맑은 고딕','MalgunGothic'}
.breeze .complex-layout, .breeze .complex-layout .z-south,
.breeze .complex-layout .z-west { background: #FFF; margin:0; }
.z-borderlayout { background: #FFFFFF; border:none }
.complex-layout .z-north { background: #0e8808; }
.complex-layout {height:930px}
.inner-border, .inner-border
.z-north, .inner-border .z-west, .inner-border .z-south,
.inner-border .z-east { background: #FFFFFF; border:0}
.dl-link {text-decoration: none; cursor: pointer; margin-left:10px; color:#FFF}
.toplink {margin-right:0.9em}
.topArea {width:100%; background:#2d2d33; color:#FFF}
.gnbmenu {background:#0e8808; height:33px; padding:12px 0 15px 0; border:0; font-size:14px; color:#FFF; font-family:'맑은 고딕','MalgunGothic'}
.whitelink {color:#FFFFFF; font-family:'맑은 고딕','MalgunGothic'}
.z-center {border:0}
.sitebox {margin-right:30px}
.profileBox {background:#f6f8fa; font-size:12px; font-weight:bold; padding-top:8px; padding-left:1px; border-top:1px solid #c8c8d0; border-bottom:none; border-left:none; border-right:none; font-weight:bold}
.img_photo {width:85px;float:left; border:1px solid #eee; margin-top:3px; margin-right:10px}
.info {font-weight:normal; float:left; padding:0; margin-top:10px; list-style:none}
.info li {line-height:22px}
.infowrap {background:#fff; margin-left:0px; height:75px; margin-top:8px; border-top:1px solid #e5e5e5; border-left:none; border-right:none; padding:5px }
.manageBox {background:#f6f8fa; font-size:11px; color:#4d4d4d; padding-top:5px; padding-left:1px;border:none;}
.managewrap {background:#fff; margin-left:0px; margin-top:8px; border-top:1px solid #e5e5e5;border-left:none; border-right:none;padding:5px}
.z-panel-children {border:1px solid #e5e5e5}
.managewrap ul {float:left; padding:0; margin:0; font-weight:normal; list-style:none}
.managewrap ul li {line-height:20px}
.submenu_tit {background:#fff; font-size:12px; background:url(../common/img/btn_infoopen.gif) no-repeat center right; padding:2px 0 4px 0; border-top:0; border-bottom:1px solid #efefef; font-weight:bold}
.submenu {list-style:none; padding:0; margin:0; width:100%;}
.submenu li {font-size:11px; padding-left:17px; background:url(../common/img/bg_depth.gif) no-repeat 6px 8px; line-height:25px}
.submenu li a {text-decoration:none; color:#666}
.z-tab-accordion-hm, .z-tab-accordion-hl, .z-tab-accordion-hr, .z-tab-accordion-tr, .z-tab-accordion-tl {background:none;}
.z-tabbox-accordion .z-tabpanel-accordion {border:none; background:#f4f4f4}
.footer {background:#eee; padding-top:23px;}
.z-menu-btn {color:#FFF; font-size:13px;}
.z-menu-body, .z-menu-body-over .z-menu-inner-m .z-menu-btn,
.z-menu-body-seld .z-menu-inner-m, .z-menu-item-body-over .z-menu-item-inner-m .z-menu-btn {background:none; color:#fff600;font-size:13px;}
.z-menu-body-over .z-menu-inner-l, .z-menu-body-seld .z-menu-inner-l, .z-menu-item-body-over .z-menu-item-inner-l, .z-menu-body-over .z-menu-inner-r, .z-menu-body-seld .z-menu-inner-r, .z-menu-item-body-over .z-menu-item-inner-r, .z-menu-body-over .z-menu-inner-m {background:none;font-size:13px;}
.z-menu-body-seld .z-menu-inner-m .z-menu-btn {color:#fff;font-size:13px;font-weight:bold}
.z-menubar-hor .z-menu, .z-menubar-hor .z-menu-btn {color:#FFF;font-size:13px;font-weight:bold}
.remark {font-weight:bold; text-decoration:underline}
.greenmark {color:#063; font-weight:bold; text-decoration:underline}
.orangemark {color:#ff6600; font-weight:bold; text-decoration:underline}
.z-grid-autopaging .z-row-cnt { height: 30px; overflow: hidden;}
</style>
<div>
<borderlayout sclass="complex-layout">
<north size="83px" border="0">
<borderlayout style="width:100%; border:0">
<north style="width:100%; border:0">
<hlayout sclass="topArea">
<cell><image src="../common/img/ico_new.gif" style="padding-left:5px; padding-right:-3px;" /><a href="#" sclass="dl-link" target="_zkdemo">공지: 스마트 사이니지 만나보세요!</a></cell>
<cell>
<toolbar mold="panel" sclass="toplink">
<toolbarbutton label="매직홈빌더" href="#" />
<toolbarbutton label="매직홈네트워크" />
<toolbarbutton label="매직홈에이전시" />
<toolbarbutton label="Smart Signage" />
<toolbarbutton label="로그아웃" />
</toolbar>
</cell>
</hlayout>
</north>
<center border="0">
<menubar sclass="gnbmenu">
<menu label="단말기 현황">
<menupopup>
<menuitem label="1" />
</menupopup>
</menu>
<menu label="컨텐츠관리">
<menupopup>
<menuitem label="그룹소개" />
<menuitem label="그룹전용컨텐츠" />
<menuitem label="Smart N 서비스" />
<menuitem label="이벤트/게임관리" />
<menuitem label="제휴서비스" />
</menupopup>
</menu>
<menu label="광고관리">
<menupopup>
<menuitem label="1" />
</menupopup>
</menu>
<menu label="결제관리">
<menupopup>
<menuitem label="1" />
</menupopup>
</menu>
<menu label="업무지원">
<menupopup>
<menuitem label="1" />
</menupopup>
</menu>
</menubar>
</center>
</borderlayout>
</north>
<!-- Sidebar -->
<west width="210px" border="0" flex="true" splittable="true" margins="0,0,0,0">
<vlayout spacing="0">
<vbox hflex="1">
<panel width="100%" border="0" title="일간리더스경제신문님" zclass="profileBox">
<panelchildren sclass="infowrap">
<html>
<![CDATA[
<div class="img_photo"><image src="../common/img/img_nopic.gif" /></div>
<ul class="info">
<li>대표:나대표</li>
<li>담당:이담당</li>
</ul>
]]>
</html>
</panelchildren>
</panel>
</vbox>
<vbox hflex="1">
<panel width="100%" border="0" title="운영정보" zclass="manageBox">
<panelchildren sclass="managewrap">
<html>
<![CDATA[
<ul>
<li>관리자:이담당</li>
<li>연락처:02-521-9456</li>
</ul>
]]>
</html>
</panelchildren>
</panel>
</vbox>
<vbox hflex="1">
<tabbox hflex="1" mold="accordion">
<tabs>
<tab label="그룹소개" sclass="submenu_tit" />
<tab label="두번째메뉴" sclass="submenu_tit" />
</tabs>
<tabpanels>
<tabpanel>
<html>
<![CDATA[
<ul class="submenu">
<li><a href="#" target="_blank">일간리더스 경제신문</a></li>
<li><a href="#" target="_blank">전문기자단 모집</a></li>
<li><a href="#" target="_blank">광고 및 제휴안내</a></li>
</ul> ]]>
</html>
</tabpanel>
<tabpanel>
<html>
<![CDATA[
<ul class="submenu">
<li><a href="#" target="_blank">ex</a></li>
<li><a href="#" target="_blank">ex</a></li>
</ul> ]]>
</html>
</tabpanel>
</tabpanels>
</tabbox>
</vbox>
</vlayout>
</west>
<!-- Content -->
<center>
<borderlayout sclass="inner-border">
<north border="0" height="5%" margins="10,10,10,10" style="border-bottom:2px solid #056700" >
<hlayout>
<label value="그룹소개" style="font-size:16px" />
<div hflex="1"></div>
<div sclass="sitebox"><image src="../common/img/ico_site.gif" /> > 그룹소개 > 일간리더스경제신문</div>
<separator bar="true"/>
</hlayout>
</north>
<center border="0" margins="0,10,10,10">
<!-- 내용 넣기 -->
<div style="width:100%;">
<vlayout>
<hbox>
현재 오늘의 뉴스에 게시되어 있는 게시물의 <label value="노출게시글은" class="remark" /> <label value="1,002건" class="greenmark" /> /
<label value="전체게시글은" class="remark" /> <label value="102건" class="orangemark" /> 입니다.
</hbox>
<vbox>
<hbox align="center">
<datebox id="db0" cols="12" format="short" onCreate="self.value = new Date()" />
</hbox>
</vbox>
<hbox hflex="1" style="padding:10px 0">
<hbox>
<button label="삭제"/>
<listbox mold="select" hflex="1">
<listitem label="Headline" />
<listitem label="General" />
<listitem label="important" selected="true"/>
</listbox>
<listbox mold="select" hflex="1">
<listitem label="1차섹션" selected="true"/>
<listitem label="뉴스" />
<listitem label="금융" />
</listbox>
<listbox mold="select" hflex="1">
<listitem label="2차섹션" selected="true" />
<listitem label="속보" />
<listitem label="금융동향" />
</listbox>
</hbox>
<div hflex="1"></div>
<hbox>
<listbox mold="select" hflex="1">
<listitem label="제목" selected="true" />
<listitem label="작성자" />
<listitem label="내용" />
</listbox>
<textbox />
<button label="삭제"/>
<listbox mold="select" hflex="1">
<listitem label="20개씩보기" selected="true" />
<listitem label="40개씩보기" />
<listitem label="80개씩보기" />
</listbox>
</hbox>
</hbox>
</vlayout>
<vlayout width="100%" vflex="true" >
<grid autopaging="true" mold="paging" >
<columns>
<column label="" align="center" width="30px" />
<column label="섹션" align="center" width="50px" />
<column label="제목" align="center" width="40%" />
<column label="작성자" align="center" />
<column label="작성일" align="center" />
<column label="조회" align="center" />
<column label="등급" align="center" />
<column label="HOTSPOT" align="center" width="70px" />
<column label="노출" align="center" width="70px" />
</columns>
<rows >
<row>
<checkbox id="l1" label="" onCheck="doChecked()" />
<label value="속보" />
<label value="금값 하락타고 금 현·선물 거래" />
<label value="김기자" />
<label value="2015-07-30" width="100px" />
<label value="1,520" />
<listbox mold="select" hflex="1">
<listitem label="Headline" value="Headline" selected="true" />
<listitem label="General" value="General" />
<listitem label="important" value="important" />
</listbox>
<checkbox id="l2" label="" onCheck="doChecked()" />
<checkbox id="l3" label="" onCheck="doChecked()" />
</row>
<row>
<checkbox id="l4" label="" onCheck="doChecked()" />
<label value="속보" />
<label value="금값 하락타고 금 현·선물 거래" width="80%" />
<label value="김기자" />
<label value="2015-07-30" width="100px" />
<label value="1,520" />
<listbox mold="select" hflex="1">
<listitem label="Headline" value="Headline" selected="true" />
<listitem label="General" value="General" />
<listitem label="important" value="important" />
</listbox>
<checkbox id="l5" label="" onCheck="doChecked()" />
<checkbox id="l6" label="" onCheck="doChecked()" />
</row>
<row>
<checkbox id="l7" label="" onCheck="doChecked()" />
<label value="속보" />
<label value="금값 하락타고 금 현·선물 거래" width="80%" />
<label value="김기자" />
<label value="2015-07-30" width="100px" />
<label value="1,520" />
<listbox mold="select" hflex="1">
<listitem label="Headline" value="Headline" selected="true" />
<listitem label="General" value="General" />
<listitem label="important" value="important" />
</listbox>
<checkbox id="l8" label="" onCheck="doChecked()" />
<checkbox id="l9" label="" onCheck="doChecked()" />
</row>
</rows>
</grid>
</vlayout>
<!--<hbox width="100%">
<paging totalSize="100" pageSize="20"/>
</hbox>-->
<hbox align="right" style="padding:10px 0; float:right">
<button label="저장" />
<button label="취소" />
</hbox>
</div>
<!-- //내용넣기 -->
</center>
</borderlayout>
</center>
<south size="60px" border="0" sclass="footer">
<toolbar mold="panel" align="center">
<toolbarbutton label="Sign in" />
<toolbarbutton label="Home" />
<toolbarbutton label="Sitemap" />
<toolbarbutton label="Terms" />
<separator orient="vertical" bar="true" />
Copyright(c) 2015 Bizn smartsignage All.Right reserved.
</toolbar>
</south>
</borderlayout>
</div>
</zk>