Can't show the json Data in Treepanel in extjs 4

Question

I am working on showing JSON data in EXTJS 4 TreePanel. But my tree is not showing any data . Please let me know where I am wrong. Let me post my codes below:

View Part: it has got the treepanel

xtype: 'treepanel', 
title: 'Standard Geographies',
height: 250,
width: 310,
store: 'Data',  
border: 1,          
displayField: 'name',
useArrows: true,
rootVisible: true,
multiSelect: true,
preventHeader: true,                                            
renderTo: Ext.getBody(),

columns: [{
    xtype: 'treecolumn',
text: 'Standard Geographies',
flex: 1,
sortable: false,
//renderer : change,
dataIndex: 'name'
}], 

Model Part: Using json data

Ext.define('TA.model.TAModel', {
    extend: 'Ext.data.Model',
    fields: ['name','typeId'],
//fields: ['abbr','type'],['name','typeId']


    proxy: {
        type: 'ajax',
        url : 'data/StandardGeoTree.json',
        actionMethods: {
            read: 'POST'
        },
        reader: {
            type: 'json',
            root: 'geographyOptions' 
        },
    }   
 });

Store Part: I hope all is ok in the store part

Ext.define('TA.store.Data', {
//extend: 'Ext.data.Store',
//model: 'TA.model.TAModel',

extend: 'Ext.data.TreeStore',
model: 'TA.model.TAModel', 
autoSync: true,
autoLoad: true,     
listeners: {
    load:function(){
        console.log('Schemes Data store loaded');
    }
},      
proxy: {
    type: 'ajax',
    //url : 'data/StandardGeoTree.json',
    api: {
        //read: 'data/StandardGeo.json',
        read: 'data/StandardGeoTree.json',
        //update: 'data/updateTradeArea.json'
    },
    reader: {
        type: 'json',
        root: 'root',
        successProperty: 'success',
        idProperty : 'typeId'
    }
},  
root : {
    text: 'Root',
    id: 'typeId',
    expanded : true,
    loaded : true,
    children: []
}
});

JSON

{
"success": true,
"root" : [
    {   
        "name": "001-USA", 
        "typeId" : "1",

        "children":[        
            {"name": "USA", "typeId" : "1", "leaf":"true"},
            {"name": "State", "typeId" : "2", "leaf":"true"},
            {"name": "DMA", "typeId" : "3", "leaf":"true"},
            {"name": "CSA", "typeId" : "4", "leaf":"true"},

            ]
    }
]
}   

Answer 1

the store configuration for tree component is actually doesn't need to be so complicated. for example simple store declaration below is enough:

var treestore = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'data/StandardGeoTree.json'
    }
});

then in your tree configuration set store: treestore and rootVisible: false

finally, the store expect json respond in this format:

[{
    "text": "To Do", 
    "cls": "folder",
    "expanded": true,
    "children": [{
        "text": "Go jogging",
        "leaf": true
    },{
        "text": "Take a nap",
        "leaf": true
    },{
        "text": "Climb Everest",
        "leaf": true
    }]
}]

Answer 2

Nothing worked as solution. So I had to write the below code part in my view which solved my problem. I am pasting the code part below:

    var treeStore = Ext.StoreManager.lookup('Data');
    treeStore.load();

But I want my store to be loaded automatically. Please let me know if you have any solution to automatically load the store.

Answer 3

In your JSON, your root property has to be similar to your children. So it's either "root" or "children", but not both. See this question for the full explanation.

So given you stick to:

reader: {
    type: 'json',
    root: 'root',
    successProperty: 'success',
    idProperty : 'typeId'
}

Your JSON should look like so:

{
"success": true,
"root" : [
    {   
        "name": "001-USA", 
        "typeId" : "1",

        "root":[        
            {"name": "USA", "typeId" : "1", "leaf":"true"},
            {"name": "State", "typeId" : "2", "leaf":"true"},
            {"name": "DMA", "typeId" : "3", "leaf":"true"},
            {"name": "CSA", "typeId" : "4", "leaf":"true"},

            ]
    }
]
}