Home   Single Page

サイズ変更可能な行

行の幅を変更できるようにするなら、以下のようにsizable プロパティをt rueに指定します。trueに指定したら、ユーザーは隣接した column コンポーネント中のボーダーをドラッグして行の幅を変更できます。

<window>
    <grid>    
        <columns id="cs" sizable="true">        
            <column label="AA"/>            
            <column label="BB"/>            
            <column label="CC"/>            
        </columns>        
        <rows>        
            <row>            
                <label value="AA01"/>                
                <label value="BB01"/>                
                <label value="CC01"/>                
            </row>            
            <row>            
                <label value="AA01"/>                
                <label value="BB01"/>                
                <label value="CC01"/>                
            </row>            
            <row>            
                <label value="AA01"/>                
                <label value="BB01"/>                
                <label value="CC01"/>                
            </row>            
        </rows>        
    </grid>    
    <checkbox label="sizeable" checked="true" onCheck="cs.sizeable = self.checked"/>    
</window>

onColSizeイベント

ユーザーがwidthをサイズ変更すると、onColSizeイベントはorg.zkoss.zul.event.ColSizeEventとともに送信されます。行のwidthはonColSizeイベントが送られる前に調整されます。つまり、イベントは無視できる通知として送信されます。また、イベントリスナの中で何でも任意の動作を定義できます。