dynamic root nodes and static children

[sveatlo]

Hi,
I'm new to Sencha ExtJS, but I'm trying to write an application in it.

Unfortunately, I can't figure out, how to create a treestore, where the root nodes will be loaded dynamically and then static children leafs will be added.

This is the json code, I receive from the source server:

{
    "companies": {
        "company": [{
            "autostart": "false",
            "createDt": "2012-09-10T13:19:22.645+02:00",
            "dbName": "demo",
            "id": "1",
            "idCsGroup": "39fa897328d1e6a55ab199f1410015d2",
            "name": "Moje Firma s.r.o.",
            "show": "true",
            "status": "ESTABLISHED"
        }, {
            "autostart": "false",
            "createDt": "2012-09-10T13:24:49.765+02:00",
            "dbName": "demo_de",
            "id": "1",
            "idCsGroup": "39fa897328d1e6a55ab199f1410015d2",
            "name": "Já Živnostník",
            "show": "true",
            "status": "ESTABLISHED"
        }, {
            "autostart": "false",
            "createDt": "2012-09-10T13:35:22.408+02:00",
            "dbName": "demo_neziskova",
            "id": "1",
            "idCsGroup": "39fa897328d1e6a55ab199f1410015d2",
            "name": "Nezisková organizace",
            "show": "true",
            "status": "ESTABLISHED"
        }, {
            "autostart": "false",
            "createDt": "2012-09-10T13:29:10.062+02:00",
            "dbName": "demo_prispevkovka",
            "id": "1",
            "idCsGroup": "39fa897328d1e6a55ab199f1410015d2",
            "name": "Příspěvková organizace",
            "show": "true",
            "status": "ESTABLISHED"
        }, {
            "autostart": "false",
            "createDt": "2011-08-21T15:39:47.604+02:00",
            "dbGroup": "demo_sk",
            "id": "1",
            "idCsGroup": "39fa897328d1e6a55ab199f1410015d2",
            "name": "Moje Firma SK s.r.o.",
            "show": "true",
            "status": "ESTABLISHED"
        }]
    }
}

My first problem is, that I don't know how to get the name value for each company, because I don't know what to set as the root node, it doesn't work with 'companies', but neither with 'company'.
And my second problem is how to assign static children to the dynamically loaded nodes.

For each of these companies, I need to assign 5 static children, so the final tree will look similar to this:

-Moje Firma s.r.o.
--child1
--child2
--child3
--child4
--child5
-Já Živnostník
--child1
--child2
--child3
--child4
--child5
-Nezisková organizace
--child1
--child2
--child3
--child4
--child5
-Příspěvková organizace
--child1
--child2
--child3
--child4
--child5
-Moje Firma SK s.r.o.
--child1
--child2
--child3
--child4
--child5

Is it even possible?

Thanks for any reply

[flanders]

It is a bit of an unusual use case I guess. What I would do is:

1. Do not send a root node on your model/store, just set rootVisible: false on the tree this will generate a request to get the root node
2. Respond with a rootnode with whatever name and give the items you want as root nodes. Since the real root (a tree always has one real root) is invisible.
3. Listen to the load event, so you know when the records are retrieved and shown. At that point you can add your own static children. Alternativly, you can also add them inline serverside (I would recommend that)

A response should look like this then:

{
  "success": true,
  "data": [
    {
      "id": "1",
      "name": "Home",
      "templateId": "home.tpl",
      "active": "1",
      "created": "2012-10-31 01:28:13",
      "changed": "2012-10-31 01:28:13",
      "compositeContentId": "1",
      "url": "\/",
      "hasChildren": "1",
      "children": [
        {
          "id": "2",
          "name": "nieuwe pagina test",
          "templateId": "home.tpl",
          "active": "1",
          "created": "2012-11-21 14:26:26",
          "changed": "2012-11-21 14:26:26",
          "compositeContentId": "134",
          "url": "\/nieuwepaginatest\/",
          "hasChildren": "0"
        }
      ],
      "fullIdPathToParent": "",
      "urlPart": "",
      "templateName": "Home",
      "leaf": false
    }
  ]
}

The outer object with a success: true and then a data property is the same as on a non-tree store. After that on the data you give an array with nodes. You could already add deeper children using the children property like I do here.

[sveatlo]

Thanks for reply.
Anyway, I can't change the server respond, because I'm loading the data from a remote server.

[flanders]

Well in that case I would use a static root when instantiating the store. After the store is instantiated you can do a Ext.Ajax.request({}) to the source by hand and use the result to build the tree.

Un-tested dry code:

Ext.Ajax.request({
  url: 'your/source',
  success: function(response, options) {
    var json = Ext.decode(response.responseText);
    Ext.Array.each(json.companies.company, function(item) {
       var companyNode = yourGrid.getRootNode().appendChild({
         text: item.name
       });

       companyNode.appendChild({
         text: 'First static item'
       });
       ....
    });
  }
});

Not very elegant imho, but it should work

[sveatlo]

Thanks a lot for your replies the append option is right, what I was looking for.