Question

I am migrating my ExtJs3 application to ExtJs4.
In ExtJs3 I had a tree grid which had a loader to load the tree data, like below:

loader: new Ext.tree.TreeLoader({ 
            dataUrl: 'Department/DepartmentTree', 
            nestedRoot: 'Data.items'
    })

So I am trying to create a treeStore in ExtJs4 like below:

   var store = Ext.create('Ext.data.TreeStore', {
        model: 'DepartmentTreeModel',
        folderSort: true,
        proxy: {
            type: 'ajax',
            url: 'Department/DepartmentTree',
            reader: {
                type: 'json',
                root: 'Data.items'
            }
        }
    });

I get an error when I call the load function on the above store Cannot read property 'items' of undefined.

The JSON response looks like this:

    {
"Data":{
    "__type":"ListWrapperOfDepartmentTreeNodewnEzJCii:#PortalMvc.Global.Classlibrary.Model.Ui.JSONWrappers",
    "items":[{
        "ActualHeadcount":0,
        "Headcount":0,
        "Leavers":0,
        "ParentId":"~~",
        "Starters":0,
        "children":[{
            "ActualHeadcount":0,
            "Headcount":0,
            "Leavers":0,
            "ParentId":"!#",
            "Starters":0,
            "children":[{
                "ActualHeadcount":0,
                "Headcount":0,
                "Leavers":0,
                "ParentId":"*w",
                "Starters":0,
                "children":[{
                    "ActualHeadcount":0,
                    "Headcount":0,
                    "Leavers":0,
                    "ParentId":"*z",
                    "Starters":0,
                    "children":[],
                    "iconCls":"admin_button",
                    "id":"*{",
                    "leaf":true,
                    "text":"Parking1_subtree1"
                }]
            }]
        }]
    }]
  }
}

Answer 1

It expects the root to be repeated for each set of child nodes. So for “children” it’s also trying to read “Data.items”.

If you can’t alter the data structure, the root can also be a function, something like:

root: function(o) {
    if (o.Data) {
        return o.Data.items;
    } else {
        return o.children;
    }
}