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

            ]
    }
]
}

Why do you define a proxy in both the model and store? Because in the code you have provided, only the store proxy will be used. — Izhaki, Nov 28 '12 at 15:40
Thats actually I got from somewhere as solution. Anyways I have removed it. — SBanerjee, Nov 28 '12 at 15:46

Nick Laros · Accepted Answer · 2015-10-12T11:17:23.400

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

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

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

            ]
    }
]
}

edited May 23 '17 at 11:53

Community

1
1

answered Nov 28 '12 at 15:35

Izhaki

23,372
9
69
107

Thanks for the answer @Izhaki, but its still not showing any data. – SBanerjee Nov 28 '12 at 15:42
Do you get the console log upon load? Also, could you comment the proxy on the model - just so we can zoom in on the issue. – Izhaki Nov 28 '12 at 15:45
Not getting any console log upon load. I have removed the proxy from model. In listener I have Added : afterrender: function(n) { console.log('afterrender'); console.log(n); }, Which is giving me the below log: afterrender Object { xtype="treepanel", title="Standard Geographies", height=250, more...} – SBanerjee Nov 28 '12 at 15:55
OK, are you sure the `Data` store is in scope when you define the tree? Whether or not depends in whether you are binding the two via a controller as part of your application. Could you also try and load the store manually and see if you get the log upon load? – Izhaki Nov 28 '12 at 16:10

score 0 · Answer 3 · answered Nov 29 '12 at 07:21

0

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.

answered Nov 29 '12 at 07:21

SBanerjee

23
1
4

I still think the last comment I have to my answer could be the solution. Could you please post your controller code? – Izhaki Nov 29 '12 at 23:23
My controller is working fine and I have binded all the stores and models in my controller. i crosschecked them. And surprisingly all my other jsons are getting loaded. Isn't it strange? – SBanerjee Nov 30 '12 at 09:55

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

3 Answers3