How to bind a tree to a model in qooxdoo? and what

Question

I've been searching on Google but no help.

I would like to know how to bind a Tree with a Model or Store, I don't even know which one is more suitable (http://manual.qooxdoo.org/1.6.x/pages/data_binding/data_binding.html).

I have a service that fetches data from the database and saves data in it's store.

this.__store = new qx.data.store.Json(url, delegate);
this.__store.bind("model", this, "testData");

after the service updates, will dispatch an event and I'm listening to it:

  service.addListener("changeTestData", function(e) {
    this.debug(qx.dev.Debug.debugProperties(e.getData()));
    var tree = main.tree;
  }, this);

I don't know if this is the right way to do. I suppose not, but I don't know how to bind the model/service/store to the tree in order to work.

My tree:

    var tree = this.tree = new qx.ui.tree.Tree().set({
      width : 200,
      height : 400
    });

thanks

UPDATE:

Still doesn't work.. it only shows me one item and no label below and I cannot open it to see its child. error: "Uncaught qx.core.AssertionError: error" My data format:

[{_id:3423, title:"asdad", kids: []}] and so on...
-index(0): 
-- title: abc
-- _id: 4f4cea3e4b58dffc04000001
-- kids: 

-index(1): 
-- title: abc
-- _id: 4f4cea3e4b58dffc04000002
-- kids: ---index(0): 
---- title: abc
---- _id: 4f4cea3e4b58dffc04000001
---- kids: 

This is my code:

  var url = "http://127.0.0.1:8000/";
  var delegate = { 
    configureRequest : function(request) { 
      request.set({ 
        "method"      : "POST", 
        "requestData" : { 
          "serviceToUseOnServer" : "articles"
        } 
      }); 
    }, 
  };

  var status = new qx.ui.basic.Label("Loading...");
  var store = new qx.data.store.Json(url, delegate);
  store.bind("state", status, "value");

  var tree = new qx.ui.tree.Tree().set({
    width : 200,
    height : 400
  });
  var controller = new qx.data.controller.Tree(null, tree, "kids", "title");
  store.bind("model", controller, "model");

  main.add(tree, {top: 50, left: 200});
  main.add(status, {top: 50, right: 200});

  store.addListener("loaded", function(e) {
    // now I can't even reach this point. the error spawns and this is not called..
    debugger;
    var root = tree.getRoot();
    // tree.getRoot().setOpen(true);
    // gives me an error because root is null
    this.debug(qx.dev.Debug.debugProperties(e.getData()));
  }, this);

Answer 1

Cross-post to qooxdoo user list.

I found a very good example for your question: http://demo.qooxdoo.org/current/demobrowser/#data~JsonToTree.html

There you can see, how to bind a JSON store to a TreeController.

In demo browser, you will find a few more examples.

Edit: Please check the fact, that your JSON file has a root node inside. The JSON file of our example contains a root node. This would explain why root node is null, in your code snippet.