How to stop extjs treepanel from loading infinitely?

问题

Finally after struggling with extjs tree panel, tree store and building custom reader to read and convert pentaho data for 2 weeks I have managed to load pentaho data into treepanel of extjs.

Now my Tree panel is loading same data infinitely. Treepanel looks as follows :

Part of my json data looks as follows :

{
    {name: 'US', candidateCount: 3, children: []},
    {name: 'India', candidateCount: 922, children: [
       {name: 'Goa', candidateCount:124, children: []},
       {name: 'Maharashtra', candidateCount: 43, children: [
             {name: 'Pune', candidateCount: 3},
             {name: 'Mumbai', candidateCount: 33},
             {name: 'Kolhapur', candidateCount: 4},
             {name: 'XXX', candidateCount: 3},
        ]}
     ]},
    {name: 'UK', candidateCount: 1, children: []},
}

As you can see in image above, after expanding India node it has again loaded data of country level (i.e. country names US, uk, India, UK). Actually I want to show state level data like data of Maharashtra, Goa. Instead of that treepanel is again loading same data again.

How to avoid this kind of behavior? I have already set leaf property of US, uk and India nodes to false.

I tried setting Expanded property to true but then treepanel keeps loading same nodes again and again and my browser tab just gets hanged.

Please let me know how to avoid this? I want tree panel to load data only once.

EDIT - Solution to this problem

I solved this problem by adding listener on `append` event of store and then setting `leaf` value to `true` for the nodes which I wanted to be leaf.

回答1:

Setting data item to:

{
    ...
    leaf: true
}

will stop it.

回答2:

I had the same problem with my treepanel and JSON data. My treeStore looks something like this:

proxy: {
        type: 'ajax',
        url: 'urlJson',

        reader: {
            type: 'json',
            root: 'instanceList',
            successProperty: 'success'
        }
    },

    root:{
        text: 'Root',
        expanded: true
    }

And the JSON

{
    "instanceList": [
        {
            "text": "Parent 1",
            "instanceList": [
                {
                    "class": "testing",
                    "id": 3,
                    "leaf": true,
                    "text": "Child 1"
                }
            ]
        },
        {
            "text": "Parent 2",
            "instanceList": [
                {
                    "class": "testing",
                    "id": 2,
                    "leaf": true,
                    "text": "Child 2"
                },
                {
                    "class": "testing",
                    "id": 1,
                    "leaf": true,
                    "text": "Child 3"
                }
            ]
        }
    ],
    "instanceTotal": 1,
    "success": true
}

I changed "children" for "instanceList" and my treepanel stopped doing that infinitely loop, so I guess If you change "name" for "children" ?

回答3:

Loading trees can be tricking. Try setting loaded: true on those nodes. Before you start clicking around, is the tree properly loaded?

回答4:

Make sure all parents that do not have any children have "leaf" set to "true" OR have an empty "children" node.

AND all children nodes have "leaf" set to "true" (as already mentioned by Asken)

回答5:

it seems to me that any child becomes a root to its dependents . So the root property and the children property MUST have the same NAME. I am very happy I found this tread. It saved my life I was about to shoot myself because of endless reloading the tree

回答6:

As Edd said, if you set in proxy custom rootProperty:'instanceList', you have to change all "children" in json to that property, ie 'instanceList'. It was my solution.

来源：https://stackoverflow.com/questions/9311410/how-to-stop-extjs-treepanel-from-loading-infinitely

标签

extjs4

treepanel