Treestore empty - is JSON valid?

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
           }
        ]
     } );

Nearly all looks good to me, but the root and children property need to be the same, so I'd start by changing `value` in your json response to `children`, and define the root of your reader as `children`. Let me know the result of this. — Izhaki, Aug 08 '12 at 21:51
Thanks! Changing `value` to `children` in my json solved it! 1. Can you please explain why it has to be `children`? 2. What role does the `root: 'value'` in my `TreeStore` play then? 3. Post an answer and Ill accept it. — Shlomo, Aug 09 '12 at 07:23

score 3 · Accepted Answer · answered Aug 09 '12 at 10:45

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.

score 2 · Answer 2 · answered Aug 30 '13 at 15:24

Here is an example of a tree panel i was able to get functional in MVC structure using 'data' as children:

JSON:

Ext.data.JsonP.callback4({
    "message": "", "data": [
      {
          "descr": "TEST REASON",
          "leaf": false,
          "data": [
            {
                "descr": "TEST REASON",
                "leaf": true,
                "data": null
            }
          ]
      },
      {
          "descr": "Another Type Code",
          "leaf": false,
          "data": []
      },
      {
          "descr": "Quite A Different One I Think",
          "leaf": false,
          "data": [
            {
                "descr": "A Child Of That",
                "leaf": true,
                "data": null
            }
          ]
      }
    ]
})

MODEL:

Ext.define('App.model.treePanel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'descr', type: 'auto' },
        { name: 'leaf', type: 'auto' }
    ],
    proxy: {
        type: 'jsonp',
        url: 'yourURL',
        //extraParams: {
        //},
        headers: { 'Content-type': 'text/json;  charset=utf-8', 'Accepts': 'text/json' },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        }
    }
});

STORE:

Ext.define('App.store.treePanels', {
    extend: 'Ext.data.TreeStore',
    model: 'App.model.treePanel'
});

VIEW:

Ext.define('App.view.treePanel', {
    extend: 'Ext.tree.Panel',
    xtype:'treePanel',
    title: 'My Items',
    store: 'treePanels',
    rootVisible: false,
    //hideHeaders:true,
    columns: [
        {
            xtype: 'treecolumn',
            dataIndex: 'descr',
            text: 'Current Types and Reasons',
            flex: .5
        }
    ],
    tbar:{
        items: [
            {
                xtype: 'button',
                text: 'Remove Item'
            },
            {
                xtype: 'button',
                text:'Edit Item'
            }
            ]
    }
});

Please note: rootVisible:false was required.

Also note, my request is jsonp not ajax – weeksdev Aug 30 '13 at 15:30 — weeksdev, Aug 30 '13 at 15:30

Treestore empty - is JSON valid?

2 Answers2

Linked