ExtJS4：TreePanel Store通过Itemclick一次又一次地加载json文件

Question

I have a json which has 3 main-menupoints. In the first menupoint, there is one submenu, so the menupoint 1 is no 'leaf'. When I click at the folder Symbol, the whole menu (the whole json file) is again under the submenu. So its infinity. Can someone help me with this please? THANK YOU!!

Here are my files:

app/data/tree.json

{
'result':
    [
        {
            "text": "Point1",
            'children':[
                {
                    "text": "SubPoint1",
                    'leaf':true
                },
            ]
        },
        {   "text": "Point2",
            'leaf':true
        },
        {
             "text": "Point3",
             'leaf':true
        },

]

}

view/TreeMenu.js

Ext.define('App.view.TreeMenu', {
extend: 'Ext.tree.Panel',
alias: 'widget.treemenu',
title:'Title',
store: 'TreeMenu'

});

store/TreeMenu.js

Ext.define('App.store.TreeMenu', {
extend: 'Ext.data.TreeStore',
requires: 'App.model.TreeMenu',
model: 'App.model.TreeMenu',
proxy: {
    type: 'ajax',
    url: 'app/data/tree.json',
    reader: {
        type: 'json',
        root: 'result'
    }
}

});

model/TreeMenu.js

Ext.define('App.model.TreeMenu', {
extend: 'Ext.data.Model',
fields: [
    { name: 'name', type: 'int', leaf:false, text:'name'},
    { name: 'value', type: 'string', leaf:false, text:'value'},
]

});

controller/TreeMenu.js

Ext.define('App.controller.TreeMenu', {
extend: 'Ext.app.Controller',
views: ['TreeMenu'],
models: ['TreeMenu'],   
stores: ['TreeMenu'],
onLaunch: function() {
    var treeStore = this.getTreeMenuStore();
    treeStore.load({
        //callback: this.onStationsLoad,
        scope: this
    });
},
refs: [{
    selector: 'tree',
    ref: 'treemenu'
}],
init: function() {
    this.control({
        'treemenu': {
            itemclick : this.treeItemClick  
        }
    });

},
treeItemClick : function(view, record) {
    console.log(record);
}

});

Answer 1

It took me a while to realize but your tree is actually working as designed :)

I created a fiddle for it to visualize: http://jsfiddle.net/dbrin/auBTH/

Essentially every time you expand a node in a tree the default behavior is to load that node's children. That means the store will send a GET request to the server specified by the proxy url property. It sends the id of the node that you clicked on to expand so that the server side would use that id to run the query.

As you said you always return the same data set back and that is exactly what you are seeing: every time you expand a tree node an identical data set is appended to the tree as the children of the expanded node. One of the nodes you return is expandable .. and so you can repeat the process again :)

EDIT : upon further thought I found a separate issue that makes the node look for children nodes on the server instead of the already fetched sub nodes underneath. The issue is with how the reader is defined. In your original code you set json reader to parse data returned from the server specifying the root property set to result .
While this works on the initial load of data it also has an impact on how the children nodes are read. Essentially root config overrides the default children config. I corrected my previous example changing the root property to children - http://jsfiddle.net/dbrin/auBTH/4/ now it works as expected.

Answer 2

Do any children of Json tree has "leaf : true" ?

Maybe it's the problem...

-- EDIT:

I see that you have the leaf value.

Maybe can be this:

'children':[

                {
                    "text": "SubPoint1",
                    'leaf':true
                }-->, <------------------------- ERASE final comma.
            ]

Answer 3

I can confirm it helps. The trick is in json format

var data = {
"result": [{
    "text": "Point1",
        "children": [{

The problem is the array of nodes is firstly under "results" and next under "children". These must be the same and used in root configuration in proxy

    var data = {
"result": [{
    "text": "Point1",
        "result": [{


root: 'result'

Michal