ExtJS 4.0.7 Load complete TreePanel

Question

I am in trouble with the ExtJS 4.0.7 TreePanel. I would like to load the complete tree from on JSON request. The request returns the following:

{
  "data": {
    "children": [
      {
        "text": "OS",
        "leaf": false,
        "children": [
          {
            "text": "Hostname",
            "leaf": false,
            "children": [
              {
                "text": "hostname.int.com",
                "leaf": true,
                "children": []
              }
            ]
          }
        ]
      }
    ]
  }
}

With it doesn't work with the following store configuration (or any other i've tried)

Ext.define('My.store.SysInfo', {
extend: 'Ext.data.TreeStore',
    model: 'My.model.SysInfo',

    proxy : {
        type : 'ajax',
        url : '/sysinfo/getSysInfo.php',
        reader : {
            root : 'data'
        }
    }
});

The Model has the following code:

Ext.define('My.model.SysInfo', {
    extend: 'Ext.data.Model',
    fields: ['text']
});

When adding a treepanel with this configuration, it doesn't work:

{
    xtype: 'treepanel',
    name : 'sysinfo',
    height: '100%',
    store: 'My.store.SysInfo',
    lines: true,
    autoScroll : true,
    expanded : true,
    rootVisible: false,
    folderSort: true,
    multiSelect: false,
    useArrows: true,
}

By opening a node, ExtJS always loads the whole tree from it's root node into the subnode by requesting it via ajax, instead of showing the preloaded data. How can i achieve, that it loads the "Hostname" node by opening "OS"?

Answer 1

You can definitely do that. But there seems to be an issue with your json.

The root of your json is data, but in order for the nested data to load correctly, your root and all children properties need to be the same. Since you have defined your reader's root as data, you should replace all children in your json to data.

Please look at this question, and if you fancy a deeper understanding of it all also look at this question. You can also have a look at this working JsFiddle.

If you define your reader like so:

    reader : {
        type: 'json',
        // root : 'children' // no real need for this a children is the default.
    }

This json should load correctly:

{
  "children":[
     {
        "text":"OS",
        "leaf":false,
        "children":[
           {
              "text":"Hostname",
              "leaf":false,
              "children":[
                 {
                    "text":"hostname.int.com",
                    "leaf":true,
                    "children":[

                    ]
                 }
              ]
           }
        ]
     }
  ]
}