Columns"

From Documentation
Line 58: Line 58:
 
</window>
 
</window>
 
</source>
 
</source>
 +
 +
=Properties=
 +
==Menupopup==
 +
By default, the ''none'' is assumed, you can specify the ''auto'' to appear a default menu for the columns. Or you can provide your own menupopup for the component.
 +
===Auto===
 +
[[Image:ZKComRef_Grid_Columns_Menu.png]]
 +
<source lang="xml" high="2">
 +
<grid>
 +
<columns menupopup="auto">
 +
<column label="Author" sort="auto"/>
 +
<column label="Title" sort="auto"/>
 +
<column label="Publisher" sort="auto"/>
 +
<column label="Hardcover" sort="auto"/>
 +
</columns>
 +
</source>
 +
===Customized Menupopup===
 +
[[Image:ZKComRef_Grid_Columns_Customized_Menu.png]]
 +
<source lang="xml" high="2,8">
 +
<window title="Column's Menu Demo" border="normal" width="500px">
 +
<menupopup id="editPopup">
 +
        <menuitem label="Group" image="~./zul/img/grid/menu-group.png"/>
 +
        <menuitem label="Sort Ascending" image="~./zul/img/grid/menu-arrowup.png"/>
 +
        <menuitem label="Sort Descending" image="~./zul/img/grid/menu-arrowdown.png"/>
 +
</menupopup>
 +
<grid>
 +
<columns sizable="true" menupopup="editPopup">
 +
<column id="col" label="Type" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}"/>
 +
<column id="col1" label="Type1" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}"/>
 +
<column id="col2" label="Content"/>
 +
</columns>
 +
</grid>
 +
</window>
 +
</source>
 +
 +
As you can see, the example above specify a customized menupopup to the columns as its column menu.
  
 
=Supported Events=
 
=Supported Events=

Revision as of 02:17, 2 December 2010

Columns

Employment/Purpose

Defines the columns of a grid.

Each child of a columns element should be a org.zkoss.zul.Column element.


Example

ZKComRef Grid Example.png

<window title="Grid Demo" border="normal" width="360px">
	<zscript> class Comp implements Comparator { private boolean _asc;
		public Comp(boolean asc) { _asc = asc; } public int compare(Object o1,
		Object o2) { String s1 = o1.getChildren().get(0).getValue(), s2 =
		o2.getChildren().get(0).getValue(); int v = s1.compareTo(s2); return
		_asc ? v: -v; } } Comp asc = new Comp(true), dsc = new Comp(false);
	</zscript>
	<grid>
		<columns sizable="true">
			<column label="Type" sortAscending="&#36;{asc}"
				sortDescending="&#36;{dsc}" width="50px"/>
			<column label="Content" />
		</columns>
		<rows>
			<row>
				<label value="File:" />
				<textbox width="99%" />
			</row>
			<row>
				<label value="Type:" />
				<hbox>
					<listbox rows="1" mold="select">
						<listitem label="Java Files,(*.java)" />
						<listitem label="All Files,(*.*)" />
					</listbox>
					<button label="Browse..." />
				</hbox>
			</row>
			<row>
				<label value="Options:" />
				<textbox rows="3" width="99%" />
			</row>
		</rows>
	</grid>
</window>

Properties

Menupopup

By default, the none is assumed, you can specify the auto to appear a default menu for the columns. Or you can provide your own menupopup for the component.

Auto

ZKComRef Grid Columns Menu.png

	<grid>
		<columns menupopup="auto">
			<column label="Author" sort="auto"/>
			<column label="Title" sort="auto"/>
			<column label="Publisher" sort="auto"/>
			<column label="Hardcover" sort="auto"/>
		</columns>

Customized Menupopup

ZKComRef Grid Columns Customized Menu.png

<window title="Column's Menu Demo" border="normal" width="500px">
	<menupopup id="editPopup">
        <menuitem label="Group" image="~./zul/img/grid/menu-group.png"/>
        <menuitem label="Sort Ascending" image="~./zul/img/grid/menu-arrowup.png"/>
        <menuitem label="Sort Descending" image="~./zul/img/grid/menu-arrowdown.png"/>
	</menupopup>
	<grid>
		<columns sizable="true" menupopup="editPopup">
			<column id="col" label="Type" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}"/>
			<column id="col1" label="Type1" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}"/>
			<column id="col2" label="Content"/>
		</columns>
	</grid>
</window>

As you can see, the example above specify a customized menupopup to the columns as its column menu.

Supported Events

Name
Event Type
None None

Supported Children

* Column

Use Cases

Grid

Version History

Last Update : 2010/12/02


Version Date Content
     



Last Update : 2010/12/02

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.