JSON data is not getting populated in tree panel in extjs 4.2.x

Question

With below configuration i am not able to populated json data in tree panel.

After loading store from server i am not able to see any records in console logs.

Is there any specific json structure need to be send from server?

Is there any configuration miss?

Below is the config i am using

MODEL

Ext.define('nsoapp.model.nso.Client', {
    extend: 'Ext.data.Model',

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

    fields: [
        {
            name: 'jsxid'
        },
        {
            name: 'name'
        },
        {
            name: 'type'
        },
        {
            name: 'countryId'
        },
        {
            name: 'contact'
        },
        {
            name: 'email'
        }
    ]
});

STORE

Ext.define('nsoapp.store.nso.Client', {
    extend: 'Ext.data.TreeStore',

    requires: [
        'nsoapp.model.nso.Client',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'nsoapp.model.nso.Client',
            storeId: 'nso.Client',
            defaultRootProperty: 'record',
            proxy: {
                type: 'ajax',
                url: '/client/',
                reader: {
                    type: 'json',
                    root: 'populateClientRes'
                }
            }
        }, cfg)]);
    }
});

TREE PANEL

xtype: 'treepanel',
    flex: 1,
    margins: '0 0 3 0',
    itemId: 'treeClient',
    overlapHeader: false,
    title: 'Clients',
    titleCollapse: false,
    animate: true,
    displayField: 'name',
    rootVisible: false,
    viewConfig: {
        rootVisible: false
    }

In controller i am binding tree store to tree panel

var storeClient=this.getStore('nso.ordermanagement.clientcustomization.Client');
storeClient.load({
callback: function(records, operation, success) {
var treeClient=Ext.ComponentQuery.query("#treeClient")[0];
treeClient.bindStore(storeClient);
}
});

JSON DATA

{
  "populateClientRes":{
    "record":[
      {
        "name":"A_KPI",
        "type":"CLIENT",
        "jsxid":"14487361",
        "countryId":"484",
        "contact":"34434334",
        "email":"",
        "record":[
          {
            "name":"Products",
            "value":"1",
            "type":"PRODUCT"
          },
          {
            "name":"Stores",
            "value":"1",
            "type":"STORE"
          }
        ]
      },
      {
        "name":"aCCStudyTest",
        "type":"CLIENT",
        "jsxid":"14425073",
        "countryId":"484",
        "contact":"1234567890",
        "email":"",
        "record":[
          {
            "name":"Products",
            "value":"1",
            "type":"PRODUCT"
          },
          {
            "name":"Stores",
            "value":"1",
            "type":"STORE"
          }
        ]
      }
    ]
  }
}

Answer 1

Short answer: JSON response is wrong!

Long answer

You specify as root populateClientRes so all children (and children of children) must use this tag.

Standard JSON response:

{
    "success": true,
    "children": [
        { 
            "id": 1, 
            "name": "Phil", 
            "leaf": true 
        },
        { 
            "id": 2, 
            "name": "Nico", 
            "expanded": true, 
            "children": [
                { 
                    "id": 3, 
                    "name": "Mitchell", 
                    "leaf": true 
                }
            ]},
        { 
            "id": 4, 
            "name": "Sue", 
            "loaded": true 
        }
    ]
}

In your case you have to replace record with populateClientRes:

{
    "success": true,
    "populateClientRes": [ 
        {
            "name":"A_KPI",
            "type":"CLIENT",
            "jsxid":"14487361",
            "countryId":"484",
            "contact":"34434334",
            "email":"",
            "populateClientRes": [
                {
                    ...         
                }, {
                    ...
                    populateClientRes: [{...},{...}]
                },
            ]
        },
        {
            ...
        }
    ]
}

Important notes

For all non-leaf nodes that do not have children (for example, Person with name Sue above), the server response MUST set the loaded property to true. Otherwise the proxy will attempt to load children for these nodes when they are expanded.

You find more information's here