Question

My code looks like this but there is there is no data in the store / tree.

Is the JSON store-valid? Do I need a root on top of the JSON?

What columns must be defined in the Tree panel?

JSON:

{
   "status" : {
      "status" : 0,
      "msg" : "Ok",
      "protocolversion" : "1.1.json"
   },
   "value" : {
      "name" : "Root",
      "path" : "\/",
      "leaf" : false,
      "children" : [
            {
               "name" : "subfolder1",
               "path" : "\/subfolder1",
               "leaf" : false,
               "children" : []
            },
            {
               "name" : "subfolder2",
               "path" : "\/subfolder2",
               "leaf" : false,
               "children" : []
            },
            {
               "name" : "report1",
               "path" : "\/report1",
               "leaf" : true,
               "children" : []
            }
         ]
   }
}

My ExtJs Code:

Model:

// Model for store
     var oModel = Ext.define('TreeModel', {
        extend: 'Ext.data.Model',
        fields: [
           { name: 'name',         type: 'string' },
           { name: 'path',         type: 'string' }
        ]
     });

Store:

     // Store with local proxy
     var oStore = Ext.create('Ext.data.TreeStore', {
        model: oModel,
        autoLoad: true,
        proxy: {
           type  : 'ajax',
           url   : './data/response.json'
        },
        reader: {
           type  : 'json',
           root  : 'value'
        }
     }); 

TreePanel:

     // View with TreePanel
     var oTreePanel = Ext.create( 'Ext.tree.Panel', {
        store       : oStore,
        useArrows   : true,
        displayField: 'text',
        rootVisible : true,
        multiSelect : true,
        border      : 0,
        columns     : [
           {
              xtype    : 'treecolumn',
              dataIndex: 'name',
              text     : 'Tree',
              flex     : 3
           },
           {
              dataIndex: 'path',
              text     : 'Path',
              flex     : 2
           }
        ]
     } );

Answer 1

You need to change value to children in your json and in the root of your reader.

The way to think about is this: The reader’s root tells the reader where record data starts. But because tree data is nested (a node can have children) ExtJS looks for another root within each node (then another root within this latter node, and so on recursively).

So if you called your reader’s root ‘children’,it will find the subnodes within a node if it has children node.

You could equally call it ‘subs’, or ‘whatever’; you just need to make sure the same thing is used throughout the hierarchy, include the root of the json data.