ExtJS Treepanel does not show children

Question

I call store.load(), but treepanel show only first level (model ProcessVedDoc). If I add a callback to the load method, I see empty childNodes in the records. Although there are children in the data (but object not mapping to model VedDoc). What could be wrong? screenshot from firefox dev tools

Models

Ext.define('Proj.model.ProcessVedDoc', {
extend: 'Ext.data.Model',
fields: [
    {name: "text", mapping: 'name'},
    {name: "expanded", type: "boolean", defaultValue: true},
    {name: "loaded", type: "boolean", defaultValue: true}
}],
requires : ['Proj.model.VedDoc'],
hasMany: [{
    model: 'Proj.model.VedDoc',
    associationKey : 'children',
    name: 'children'
}]});

Ext.define('Proj.model.VedDoc', {
extend: 'Ext.data.Model',
fields: ['id', 
  {name: 'text', mapping: 'name'}, 
  {name: 'leaf', type: 'boolean', defaultValue: true, persist: false}],
idProperty: 'id'});

Store

Ext.define('Proj.store.VedDocsTreeStore', {
extend: 'Ext.data.TreeStore',
model: 'Proj.model.ProcessVedDoc',
autoLoad: false,
autoSync: false,
root: {
    expanded: true
},
proxy: {
    type: 'ajax',
    url: 'portfolios/veddocs',
    getParams: Ext.emptyFn,
    timeout: 300000,
    reader: {type: 'json', root: 'docs'}
}});

View

    {
        xtype: 'treepanel',
        title: 'Documents',
        name: 'vedDocs',
        margin: '15 0 0 0',
        width: 650,
        height: 350,
        rootVisible: false,
        store: vdocs
    }

Json

{
"docs": [{
    "name": "15a1dc1515aa151eea556",
    "children": [
        {"name": "Doc1", "id": "bf4e2776-1089-445f-98dd-e5e8fe5c798f"},
        {"name": "Doc2", "id": "1312bba6-9d05-4aa5-b069-b2958043c2a5"},
        {"name": "Doc3, "id": "49a045cf-b5cf-4478-b886-f078e6a48753"}]
},
{
    "name": "15a1dc18515bb515aa151556",
    "children": [
        {"name": "Doc1", "id": "3cef1250-fd35-4ff6-bbbf-33e4c59d4767"},
        {"name": "Doc2", "id": "a43ffa24-ed25-4fc7-80a5-f4b1a78b666e"}]
}],
"success": true}

Answer 1

Try make your response in that format because treepanel root understand children object.

JSON format

{
    "success": true,
    "children": [{
        "text": "15a1dc1515aa151eea556",
        "expanded": true,
        "children": [{
            "text": "Doc1",
            "leaf": true,
            "id": "bf4e2776-1089-445f-98dd-e5e8fe5c798f"
        }, {
            "text": "Doc2",
            "leaf": true,
            "id": "1312bba6-9d05-4aa5-b069-b2958043c2a5"
        }, {
            "text": "Doc3",
            "leaf": true,
            "id": "49a045cf-b5cf-4478-b886-f078e6a48753"
        }]
    }, {
        "text": "15a1dc18515bb515aa151556",
        "expanded": true,
        "children": [{
            "text": "Doc1",
            "leaf": true,
            "id": "3cef1250-fd35-4ff6-bbbf-33e4c59d4767"
        }, {
            "text": "Doc2",
            "leaf": true,
            "id": "a43ffa24-ed25-4fc7-80a5-f4b1a78b666e"
        }]
    }]
}

ExtJs Treepanel and store code

I have created an demo. You check here Sencha Fiddle

var store = Ext.create('Ext.data.TreeStore', {
    autoLoad: true,
    autoSync: false,
    root: {
        expanded: true
    },
    proxy: {
        type: 'ajax',
        url: 'veddocs.json',
        timeout: 300000,
        reader: {
            type: 'json',
            root: 'children'
        }
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});

Note* you can make treedata format in front end side and load data in store using setRoot({your root object}). for more details Extjs Store Docs