ExtJS5 Loading JSON from TreeStore into TreePanel

Question

I've done a lot of searching for answers and testing, but just can't seem to get the TreePanel in my main view to display the JSON tree data I am getting. I'm hoping someone can call out something I'm doing wrong or not utilizing correctly.

Here is my code:

Tree.json

{
"message": "SUCCESS",
"details": {
    "text": "Categories",
    "expanded": "true",
    "leaf": "false",
    "children": [
        {
            "text": "Child 1",
            "leaf": "true"
        },
        {
            "text": "Child 2",
            "leaf": "true"
        },
        {
            "text": "Child 3",
            "expanded": "true",
            "leaf": "false",
            "children": [
                {
                    "text": "Grandchild",
                    "leaf": "true"
                }
            ]
        }
    ]
}
}

Model.js

Ext.define('MyApp.model.Model',{
extend: 'Ext.data.TreeModel',

requires: ['Ext.data.Field'],

fields:['text']

});

Models.js

Ext.define('MyApp.store.Models',{
extend: 'Ext.data.TreeStore',
alias: 'store.models',
model: 'MyApp.model.Model',

autoLoad: true,

proxy: {
    type: 'ajax',
    url: 'data/Tree.json',
    reader: {
        type: 'json',
        rootProperty: 'details'
    }
});

View.js (Snippet)

xtype: 'treepanel',
        maxWidth: 300,
        minWidth: 150,
        store: {
            type: 'models',
        },
        rootVisible: false

In my view, I see an empty tree. When I set rootProperty to 'details', Network tab in Chrome's Developer Tools and Firebug show infinite requesting of my json, but no loading into the view.

Anything to point me in the right direction would be extremely helpful! I can't think of anything I'm doing wrong as the syntax all seems to be correct, so I've hit a dead end.

Thanks!

Edit: I was able to load the json data when creating a store in-line in my view, but not from a separate store.js file. I also changed the store initialization like so:

store: Ext.create('Ext.data.TreeStore',{
            fields:['name', 'description'],
            proxy: {
                type: 'ajax',
                url: 'data/Categories.json',
                reader: {
                    type: 'json',
                    rootProperty: 'children'
                }
            },
}

I also changed my json's field from "details" to "children", and it was able to display. This likely won't match up with my requirements later, but I'll take what I can get right now (a different JSON format than what I'd like and inline store creation).

Any further help on this would be appreciated!

aaron aaron · Accepted Answer · 2017-02-07T23:14:48

I was able to bypass this problem by not utilizing a TreeStore's autoload.

As my requirements needed the JSON to have a specific format, I couldn't use the TreeStore with a proxy as it was, since it would expect all children properties from the node to have the same name.

Instead, I used autoLoad: false on my store and added an afterrender to my main view. This afterrender function fires an event and performs an Ajax GET request for the JSON response. From here, I process the JSON response and extract the tree data, then load the data into my TreeStore. In this way, I can have flexibility with my JSON's formatting (and ability to send more information in a single request) while still being able to access what I need for my TreeStore.

Here is the function I wrote which loads the store data (note that I have changed my JSON's format around, but the basis is still here):

buildTreePanel: function(panel)
{
    var tree = Ext.getCmp('leftPanel');
    console.log("Building tree panel");
    Ext.Ajax.request({
        url: 'data/reports.json',  //or server call
        method: 'GET',
        disableCaching: false,
        headers: {
            'Content-Type': 'application/json'
        },
        //params: PARAMETERS
        success: function(response, options){
            var data = Ext.JSON.decode(response.responseText);
            var treeData = data.details[0];
            console.log(treeData);
            tree.setRootNode(treeData);
        },
        failure: function(response, options){
              //do error checking
        }
    });
}

I hope this helps some of you!

ExtJS5 Loading JSON from TreeStore into TreePanel

1 Answers