TreeGrid: setting data root has no effect

Question

I\'m trying to setup a TreeGrid, my data object looks like this:

{
    \"code\": \"success\",
    \"data\": {
        \"text\": \".\",
        \"children\":          


        

Answer 1

Unfortunately with a TreeStore, whatever you use for root is also used as the root for each subsequent level, so it's probably finding the root node, then not finding its data property. Either change the top level property from data to children or change each instance of children to data.

Answer 2

Since you have setup your reader with root: 'data' you have to replace 'children' with 'data' in your json:

{
    "code": "success",
    "data": {
        "text": ".",
        "data": [ // << not "children"
            {

Answer 3

I have the same problem in ExtJS 4.2 I try to solve this problem by following code.

Ext.define('XZSoftware.view.sysconfig.permission.PermissionWindow', {
    extend: 'Ext.window.Window',
    itemid: "sysconfig-permission-window",
    vierConfig: { loadMask: true },
    layout:
    {
        type: "fit"
    },
    minWidth: 400,
    minHeight: 300,
    tree: null,
    treeStore: null,
    initComponent: function () {
        var me = this;
        Ext.log("initComponent()", me);

        me.treeStore = Ext.create("Ext.data.TreeStore", {
            proxy: {
                type: "ajax",
                actionMethods: { read: "POST" },
                reader: {
                    type: "json",
                    root: "data"
                },
                url: '/permissiontree_load.xzsoftware?o=AAAAACB'
            },
            root: {
                text: "Premission Tree",
                expanded: true
            }
        });

        me.tree = Ext.create("Ext.tree.Panel", {
            rootVisible: false,
            store: me.treeStore
        });

        me.items = [
            me.tree
        ];

        this.callParent(arguments);
    },

    Version: "1.0.0.0"

});

The JSON will be responsed from HTTP request.

{
    "total": 17,
    "data": [{
        "data": [{
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "HSBC"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "All IDoc"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "ProCRM"
        }],
        "expanded": true,
        "leaf": "false",
        "checked": false,
        "text": "Application Portal"
    }, {
        "data": [{
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Order List"
        }, {
            "data": [{
                "data": [],
                "expanded": true,
                "leaf": "true",
                "checked": false,
                "text": "Report by monthly total"
            }],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Order Report"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Search"
        }],
        "expanded": true,
        "leaf": "false",
        "checked": false,
        "text": "CNMOT - OMS"
    }, {
        "data": [{
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Company"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Funcation Setting"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Menu Setting"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Page Setting"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Permission"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Roles"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Users"
        }],
        "expanded": true,
        "leaf": "false",
        "checked": false,
        "text": "System Setting"
    }],
    "success": true,
    "message": "Success"
}

Notes: 1.Should set root config in TreeStore. 2.The children field in JSON need change to the root config in proxy of store. In my sample "children" set as "data".

Answer 4

You can also use this:

        reader: {
        type: 'json',
        // See http://stackoverflow.com/questions/9159627/extjs-loading-tree-from-json-file-using-mvc
        // http://stackoverflow.com/questions/6263380/extjs4-json-treestore
        root: function(o) {
            if (o.data) {
                return o.data;
            } else {
                return o.children;
            }
        }
    },