PDA

View Full Version : [solved] TreePanel structure is displaying top level at all nodes



Elijah
13 Apr 2010, 8:17 AM
12:25 Having a bit of an issue here.
If I have the tree structure in a myJson.json file and set the dataUrl: 'myJson.json' the tree loads just fine.
If I have the tree structure in a myJson.jsp file and set the dataUrl: 'myJson.jsp?method=getTree' the tree does not loads fine.

i.e. the structure should look like this (and it does when I load from the .json file)
-parent
- child 01
- child 02
- child 03

But when pulling the same structure from the jsp file ( i checked the structure returned in firebug for both the json and the jsp response)
I get the following occurring in the Tree

parent
- parent
-- parent
--- parent
---- parent

And this will keep going each time I click on a node.
Any ideas?

12:27 Oh, and also each time I click on the item a new Ajax request is being made. But only when I change the dataUrl to the jsp file.
===========================================
So reading more into the TreePanel it talks of lazy loading where when u click on each node it retrieves the data. So, am I wrong in assuming that because the initial call was to a .json file, that file is cached in the browser but the .jsp call is not cached so each node will make a new Ajax request?
===========================================
If I am correct above then what must I do to properly set the root being that the structure is [{}{}{}]

Also, I was incorrect in the data structure that is returned from .jsp.
The structure varies in the sense that the JSON data in the .jsp response is


[{
"text":"Applications", "cls":"folder", "children":[{}]
}]
whereas the .json file is


[{
text:'Applications', cls:'folder', children:[{}]
}]
If the double quotes are whats messing it up is there some method in ExtJS that can strip them out for me?

Elijah
13 Apr 2010, 12:29 PM
Okay, I here is what I am finding out. The lazy loading thing occurs when the use is clicking on each node. This only occurs with the url set to the .jsp file.
I can get to the leaf nodes but still have an odd issue with the tree structure getting nested inside of other nodes.

I am also VERY unclear on what the root: value is suppose to do exactly. The api is not clear. Examples I am looking at are VERY unclear. What in great detail can someone tell me as to what the root: is DOING?

Elijah
14 Apr 2010, 7:23 AM
I really could use a hand here. I cant find anything in the API to explain the tree well enough to resolve the issue I am having.

mpawlowski
14 Apr 2010, 8:37 AM
Is your node using some sort of loader? Maybe posting some more code would help everyone understand the problem more.

Elijah
15 Apr 2010, 6:23 PM
A.js


t = new Ext.tree.TreePanel({
region: 'center',
//dataUrl: 'js/preferences.json', // If i use this url to the .json works fine
dataUrl:'API.jsp?api=getAvailableDashboardItems', // using this causes undesired effect in the tree
title: 'Show on dashboard',
height: 300,
width: 400,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:false,
containerScroll: true,
rootVisible: true,
collapsed: false,
border: false,
root: {
// the issue I think lies in this root obj cnf set but I have no idea what to set it to
nodeType: 'async',
text: 'Available Dashboard Items',
root: '0'
}

soze
16 Apr 2010, 8:05 AM
Remove the extra root:0 within the root section.

Also I've placed below the code from the js and the json that is consumed for reference. This returns everything in the correct format. Hope it helps.


all = false;
var impactList = new Ext.tree.TreePanel({
id: 'impactPanel',
hidden: true,
useArrows:true,
autoScroll:true,
title:'Please select the Office locations that are being Impacted.',
height: 400,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
root: {
nodeType: 'async'
},
dataUrl: 'functions/disruptions/getBuildings.asp?id='+id,
listeners: {
'checkchange': function(a, b){
tt = Ext.getCmp('impactPanel').root;
len = tt.childNodes.length;

all = false;
for(i=0;i<=len-1;i++){
if(tt.childNodes[i].firstChild.id===a.id){
all=true;
//Disable all other child nodes
if(b===true){
for(j=1;j<=tt.childNodes[i].childNodes.length-1;j++){

tt.childNodes[i].childNodes[j].attributes.checked=false;
tt.childNodes[i].childNodes[j].unselect();
tt.childNodes[i].childNodes[j].disable();
}
}else{

for(j=1;j<=tt.childNodes[i].childNodes.length-1;j++){
tt.childNodes[i].childNodes[j].enable();
}
}
}
}

impactList.doLayout();
}
}
});

impactList.getRootNode().expand(true);




[{text:'APAC',cls:'folder',children:[{text:'All APAC Offices',id:'n_11',leaf:true,checked:false},{text:'Sussex Street',id:'n_12',leaf:true,checked:false}]},{text:'EMEA',cls:'folder',children:[{text:'All EMEA Offices',id:'n_9',leaf:true,checked:false},{text:'Germany',id:'n_10',leaf:true,checked:false}]}]

Elijah
16 Apr 2010, 8:36 AM
Thank you for your response, but I still do not know whats the tree normal way of operation.

Demo data contains 3 Branches. Each branch contains 4 leafs.

This is what is occurring

When I reference my .json file.


Only one call is made to the server.
When I select the various tree nodes, it displays the information correctly.

When I reference my .jsp file.


All 3 branches display on the Treepanel
Branch 1 when selected shows the children
Branches 2 and 3 will always make a call to the server
When Branch 2 or 3 are opened All 3 branches display inside it (nested)
The nesting of branches under 2 and 3 will always show the 1st tree branch and its 4 children
But the redundant 2 and 3 branch will once again when selected nest the structure again. This will display infinitely for as many times as I select branches 2 and 3.

I can never get to the children of branch 2 and 3 which are at the same level as branch 1.



T1, T2, T3 Are the branches
T1
-C1
-C2
-C3
-C4
T2
-C1
-C2
-C3
-C4
T3
-C1
-C2
-C3
-C4
==============
The Output in the Tree Panel is always
T1
-C1
-C2
-C3
-C4

T2
-T1
-C1
-C2
-C3
-C4
-T2
-T1
-C1
-C2
-C3
-C4
-T2
-T3
-T3

T3
-T1
-C1
-C2
-C3
-C4
-T2
-T1
-C1
-C2
-C3
-C4
-T3
-T1
-T2
-T3
It just goes on and on
So my questions are.
Why when using the .jsp are requests being made to the server after it has loaded the first time where in the .json file that does not occur?

Why is the nesting occuring?

soze
16 Apr 2010, 8:40 AM
Can you post your json? The normal tree operation is to use the json to determine it's structure.

Elijah
16 Apr 2010, 8:58 AM
snip of the .json file


[{
text: 'Applications',
cls: 'folder',
children: [{
id:'11',
text: 'MS Money',
checked:false,
leaf: true
}]
},{
text: 'Options',
cls: 'folder',
children: [{
id:'12',
text: 'Chocolate',
checked:false,
leaf: true
}]
}]
Sample of the json response from .jsp


[{
"text": "Applications",
"cls": "folder",
"children": [{
"id":"11",
"text": "MS Money",
"checked":false,
"leaf": true
}]
},{
"text": "Options",
"cls": "folder",
"children": [{
"id":12,
"text": "Chocolate",
"checked":false,
"leaf": true
}]
}]

Elijah
20 Apr 2010, 3:27 AM
Here is a screen shot of the tree. If I take the code from the tree checkbox example and run it and only modify the pathUrl then the result is infinite calls out to the server where I have to kill the server in order to get the tree to stop growing. As mentioned above there are only 3 main branches and the entire structure is being infinitely nested within itself over and over. If i were to point it to a .json file it works just fine.
20016

Here is the servers JSON response.


[
{"text":"Applications","cls":"folder",
"children":[{"id":11,"text":"XXXPTS","leaf":true,"checked":false},
{"id":12,"text":"Federated Search","leaf":true,"checked":false},
{"id":13,"text":"Personnel Management","cls":"folder","leaf":true,"checked":false},
{"id":14,"text":"Create Alert","cls":"folder","leaf":true,"checked":false}
]
},
{"text":"User Tools","cls":"folder",
"Children":[{"id":21,"text":"My Profile","cls":"folder","leaf":true,"checked":false},
{"id":22,"text":"My Calendar","cls":"folder","leaf":true,"checked":false}
]
},
{"text":"Views","cls":"folder",
"Children":[{"id":31,"text":"PTS Tasks","cls":"folder","leaf":true,"checked":false},
{"id":32,"text":"RSS Feeds","cls":"folder","leaf":true,"checked":false}
]
}
]

Elijah
20 Apr 2010, 3:44 AM
WOW.

Well figured it out. unbelievable that the issue was with this. I had on two of the structures for the children a capital "C". Now how the hell that causes infinite looping I'm not sure but for anyone out there, if you experience an issue with infinite looping check the caps on your data structure for json.

soze
20 Apr 2010, 2:12 PM
Cool! Glad you figured it out. Much more satisfying that way!