qooxdoo

the new era of web development

 

Virtual SelectBox

The virtual SelectBox has the same act like the SelectBox, but the virtual SelectBox is based on the virtual infrastructure from the framework.

Preview Image

widget/virtualselectbox.png

Features

  • Mouse and keyboard support.
  • Items with plane text and/or icons
  • Ellipsis: If the label does not fit into the widget bounds an ellipsis (”...”) is rendered at the end of the label.
  • Supports filtering, sorting, grouping, data binding and custom rendering like the Virtual List.

Mouse and keyboard behavior:

       
  keyboard open drop-down key down; key up; space; enter
    close drop-down esc; enter
  mouse open drop-down click on widget
    close drop-down click on item; click outside drop-down
drop-down closed keyboard select next not possible
    select previous not possible
    select first not possible
    select last not possible
  mouse select next not possible
    select previous not possible
drop-down open keyboard select next key down then enter
    select previous key up then enter
    select first page up then enter
    select last page down then enter
  mouse select next click on item
    select previous click on item
    wrap in list no
    preselect mouse over; key up; key down
    select drop-down item on open yes

Description

The qx.ui.form.VirtualSelectBox is based on the virtual infrastructure. It can be used for one selection and uses the Virtual List as drop-down.

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.

The virtual SelectBox uses the same qx.ui.list.core.IListDelegate interface like the Virtual List to configure the SelectBox'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 SelectBox 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 SelectBox
var selectBox = new qx.ui.form.VirtualSelectBox(model);

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

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

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

Demos

Here are some links that demonstrate the usage of the widget:

API

Here is a link to the API of the widget:

Table Of Contents

Previous topic

Virtual ComboBox

Next topic

Window

This Page