|
|
| Line 1: |
Line 1: |
| − | {{ZKDevelopersReferencePageHeader}}
| |
| − | This section introduce the usage of ZK auto sizing APIs, all of these can apply to following components :
| |
| − | {| class="wikitable"
| |
| − | |-
| |
| − | |
| |
| − | *[[ZK Component Reference/Data/Listbox|Listbox]]
| |
| − | **[[ZK Component Reference/Data/Listbox/Listhead|Listhead]]
| |
| − | **[[ZK Component Reference/Data/Listbox/Listheader|Listheader]]
| |
| − | ||
| |
| − | *[[ZK Component Reference/Data/Grid|Grid]]
| |
| − | **[[ZK Component Reference/Data/Grid/Columns|Columns]]
| |
| − | **[[ZK Component Reference/Data/Grid/Column|Column]]
| |
| − | ||
| |
| − | *[[ZK Component Reference/Data/Tree|Tree]]
| |
| − | **[[ZK Component Reference/Data/Tree/Treecols|Treecols]]
| |
| − | **[[ZK Component Reference/Data/Tree/Treecol|Treecol]]
| |
| − | |}
| |
| − | =Use Cases=
| |
| − | Here we take grid with column as an example, showing some use case about how to use the right way to display the data.
| |
| − |
| |
| − | ==Data Length : Short ==
| |
| − | <syntax lang='xml' high='12,13,14,15,16'>
| |
| − | <zk>
| |
| − | <zscript><![CDATA[
| |
| − | String[] msgs2 = {
| |
| − | "Application Developer's Perspective",
| |
| − | "Server+client Fusion architecture",
| |
| − | "Component Developer's Perspective",
| |
| − | "Execution Flow of Loading a Page",
| |
| − | "Execution Flow of Serving an Ajax Request",
| |
| − | "When to Send an Ajax Request"
| |
| − | };
| |
| − | ]]></zscript>
| |
| − | <listbox width="800px">
| |
| − | <listhead>
| |
| − | <listheader label="Product" />
| |
| − | <listheader label="Description" />
| |
| − | <listheader label="Comment" />
| |
| − | </listhead>
| |
| − | <listitem>
| |
| − | <listcell><label value="${msgs2[0]}"></label></listcell>
| |
| − | <listcell><label value="${msgs2[1]}"></label></listcell>
| |
| − | <listcell><label value="${msgs2[2]}"></label></listcell>
| |
| − | </listitem>
| |
| − | <listitem>
| |
| − | <listcell><label value="${msgs2[3]}"></label></listcell>
| |
| − | <listcell><label value="${msgs2[4]}"></label></listcell>
| |
| − | <listcell><label value="${msgs2[5]}"></label></listcell>
| |
| − | </listitem>
| |
| − | </listbox>
| |
| − | <zk>
| |
| − | </syntax>
| |
| − |
| |
| − | *'''Default''' : Data component will show the data correctly, with no width specification. (the exactly width of columns are rendered by browser automatically)
| |
| − |
| |
| − | [[File:ZK5DevRef_GridColumn_Default.png]]
| |
| − |
| |
| − | ===Proportional Width===
| |
| − |
| |
| − | Sure you can use the '''hflex''' we have mentioned in [[ZK Developer's Reference/UI Patterns/Hflex and Vflex#Flexibility_and_Resizing|previous section]].
| |
| − | <syntax lang='xml' start="13">
| |
| − | <listhead>
| |
| − | <listheader label="Product" hflex="1"/>
| |
| − | <listheader label="Description" hflex="2"/>
| |
| − | <listheader label="Comment" hflex="1" />
| |
| − | </listhead>
| |
| − | </syntax>
| |
| − | [[File:ZK5DevRef_GridColumn_hflex.png]]
| |
| − |
| |
| − | ===Minimum Flexibility===
| |
| − | In the cases of '''hflex=min''', if you your content fill the whole data component, you can use '''span=true'''
| |
| − |
| |
| − | <syntax lang='xml' start="2" high='5,8'>
| |
| − | <zscript><![CDATA[
| |
| − | String[] msgs2 = {
| |
| − | "Application Developer's Perspective",
| |
| − | "Very Short Text",
| |
| − | "Server+client Fusion architecture",
| |
| − | "Execution Flow of Serving an Ajax Request",
| |
| − | "Very Short Text",
| |
| − | "When to Send an Ajax Request (Addition Text )"
| |
| − | };
| |
| − | ]]></zscript>
| |
| − | </syntax>
| |
| − | *Origional
| |
| − | <syntax lang='xml' start="13">
| |
| − | <listhead>
| |
| − | <listheader label="Product" hflex="min"/>
| |
| − | <listheader label="Description" hflex="min"/>
| |
| − | <listheader label="Comment" hflex="min" />
| |
| − | </listhead>
| |
| − | </syntax>
| |
| − | [[File:ZK5DevRef_GridColumn_nospan.png]]
| |
| − |
| |
| − |
| |
| − | *Set '''span=true''' - Proportional allocating the blank width
| |
| − | <syntax lang='xml' start="12" high='12'>
| |
| − | <listbox width="800px" span='true'>
| |
| − | <listhead>
| |
| − | <listheader label="Product" hflex="min"/>
| |
| − | <listheader label="Description" hflex="min"/>
| |
| − | <listheader label="Comment" hflex="min" />
| |
| − | </listhead>
| |
| − | </syntax>
| |
| − | [[File:ZK5DevRef_GridColumn_span.png]]
| |
| − |
| |
| − | ==Data Length : Long ==
| |
| − | <syntax lang='xml' start="2" high='5,8'>
| |
| − | <zscript><![CDATA[
| |
| − | String[] msgs2 = {
| |
| − | "Application Developer's Perspective",
| |
| − | "Very Long Long Long Long Long Long Long Long Long Long Text",
| |
| − | "Server+client Fusion architecture",
| |
| − | "Execution Flow of Serving an Ajax Request",
| |
| − | "Very Long Long Long Long Long Long Long Long Long Long Text",
| |
| − | "When to Send an Ajax Request"
| |
| − | };
| |
| − | ]]></zscript>
| |
| − | </syntax>
| |
| − | *'''Default''' : ZK data component will wrap the text to fit the width of column.
| |
| − | [[File:ZK5DevRef_GridColumn_DefaultLong.png]]
| |
| − |
| |
| − | ===Specify Width===
| |
| − | This is the simple way to make the text not be wrapped, but it's hard to give the proper width.
| |
| − |
| |
| − | <syntax lang='xml' start="13" high='14,15,16'>
| |
| − | <listhead>
| |
| − | <listheader label="Product" width="250px"/>
| |
| − | <listheader label="Description" width="470px"/>
| |
| − | <listheader label="Comment" width="280px" />
| |
| − | </listhead>
| |
| − | </syntax>
| |
| − | [[File:ZK5DevRef_GridColumn_DefaultWidth.png]]
| |
| − |
| |
| − | ===Minimum Flexibility===
| |
| − | *When the '''hflex=min''' were set, ZK will calculate the length of content and give width to the columns.
| |
| − | *'''<span style="color:red">Beware</span>''' : Remember setting every column '''hflex''' or '''width''', or they would disappear because not enough space.
| |
| − | <syntax lang='xml' start="13" high='14,15,16'>
| |
| − | <listhead>
| |
| − | <listheader label="Product" hflex="min" />
| |
| − | <listheader label="Description" hflex="min" />
| |
| − | <listheader label="Comment" hflex="min" />
| |
| − | </listhead>
| |
| − | </syntax>
| |
| − | [[File:ZK5DevRef_GridColumn_LongHflex.png]]
| |
| − |
| |
| − | ===Mixed Flexibility and width===
| |
| − | ====Width + Hflex proportion====
| |
| − | <syntax lang='xml' start="13" high='14,15,16'>
| |
| − | <listhead>
| |
| − | <listheader label="Product" width="120px" />
| |
| − | <listheader label="Description" hflex="2" />
| |
| − | <listheader label="Comment" hflex="1" />
| |
| − | </listhead>
| |
| − | </syntax>
| |
| − | [[File:ZK5DevRef_GridColumn_MixhflexnumWidth.png]]
| |
| − |
| |
| − | ====Width + Hflex min====
| |
| − | <syntax lang='xml' start="13" high='14,15,16'>
| |
| − | <listhead>
| |
| − | <listheader label="Product" width="150px" />
| |
| − | <listheader label="Description" hflex="min" />
| |
| − | <listheader label="Comment" hflex="min" />
| |
| − | </listhead>
| |
| − | </syntax>
| |
| − | [[File:ZK5DevRef_GridColumn_MixhflexMinWidth.png]]
| |
| − |
| |
| − | ====Width + Hflex min + Hflex proportion====
| |
| − | <syntax lang='xml' start="13" high='14,15,16'>
| |
| − | <listhead>
| |
| − | <listheader label="Product" width="120px" />
| |
| − | <listheader label="Description" hflex="min" />
| |
| − | <listheader label="Comment" hflex="1" />
| |
| − | </listhead>
| |
| − | </syntax>
| |
| − | [[File:ZK5DevRef_GridColumn_MixhflAllh.png]]
| |
| − |
| |
| | ==Data Length : Dynamic == | | ==Data Length : Dynamic == |
| | If users can't control the data size, that means, you should take both [[#Data_Length_:_Short|short data]] and [[#Data Length : Long|long data]] situation into consideration. | | If users can't control the data size, that means, you should take both [[#Data_Length_:_Short|short data]] and [[#Data Length : Long|long data]] situation into consideration. |
| | | | |
| | Now we have several attributes, rules, and situations, please choose the right solution for your case. | | Now we have several attributes, rules, and situations, please choose the right solution for your case. |
| | + | {| | cellspacing="1" cellpadding="5" border="1" |
| | + | ! Specification |
| | + | !! width="150px" | Span=true |
| | + | !! width="150px" | Hflex proportion |
| | + | !! width="150px" | Hflex=min |
| | + | !! width="150px" | Specific Width |
| | + | |- |
| | + | | Fill whole Grid |
| | + | | colspan="2"| One of below attribute was set |
| | + | || X |
| | + | || ! |
| | + | |- |
| | + | | No Scrollbar Grid |
| | + | || |
| | + | || V |
| | + | || X |
| | + | || ! |
| | + | |- |
| | + | | No Content Wrapping Column |
| | + | || |
| | + | || |
| | + | || V |
| | + | || ! |
| | + | |- |
| | + | | Fill whole Grid + No Scrollbar Grid |
| | + | || |
| | + | || V |
| | + | || X |
| | + | || ! |
| | + | |- |
| | + | | Fill whole Grid + No Content Wrapping |
| | | | |
| − | =API Cheat Sheet=
| + | || V |
| − | | + | | colspan="3"| All Column Component Should have one of these attributes |
| − | =Version History=
| |
| − | {{LastUpdated}}
| |
| − | {| border='1px' | width="100%"
| |
| − | ! Version !! Date !! Content
| |
| − | |-
| |
| − | | 5.0.6
| |
| − | | Feb, 2011
| |
| − | | New specification of auto-sizing features | |
| | |} | | |} |
| | | | |
| − | {{ZKDevelopersReferencePageFooter}}
| + | *'''(Blank)''' : Doesn't matter |
| | + | * '''V''' : Must set |
| | + | * '''X''' : Must not set |
| | + | * '''!''' : Acceptable but something need notice. |