ExtJS 4.0.7 Download Full TreePanel

Question

I have a problem with TreeSphere ExtJS 4.0.7. I would like to load a complete tree from a JSON request. The query returns the following:

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

If it does not work with the following store configuration (or any other that I 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 tree with this configuration, it does not 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, } 

When opening a node, ExtJS always loads the entire tree from it root node into subnode, requesting it via ajax, instead of displaying preloaded data. How can I achieve to load the "Hostname" node by opening the "OS"?

Answer 1

Can you do this. But there seems to be a problem with your json.

The root of your json data , but for the nested data to load correctly, your root and all child properties must be the same. Since you defined the root of your reader as data , you must replace all children in json with data .

Take a look at this question , and if you want a deeper understanding of this, also look at this question . You can also see this working JsFiddle .

If you defined your reader as follows:

  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":[ ] } ] } ] } ] }