8つの列を持つコンポーネントのlistbox
内部を作成しようとしていgroupbox
ます。ただし、リストボックスに水平スクロールバーがあるのに、最後の列がなくなってしまい、理由がわかりません。私は追加しようとしました:
`<library-property>
<name>org.zkoss.zul.nativebar</name>
<value>true</value>
</library-property>`
私のzk.xmlや多くのもので、しかしそれは機能していません。これが私のコードです:
<groupbox
visible="@bind(vm.gbxGridPo)" width="100%">
<caption label="${labels.common.label.hasil_pencarian}" style="color:blue" />
<vlayout >
<checkbox name="chkBPKB" label="Print SPP/SIP BPKB" checked="@bind(vm.chkBPKB)" />
<listbox model="@load(vm.poDTOs)" mold="paging" pageSize="10"
emptyMessage="Tidak ada data" checkmark="true"
width="97%" style="overflow:hidden"
selectedItem="@bind(vm.aksiSelectedPO)"
onClick="@command('onCheckRadio')">
<listhead >
<listheader label="${labels.common.label.pilih}" align="center" width="50px" />
<listheader label="${labels.common.label.sentra}" align="center" sort="auto(sentraID)" width="150px" />
<listheader label="${labels.common.label.unit}" align="center" sort="auto(unitID)" width="150px" />
<listheader label="${labels.common.label.jenis_pihak_ketiga}" align="center" sort="auto(thirdPartyTypeID)" width="150px" />
<listheader label="${labels.common.label.nama_pihak_ketiga}" align="center" sort="auto(thirdPartyName)" width="150px" />
<listheader label="${labels.common.label.no_po}" align="center" sort="auto(poNumber)" width="120px"/>
<listheader label="${labels.common.label.nama_lengkap}" align="center" sort="auto(customerName)" width="180px" />
<listheader label="${labels.common.label.no_aplikasi}" align="center" sort="auto(orderID)" width="140px"/>
</listhead>
<template name="model" status="s" var="item">
<listitem>
<listcell />
<listcell label="@load(item.sentraID)" />
<listcell label="@load(item.unitID)" />
<listcell label="@load(item.thirdPartyTypeID)" />
<listcell label="@load(item.thirdPartyName)" />
<listcell label="@load(item.poNumber)" />
<listcell label="@load(item.customerName)" />
<listcell label="@load(item.orderID)" />
</listitem>
</template>
</listbox>
</vlayout>
</groupbox>
何がうまくいかないかについての2つのアイデア:
まず、vlayout
の幅を100%に設定するか、hflexを1に設定すると役立つ場合があります。今のところ、はvlayout
子供たちに合うように必要なだけ広くなります。listbox
親(vlayout
)には幅の制限がないため、97%は役に立ちません。
第二に、100%はgroupbox
正しいですか?あれはどの容器に入っていますか?groupbox
のコンテナがページ全体にまたがる場合、100%はグループボックスもページ全体にまたがるようにします。左側に別のボックスがあるため、groupbox
はページを超えて拡張されます。
編集
あなたのzulで少し遊んだ後、私はそれが2番目のケースだと思います。このzulを見てください:
<hlayout width="100%">
<div width="100px" height="100px" style="background: green" />
<groupbox width="100%">
<caption label="Bla" />
<vlayout >
<checkbox label="Check" />
<listbox model="@load(vm.poDTOs)" width="97%" style="overflow:hidden">
<listhead >
<listheader label="1" width="50px" />
<listheader label="2" width="150px" />
<listheader label="2" width="150px" />
<listheader label="2" width="150px" />
<listheader label="2" width="150px" />
<listheader label="2" width="150px" />
<listheader label="2" width="150px" />
<listheader label="2" width="150px" />
<listheader label="2" width="150px" />
</listhead>
</listbox>
</vlayout>
</groupbox>
</hlayout>
これにより、あなたと同じように見える動作が生成されます。ただし、groupbox
fromwidth="100%"
をに変更するとhflex="1"
修正されます。これは、の残りのスペースのみを使用するためdiv
です。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加