Download Offline Manual - Docs

qooxdoo Documentation, Release 2.1.2
// creates the List and sets the selection mode
var list = new qx.ui.form.List();
list.setSelectionMode("multi");
this.getRoot().add(list, {top: 20, left: 20});
// registers the listener
list.addListener("changeSelection", function(event) {
this.debug("Selection (event): " + event.getData());
}, this);
// creates the items
for (var i = 0; i < 10; i++)
{
var item = new qx.ui.form.ListItem("ListItem" + i);
list.add(item);
}
// sets selection
list.setSelection([list.getChildren()[1], list.getChildren()[4]]);
this.debug("Selection (list): " + list.getSelection());
The output should look like this:
(1) Selection (event): qx.ui.form.ListItem[1p],qx.ui.form.ListItem[2a]
(2) Selection (list): qx.ui.form.ListItem[1p],qx.ui.form.ListItem[2a]
4.2.6 Drag & Drop
Drag & Drop is one of the essential technologies in today’s applications. An operation must have a starting point (e.g.
where the mouse was clicked), may have any number of intermediate steps (widgets that the mouse moves over during
a drag), and must either have an end point (the widget above which the mouse button was released), or be canceled.
qooxdoo comes with a powerful event-based layer which supports drag&drop with full data exchange capabilities.
Every widget can be configured to cooperate with drag&drop be it as sender (draggable), receiver (droppable) or both.
A sender (drag target) can send data to any receiver (drop target).
You may like to see an example first:
• Drag&Drop for Lists
Basics
To enable Drag & Drop the properties draggable and droppable must be enabled on the specific widgets. For list type
sources or targets it’s often enough to make the top-level widget drag- or droppable e.g. the list instead of the list
items.
var dragTarget = new qx.ui.form.List;
dragTarget.setDraggable(true);
var dropTarget = new qx.ui.form.List;
dropTarget.setDroppable(true);
The basic drag&drop should start working with these properties enabled, but it will show the no-drop cursor over all
potential targets. To fix this one needs to register actions (and optionally data types) supported by the drag target. This
can be done during the dragstart event which is fired on the drag target:
94
Chapter 4. qx.Desktop