How can I load JSON into TreeStore?

Question

I would like to load a JSON file into a TreeStore to use in a TreePanel. I can load the store with values and have it display if I hard-code the tree, but when I try to load it from a JSON file it does not display anything in the tree. Here is my code:

JSON file: exampleDoc.json

{
    "success": true, 
    "Root": [{
        "name": "Bookmark 1",
        "leaf": true,
        "element": "1"
    }, {
        "name":"Bookmark 2",
        "leaf": true,
        "element": "2"
    }, {
        "name":"Bookmark 3",
        "leaf": true,
        "element": "3"
    }]
}

Here is my model

Ext.define('bkmark', {
    model: 'Ext.data.Model',
    fields: ['name', 'element']
});

Here is my Tree Store

var store = Ext.create('Ext.data.TreeStore', {
    model: 'bkmark',
    proxy: {
        type: 'ajax',
        url: 'exampleDoc.json',
        reader: {
            type: 'json'
        }
    }
});

Here is my Tree Panel

var treePanel = Ext.create('Ext.tree.Panel', {
    title: 'Bookmarking',
    width: 225,
    height: 150,
    store: store,
    rootVisible: false,
    region: 'west',
    collapsible: true,
});

Thanks in advance!

Answer 1

A proxy's reader has a config called root, which defines where the actual data is when you have top level fields like success.

Since your data is under "Root", you should define your reader like so:

reader: {
    type: 'json',
    root: 'Root'
}

Alternatively, you can use the default root, which is data. So in your json change "Root" to "data".

By the way, the standard way to define a model is:

Ext.define('bkmark', {
    extend: 'Ext.data.Model',
    fields : ['name', 'element']
});