グリッドの中の長いコンテンツをコントロールする方法は二つあります。
スクロールとページングです。
スクロールは前のセクションで話したように、heightプロパティを指定することで使用可能になります。
ページングはpagingをモールド(mold)プロパティに指定することで使用可能です。ページングが一度使用可能になると、グリッドはコンテンツを分けていくつかのページにします。以下に説明したように一つのページに表示します。
<grid width="300px" mold="paging" pageSize="4">
<columns>
<column label="Left"/>
<column label="Right"/>
</columns>
<rows>
<row>
<label value="Item 1.1"/><label value="Item 1.2"/>
</row>
<row>
<label value="Item 2.1"/><label value="Item 2.2"/>
</row>
<row>
<label value="Item 3.1"/><label value="Item 3.2"/>
</row>
<row>
<label value="Item 4.1"/><label value="Item 4.2"/>
</row>
<row>
<label value="Item 5.1"/><label value="Item 5.2"/>
</row>
<row>
<label value="Item 6.1"/><label value="Item 6.2"/>
</row>
<row>
<label value="Item 7.1"/><label value="Item 7.2"/>
</row>
</rows>
</grid>
ページングモールドが設定されると、グリッドはグリッドの子要素としてページングコンポーネントのインスタンスを作成します。それはページングを制御します。
一度、ページングモールドが設定されると、pageSizeプロパティを使用して一度に指定できる列の数を指定します(つまりページサイズ)。デフォルトでは20です。
ページングコンポーネントを異なった位置におく場合、又は一つのページングコンポーネントを使用して、二つ以上のグリッドをコントロールする場合、paginalプロパティを明示的に指定します。確実に設定されていない場合はページングプロパティと同じです。
<vbox>
<paging id="pg" pageSize="4"/>
<hbox>
<grid width="300px" mold="paging" paginal="${pg}">
<columns>
<column label="Left"/><column label="Right"/>
</columns>
<rows>
<row>
<label value="Item 1.1"/><label value="Item 1.2"/>
</row>
<row>
<label value="Item 2.1"/><label value="Item 2.2"/>
</row>
<row>
<label value="Item 3.1"/><label value="Item 3.2"/>
</row>
<row>
<label value="Item 4.1"/><label value="Item 4.2"/>
</row>
<row>
<label value="Item 5.1"/><label value="Item 5.2"/>
</row>
<row>
<label value="Item 6.1"/><label value="Item 6.2"/>
</row>
<row>
<label value="Item 7.1"/><label value="Item 7.2"/>
</row>
</rows>
</grid>
<grid width="300px" mold="paging" paginal="${pg}">
<columns>
<column label="Left"/><column label="Right"/>
</columns>
<rows>
<row>
<label value="Item A.1"/><label value="Item A.2"/>
</row>
<row>
<label value="Item B.1"/><label value="Item B.2"/>
</row>
<row>
<label value="Item C.1"/><label value="Item C.2"/>
</row>
<row>
<label value="Item D.1"/><label value="Item D.2"/>
</row>
<row>
<label value="Item E.1"/><label value="Item E.2"/>
</row>
<row>
<label value="Item F.1"/><label value="Item F.2"/>
</row>
</rows>
</grid>
</hbox>
</vbox>
それは読み出し専用のプロパティで、子ページングコンポーネントを表しています。
その子ページングコンポーネントは自動的に生成され、ページングを処理します。paginalプロパティによって、外部のページングを指定した場合、それはnullです。このプロパティにアクセスすることはまれで、ほとんどの場合では、paging よりpaginalを使います。
ユーザーがページングコンポーネントのページ番号をクリックしたら、onPagingイベントはグリッドに送信されます。デフォルトで、そのメソッドはrowsのコンテンツを無効にし、つまり、再度書き込みます。
creat-on-demand要素を実装する場合、onPagingイベントに対してイベントリスナをグリッドに追加できます。
grid.addEventListener(org.zkoss.zul.event.ZulEvents.ON_PAGING, new MyListener());