gistfile1.txt

qx.Class.define("OpenCloseController",
{
  extend: qx.core.Object,
  
  construct: function(tree, model, openPropertyName)
  {
    this.base(arguments);
    
    if (openPropertyName)
    {
      this.setOpenPropertyName(openPropertyName);
    }
    
    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, this.getOpenPropertyName())) {
        if (node.getOpen()) {
          tree.openNode(node);
        }
        else {
          tree.closeNode(node);
        }
      }
    }.bind(this);
    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]);
  },
  
  properties :
  {
    openPropertyName :
    {
      check : "String",
      nullable : false,
      init : "open"
    }
  },
  
  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();
      var modelPropRe = new RegExp("\\." + this.getOpenPropertyName() + "$");
      console.warn("modelPropRe=" + modelPropRe + ", buttle.name=" + bubble.name + ", test=", modelPropRe.test(bubble.name));
      
      // open related? sync it back to the node item.
      if (modelPropRe.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 : "Root",
    open : false,
    children :
    [
      {
        name : "Branch 1",
        open : false,
        children :
        [
          {
            name : "Leaf 1.1"
          },
          {
            name : "Leaf 1.2"
          },
          {
            name : "Branch 1.3",
            open : true,
            children :
            [
              {
                name : "Leaf 1.3.1"
              }
            ]
          }
        ]
      }
    ]
  }
];

var model = qx.data.marshal.Json.createModel(nodes, false);

var tree = new qx.ui.tree.VirtualTree(model.getItem(0), "name", "children");
tree.set(
  {
    width : 200,
    height : 400,
    showTopLevelOpenCloseIcons : true
  });

new OpenCloseController(tree, model, "open");

// For easy inspection...
window.model = model;

var doc = this.getRoot();
doc.add(tree,
{
  left : 100,
  top  : 50
});

qx.event.Timer.once(
  function()
  {
    model.getItem(0).setOpen(true);
  },
  this,
  2000);