Filter"
m (→Regions) |
m (→How it Works) |
||
Line 14: | Line 14: | ||
==How it Works == | ==How it Works == | ||
− | The Filterpopup component is composed from three regions. | + | The Filterpopup component is composed from three regions. The bottom region is responsible for commands, such as OK button, Cancel button. |
===Regions=== | ===Regions=== | ||
Line 23: | Line 23: | ||
Default implementation: | Default implementation: | ||
− | <source lang="xml"> | + | <source lang="xml" high="4,6"> |
<div id="top" vflex="min"> | <div id="top" vflex="min"> | ||
<vlayout> | <vlayout> | ||
Line 35: | Line 35: | ||
====Center==== | ====Center==== | ||
+ | The center region is responsible for show the filtered result by constraint by using Listbox component. | ||
+ | Default implementation: | ||
+ | <source lang="xml"> | ||
+ | |||
+ | </source> | ||
+ | |||
====Bottom==== | ====Bottom==== | ||
Revision as of 09:09, 30 October 2013
Sam Chuang, Engineer, Potix Corporation
October 30, 2013
ZK 6.5 and later
Introduction
ZK give developer the power of creating advanced component, extending the component set for your application. In this article, I will create a re-usable component: filterpopup. It's designed for working with collection component that needs filter functionality. For instance, the filterpopup component can be used with Grid, user can use it to filter out huge amount of data, search the required information quickly and intuitively.
File:ZK Filter Firstlook Default.jpg
Besides, it's also designed for highly customizable, able to integrate with different type of constrain, seamlessly works with different type of data type.
File:ZK Filter Firstlook Custom.jpg
How it Works
The Filterpopup component is composed from three regions. The bottom region is responsible for commands, such as OK button, Cancel button.
Regions
Top
The top region is responsible for configuration settings. The default implementation includes:
- Textbox: used for input constraint to perform filtering command.
- Checkbox: to perform select all command.
Default implementation:
<div id="top" vflex="min">
<vlayout>
<textbox value="@bind(vm.constraint)" instant="true"
onChanging="@command('performFiltering', constraint=event.value)"></textbox>
<checkbox checked="@load(vm.selectAll)" label="(Select All)"
onCheck="@command('selectAll', checked=event.checked)"></checkbox>
</vlayout>
</div>
Center
The center region is responsible for show the filtered result by constraint by using Listbox component. Default implementation:
Bottom
Filter by Constraint
The default constraint type is String, using Textbox component's onChanging event to perform filtering task.
Custom Constraint
Selection
Commands
- OK button
- Cancel button