Qooxdoo's unique Atom widget combines an image with a label and allows some alignment options for them. The Atom supports shrinking of the label, while keeping the image intact. Here's some code that adds folder icons to the items:
Notice that every
fourth icon is made larger by testing the item number in the
set() method can be applied directly to the List constructor. In
iconOptions property, the
converter() method is overridden to return the
correct icon path. The
data argument would contain the icon's size, which corresponds
to the appropriate folder.
Here is the same list as above, with icons added:
Sorting the List Items
The list's behavior, including filtering, sorting and grouping,
is configured by implementing the
qx.ui.list.core.IListDelegate interface. Objects
that are used as delegates for the
qx.ui.list.List may implement any of the
methods of this interface; they do not need to implement all the methods because the
qx.ui.list.List provides a default implementation if a method is not implemented.
One of the
IListDelegate interface methods is
sorter(var a, var
b). It gives the user the opportunity to sort the model. The sorting method
should return a negative value if
a < b, zero if
a = b, or a positive value
a > b:
The list class's
selectionMode property sets the selection mode
to use. The accepted values are "single", "multi", "additive", and "one". The default
value is "single."
- single: One or no element is selected
- multi: Multiple items can be selected; Also allows empty selections
- additive: Easy Web-2.0 selection mode; Allows multiple selections without modifier keys
- one: If possible, always exactly one item is selected
In addition to the above selection options, qooxdoo offers two more:
quickSelection property enables quick selection, where no click is needed
to change the selection. In other words, hovering over the item is enough to
select it. It's possible only for the modes
one. The default value
dragSelection property enables drag selection, which is the selection
of multiple items through dragging the mouse in a pressed state. It's possible only for
the selection modes
additive. The default value is
Each property is managed via its associated getter, setter, isXXX, and resetXXX methods:
In qooxdoo, the same methods and events apply for single and multiple selections. To do that, both single and multiple selections must work with arrays. The upside of this minor inconvenience is that it allows you to change widgets without having to worry about the selection method, because the method and event names don't change.
You can attach the listener directly to the
so that it will have access to the
Event's data. From there, you have to call
getItem(0) to get the first item for a single item selection:
Besides sorting, another use for delegates is to create item groups.
group() function defines and returns the grouping criteria as shown in the
The group headers are displayed as "greyed-out" (disabled) items:
- Selection Handling
- Virtual List API Documentation
- Virtual List Demo Browser
- Virtual List Demo Browser
- Filtered List Demo Browser
Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .
resides in Ottawa, Canada, and is the founder of GravelleConsulting.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Rob to receive a free estimate on your software project. Should you hire Rob and his firm, you'll receive 15% off for mentioning that you heard about it here!
In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).
Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!
Original: January 5, 2010