Skip to content

Instantly share code, notes, and snippets.

@cajus
Last active September 29, 2017 08:34
Show Gist options
  • Save cajus/52bed701ae8329fbce342319a8954e01 to your computer and use it in GitHub Desktop.
Save cajus/52bed701ae8329fbce342319a8954e01 to your computer and use it in GitHub Desktop.
Qooxdoo virtual tree with 'open' state tied to model items
class.define("OpenCloseController",
{
extend: qx.core.Object,
construct: function(tree, model)
{
this.base(arguments);
this._tree = tree;
this._lids = [];
// Sync tree nodes
var sync = function(node) {
if (qx.Class.hasProperty(node.constructor, "children")) {
node.getChildren().forEach(sync);
}
if (qx.Class.hasProperty(node.constructor, "open")) {
if (node.getOpen()) {
tree.openNode(node);
}
else {
tree.closeNode(node);
}
}
};
sync(model.getItem(0));
// Wire change listeners
var lid = tree.addListener("open", this._onOpen, this);
this._lids.push([tree, lid]);
lid = tree.addListener("close", this._onClose, this);
this._lids.push([tree, lid]);
lid = model.addListener("changeBubble", this._onChangeBubble, this);
this._lids.push([model, lid]);
},
members:
{
_tree: null,
_lids: null,
_onOpen: function(ev)
{
ev.getData().setOpen(true);
},
_onClose: function(ev)
{
ev.getData().setOpen(false);
},
_onChangeBubble: function(ev)
{
var bubble = ev.getData();
// open related? sync it back to the node item.
if (/\.open$/.test(bubble.name)) {
if (bubble.value && !this._tree.isNodeOpen(bubble.item)) {
this._tree.openNode(bubble.item);
}
else if (!bubble.value && this._tree.isNodeOpen(bubble.item)) {
this._tree.closeNode(bubble.item);
}
}
}
},
destruct: function()
{
this._tree = null;
this._lids.forEach(function(data) {
data[0].removeListenerById(data[1]);
});
}
});
var nodes =
[
{
name : "Branch",
open : false,
children :
[
{
name : "Leaf"
}
]
}
];
var model = qx.data.marshal.Json.createModel(nodes, true);
var tree = new qx.ui.tree.VirtualTree(model.getItem(0), "name", "children");
tree.set(
{
width : 200,
height : 400,
showTopLevelOpenCloseIcons : true
});
new OpenCloseController(tree, model);
// For easy inspection...
window.model = model;
var doc = this.getRoot();
doc.add(tree,
{
left : 100,
top : 50
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment