---
# System prepended metadata

title: ZK 筆記

---

ZK 筆記
===

https://zkfiddle.org/sample/18m8dd4/1-Vflex-Listbox-Sample


視窗變小，顯示筆數也變少，但會自動調整 scroll bar，上下 toolbar 都會固定
![](https://i.imgur.com/aPWmOUk.png)


視窗變大，顯示筆數也變多，也會自動調整 scroll bar，上下 toolbar 都會固定
![](https://i.imgur.com/eD9xxVK.png)



```
<?page title="SAMPLE" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="報名管理系統" height="100%">
    <menubar>
        <menuitem label="競賽活動管理"/>
        <menuitem label="報名資料管理" />
        <menuitem label="團體報名管理"/>
        <menuitem label="繳費資料管理"/>	
    </menubar>
    <panel vflex="true" border="normal">
        <toolbar>
            <space bar="true"/>
            <button>匯出</button>
            <space bar="true"/>
            <button label="更新考場"/>	
            <button label="更新成績" />
            <space bar="true"/>
        </toolbar>    
    
        <panelchildren>
            <listbox vflex="true">
                <listhead>
                    <listheader label="序號" />
                    <listheader label="准考證號碼" />
                    <listheader label="繳費序號" />
                    <listheader label="繳費帳號" />
                    <listheader label="繳費日期" />
                    <listheader label="繳費狀態" />
                </listhead>
                <listitem> <!-- 重複多個 listitem 看效果 -->
                    <listcell label="xxx" />
                    <listcell label="xxx" />
                    <listcell label="xxx" />
                    <listcell label="xxxxxxx"  />
                    <listcell label="xxxxx" />
                    <listcell label="xxxxxxxxx" />
                </listitem>
            </listbox>
        </panelchildren>
        <toolbar>
            <space bar="true"/>
            <button>匯出</button>
            <space bar="true"/>
            <button label="更新考場"/>	
            <button label="更新成績" />
            <space bar="true"/>
        </toolbar>
    </panel>
</window>
</zk>
```                        
