Load TreeStore at once. Extjs 4

Question

My question is: How can I load the TreeStore at once? Because right now, if I'm using proxy, to get Tree after rendering, when I expand the leaf, there is one more request with GET parameter 'node' - the id of leaf node. So I need to response with the tree of this leaf. but I want to load ALL tree at once and no more requests for that tree.

Right now I have below code:

    Ext.define('AdminPanel.TreeNavigation', {              
        extend: 'Ext.data.Model',  
        fields: ['id', 'text', 'leaf', 'children']  
    });


    var store = Ext.create('Ext.data.TreeStore', {

                    model: 'AdminPanel.TreeNavigation',  

                    proxy: {  
                        type: 'ajax',
                        url : 'admin/getTreeNav',
                        reader: {
                            type: 'json',
                            root: 'result'
                        }
                    },

                    root: {
                        expanded: true
                    }

                });

The same question was resolved in this thread: sencha.com/forum/… — DiMoN_TD

DiMoN_TD DiMoN_TD · Accepted Answer · 2012-08-19T11:06:39

In store I set the reader root as 'result'.

But in the json_data I've sent the 'children' attribute, like that:

{
    "result": [{
        "text": "\u041d\u043e\u0432\u043e\u0441\u0442\u0438",
        "leaf": true,
        "children": []
    }, {
        "text": "\u0410\u043a\u0446\u0438\u0438",
        "leaf": true,
        "children": []
    }, {
        "text": "\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438",
        "leaf": true,
        "children": []
    }, {
        "id": "lang",
        "text": "\u042f\u0437\u044b\u043a",
        "leaf": false,
        "children": [{
            "text": "\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b",
            "leaf": true,
            "children": []
        }]
    }]
}

But needed like this:

{
    "result": [{
        "text": "\u041d\u043e\u0432\u043e\u0441\u0442\u0438",
        "leaf": true,
        "result": []
    }, {
        "text": "\u0410\u043a\u0446\u0438\u0438",
        "leaf": true,
        "result": []
    }, {
        "text": "\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438",
        "leaf": true,
        "result": []
    }, {
        "id": "lang",
        "text": "\u042f\u0437\u044b\u043a",
        "leaf": false,
        "result": [{
            "text": "\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b",
            "leaf": true,
            "result": []
        }]
    }]
}

So, Tree will load all data at the TreePanel.

Load TreeStore at once. Extjs 4

2 Answers