jsonextjs4.1treepanel

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


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"},

            ]
    }
]
}   

Solution

  • 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
        }]
    }]