From Documentation

Jump to: navigation, search




  • Author
    Robbie Cheng, Engineer, Potix Corporation
  • Date
    Aug 18, 2008
  • Version
    Applicable to zk-3.5.0-FL-2008-08-18 and later.



Contents

Introduction

In the previous Working with Portal Layouts, and Using Columnlayout Component, we have shown various way to lay out the content. In this article, we will guide you how to use Tablelayout. Tablelayout is a container as an HTML table whose columns can be specified, and rowspan and colspan of its child can also be specified to create complex layouts within the table.

Live Demo

Let's take a look at the real demo.


Example in the following fragments,

<tablelayout id="tbl" columns="3">
	<tablechildren id="tc1" rowspan="1" colspan="1">
		<panel title="table1" border="normal"
			maximizable="true" collapsible="true" >
			<panelchildren>Panel</panelchildren>	
		 </panel>
	</tablechildren>
	<tablechildren  colspan="3">
		<panel title="table2" border="normal"
			maximizable="true" collapsible="true">
			<panelchildren>Panel</panelchildren>
		 </panel>
	</tablechildren>
	<tablechildren >
		<panel title="table3" border="normal"
			maximizable="true" collapsible="true">
			<panelchildren>Panel</panelchildren>	
		 </panel>
	</tablechildren>
	<tablechildren>
		<panel title="table4" border="normal"
			maximizable="true" collapsible="true">
			<panelchildren>Panel</panelchildren>	
		 </panel>
	</tablechildren>
	................
</tablelayout>


As you can see, a Tablelayout can have more than one column (i.e. Tablechildren). The rowspan and colspan of Tablechildren can be specified to create complex layout. Though, only Panel components is allowed in Tablechildren, any other ZK components could be embedded in Panel component.

Download

Download the tablelayout-demo.zip for the article here.

Summary

In this small talk, we have demonstrated you the power of Tablelayout, and it provides more flexibility to design the layout with ZK. If you come up with any idea, please feel free to leave a message or post it on ZK forum.




Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.
You got stuck here?
Let us know why!
For questions please use the forum