qooxdoo

the new era of web development

 

Virtual List

The virtual List is a widget which based on the virtual infrastructure from the framework.

Preview Image

widget/virtuallist.png

Description

The qx.ui.list.List is based on the virtual infrastructure and supports filtering, sorting, grouping, single selection, multi selection, data binding and custom rendering.

Using the virtual infrastructure has considerable advantages when there is a huge amount of model items to render because the virtual infrastructure only creates widgets for visible items and reuses them. This saves both creation time and memory.

With the qx.ui.list.core.IListDelegate interface it is possible to configure the list's behavior (item and group renderer configuration, filtering, sorting, grouping, etc.).

Note

At the moment we only support widget based rendering for list and group items, but we are planing also to support HTML based rendering in a future release.

Code Example

Here's an example. We create a simple list example with 2500 items, sorting the items ascending, selecting the 20th item and we log each selection change.

//create the model data
var rawData = [];
for (var i = 0; i < 2500; i++) {
  rawData[i] = "Item No " + i;
}
var model = qx.data.marshal.Json.createModel(rawData);

//create the list
var list = new qx.ui.list.List(model);

//configure the lists's behavior
var delegate = {
  sorter : function(a, b) {
    return a > b ? 1 : a < b ? -1 : 0;
  }
};
list.setDelegate(delegate);

//Pre-Select "Item No 20"
list.getSelection().push(model.getItem(20));

//log selection changes
list.getSelection().addListener("change", function(e) {
  this.debug("Selection: " + list.getSelection().getItem(0));
}, this);

API

Here is a link to the API of the widget:

Table Of Contents

Previous topic

Tree

Next topic

Window

This Page