PDA

View Full Version : TreePanel and JSON TreeLoader Problem (new nodes invisible)



sjanes71
19 Mar 2007, 8:52 AM
Hello YUI-EXT hackers!

I have a TreePanel that is dynamically loading its data from a JSON query and while it loads the data fine, it insists on making the nodes invisible. Is there something obvious I'm missing to how TreePanel's render newly imported nodes? The first level of nodes load and are visible, subsequent levels are not.



var tree__eF9sYWJlbF90b3BpY3M = function(){
var Tree = Ext.tree;
return {
init: function(){
var tree = new Tree.TreePanel('tree__eF9sYWJlbF90b3BpY3M', {
animate:true,
loader: new Tree.TreeLoader({dataUrl: '/label/navigate_json'}),
});
var root = new Tree.AsyncTreeNode({
text: 'Topics',
draggable:false, // disable root node dragging
id:'topics::'
});
new Tree.TreeSorter(tree, {folderSort:true});
tree.setRootNode(root);

tree.render();
root.expand(false, /*no anim*/ false);
}
};
}();
Ext.EventManager.onDocumentReady(tree__eF9sYWJlbF90b3BpY3M.init, tree__eF9sYWJlbF90b3BpY3M, true);



My JSON data looks like:



[
{"text":"Animation","id":"topics::Arts\/Animation","cls":"folder"},
{"text":"Architecture","id":"topics::Arts\/Architecture","cls":"folder"},
/* ... the rest elided ... */
]


And I think that I'm including the correct CSS because it does show the folder icons and tree lines connecting the nodes.

Thanks in advance for any ideas!

--Simon

BernardChhun
19 Mar 2007, 9:05 AM
that's one hell of a variable name Simon : tree__eF9sYWJlbF90b3BpY3M! :lol:

seriously I don't see any obvious errors here. can you post a screenshot with firebug's console open or a link?

sjanes71
19 Mar 2007, 9:17 AM
I have my reaons for the crazy variable name. :)

Apologies if this blows out the forum formatting, images changed to PNG's so they are more legible.
Before:
http://www.recursism.com/images/tree-sample.png

After:
http://www.recursism.com/images/tree-sample-after.png

matte
19 Mar 2007, 11:23 AM
Eager to see some replies

BernardChhun
19 Mar 2007, 12:26 PM
May I see the response as well? I might sound a bit annoying here but thats how I debug when I don't see obvious errors in the code. :) and if you use the inspect function on the TreePanel, do you see those LI html tags?

matte
19 Mar 2007, 12:58 PM
Bernard, I meant your reply. I see simon posted his capture, as you asked. Why does the open branch simply not render? (I had that happen to me too, but accidently trashed my sample.)

dfenwick
19 Mar 2007, 2:13 PM
After this line:



loader: new Tree.TreeLoader({dataUrl: '/label/navigate_json'}),


You have an errant comma. Get rid of the comma and try again.

sjanes71
19 Mar 2007, 2:17 PM
Here is the rendered HTML source of the Topics tree that isn't rendering the sublevels, this has been formatted a little bit so its easier to read:



<div style="border: 2px solid blue; overflow: auto; height: 20em;">
<div class="x-tree" id="tree__eF9sYWJlbF90b3BpY3M">
<ul id="ext-gen6" class="x-tree-root-ct x-tree-lines">
<li class="x-tree-node">
<div class="x-tree-node-el x-tree-node-expanded">
<span class="x-tree-node-indent">
</span>
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
<a id="ext-gen8" hidefocus="on" href="#" tabindex="1">
<span unselectable="on">
Topics</span>
</a>
</div>
<ul class="x-tree-node-ct" style="">
<li class="x-tree-node">
<div class="x-tree-node-el folder x-tree-node-expanded">
<span class="x-tree-node-indent">
http://www.yui-ext.com/s.gif
</span>
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
<a id="ext-gen24" hidefocus="on" href="#" tabindex="1">
<span unselectable="on">
Arts</span>
</a>
</div>
<ul id="ext-gen409" class="x-tree-node-ct" style="visibility: hidden;">
<li class="x-tree-node">
<div class="x-tree-node-el folder x-tree-node-collapsed">
<span class="x-tree-node-indent">
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
</span>
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
<a id="ext-gen136" hidefocus="on" href="#" tabindex="1">
<span unselectable="on">
Animation</span>
</a>
</div>
<ul class="x-tree-node-ct" style="display: none;">
[/list]

<li class="x-tree-node">
<div class="x-tree-node-el folder x-tree-node-collapsed">
<span class="x-tree-node-indent">
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
</span>
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
<a id="ext-gen143" hidefocus="on" href="#" tabindex="1">
<span unselectable="on">
Architecture</span>
</a>
</div>
<ul class="x-tree-node-ct" style="display: none;">
[/list]

<li class="x-tree-node">
<div class="x-tree-node-el folder x-tree-node-collapsed">
<span class="x-tree-node-indent">
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
</span>
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
<a id="ext-gen150" hidefocus="on" href="#" tabindex="1">
<span unselectable="on">
Art History</span>
</a>
</div>
<ul class="x-tree-node-ct" style="display: none;">
[/list]

<li class="x-tree-node">
<div class="x-tree-node-el folder x-tree-node-collapsed">
<span class="x-tree-node-indent">
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
</span>
http://www.yui-ext.com/s.gif
http://www.yui-ext.com/s.gif
<a id="ext-gen157" hidefocus="on" href="#" tabindex="1">
<span unselectable="on">
Awards</span>
</a>
[ ... rest of tree elided ... ]

BernardChhun
19 Mar 2007, 2:38 PM
ok I got back home copied and paste your code in a test file and tried your code out.

I removed the extra comma after your loader declaration and here's what I got:

http://i3.tinypic.com/2r6z29u.png

here's the html file:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<link rel="stylesheet" type="text/css" href="ext-css/ytheme-gray.css" />
<link rel="stylesheet" type="text/css" href="ext-css/ext-all.css" />

<script type="text/javascript" src="ext-js/jquery.js"></script>
<script type="text/javascript" src="ext-js/jquery-plugins.js"></script>
<script type="text/javascript" src="ext-js/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="ext-js/ext-all.js"></script>
<script type="text/javascript">
var tree__eF9sYWJlbF90b3BpY3M = function(){
var Tree = Ext.tree;
return {
init: function(){
var tree = new Tree.TreePanel('tree__eF9sYWJlbF90b3BpY3M', {
animate:true,
loader: new Tree.TreeLoader({dataUrl: 'tree.php'})
});

var root = new Tree.AsyncTreeNode({
text: 'Topics',
draggable:false, // disable root node dragging
id:'topics::'
});
new Tree.TreeSorter(tree, {folderSort:true});
tree.setRootNode(root);

tree.render();
root.expand(false, /*no anim*/ false);
}
};
}();
Ext.EventManager.onDocumentReady(tree__eF9sYWJlbF90b3BpY3M.init, tree__eF9sYWJlbF90b3BpY3M, true);
</script>
<link rel="stylesheet" type="text/css" href="ext-css/layout.css" />
<link rel="stylesheet" type="text/css" href="ext-css/button.css" />
</head>
<body class="ytheme-gray">
<div id ="tree__eF9sYWJlbF90b3BpY3M">
</div>
</body>
</html>


the php file giving the JSON to the tree is giving it endlessly so thats why there's no leaf node here.
I used the latest build from the download post. It works as you can see. I can't seem to reproduce your error... :? I tried leaving the extra comma there and it didn't even break at any given moment...

EDIT: just had a flash here...it works on my Windows & my linux box...but you have Mac OS right?

sjanes71
19 Mar 2007, 2:47 PM
This is a Ruby on Rails (Webrick) environment hosted by Ubuntu Desktop 6.10.

sjanes71
19 Mar 2007, 3:12 PM
I'm following the code and the render function puts in an explicit 'style="display: none"' into these child nodes and updateExpandIcon never removes it. When I comment out the "display:none" on line 323 in TreeNodeUI.js, the tree works as I would expect it to when I expand the nodes.



var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', n.attributes.cls,'">',
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
'', this.emptyIcon, '',
'', a.icon || this.emptyIcon, '',
'<span unselectable="on">',n.text,"</span> (',a.href ? a.href : )</div>",
'<ul class="x-tree-node-ct" style="/* XXX display:none;*/">[/list]',
""];

Bug?

sjanes71
19 Mar 2007, 3:17 PM
Very funny-- anyone got a quick answer for why the [-] controls won't collapse the node? :)

Jul
19 Mar 2007, 5:57 PM
Can you post more of your JSON data that includes some leaf nodes? Maybe there is something wrong there.

sjanes71
20 Mar 2007, 4:39 AM
Leaf nodes are identical to folder nodes-- the tree is figuring out if they're leafs if the JSON query returns no new children.

Here is the Tree rendering now after I commented out the hard coded "display:none" in the render
function:

http://recursism.com/images/tree-sample-fix.png

Now I'm looking for why I can expand, but not collapse these nodes.

sjanes71
20 Mar 2007, 5:15 AM
The JSON data for "topics::Arts/Animation/Anime/Collectibles" looks like:



[

{"text":"Cels","id":"topics::Arts\/Animation\/Anime\/Collectibles\/Cels","cls":"folder"},

{"text":"Models and Figures","id":"topics::Arts\/Animation\/Anime\/Collectibles\/Models and Figures"

,"cls":"folder"},

{"text":"Shitajiki","id":"topics::Arts\/Animation\/Anime\/Collectibles\/Shitajiki","cls":"folder"}

]

sjanes71
20 Mar 2007, 9:33 AM
Hrm... I upgraded to what I think is the lastest version of Ext (Alpha 3 Rev 4?), and it still has the same problem with expanding nodes to be invisible, unless I comment out that style.

BernardChhun
20 Mar 2007, 10:04 AM
about your collapsing problem, can you extract the selNode using


yourTree.selModel.selNode; ?

and can you toggle it?


yourTree.selModel.selNode.toggle();

sjanes71
20 Mar 2007, 10:26 AM
I had to fiddle the tree init to put the tree out into a global variable so I could touch it, I can get it
and it toggles, but the node and its children do not collapse.

BernardChhun
20 Mar 2007, 10:33 AM
I had to fiddle the tree init to put the tree out into a global variable so I could touch it, I can get it
and it toggles, but the node and its children do not collapse.

if I toggle a selected node, it collapse if it is expanded and vice-versa...so I don't quite understand that sentence....damn it's the first time I can almost say I have absolutely no clue at all man! This can be ranked next to my numerous and hazardeous IE6 rendering bugs!! :evil:

sjanes71
20 Mar 2007, 10:40 AM
Is there an easy way to get the TreeNodeUI to give an alert when its told to collapse?

sjanes71
20 Mar 2007, 11:09 AM
Let me try an describe what's going on:

1. TreePane dynamically loads in nodes from a JSON TreeLoader. They load and render fine.
2. When I expand a Folder node, JSON TreeLoader retreives a bit of new JSON data and creates and renders the new nodes as a sublevel of the expanded node. Before I removed the 'style="display:none"' from the LI, these nodes occupied vertical space but were invisible.
3. Now with these nodes visible, I cannot click on the [-] icon and collapse the expanded node. No errors are logged by Firebug.

How can I get Jack's attention on this problem?

BernardChhun
20 Mar 2007, 11:17 AM
Is there an easy way to get the TreeNodeUI to give an alert when its told to collapse?


hmm there's a collapse event on the TreeNode if I remember well. I would add a listener when the TreePanel append event would occur:


yourTree.on('append',
function(root, parentNode, node, index){
node.on('collapse', function(){ alert('collapse!');});
}
);

EDIT: that previous solution is bit heavy...this should work much better:

yourTree.on('collapse',
function(){
alert('collapse!');
}
);

tryanDLS
20 Mar 2007, 11:20 AM
Can you post link to a sample? It looks like your code is using the jquery adapter. I would think this is still to be considered experimental at this stage. Can you replicate this problem using the yui adapter code?

BernardChhun
20 Mar 2007, 11:24 AM
Can you post link to a sample? It looks like your code is using the jquery adapter. I would think this is still to be considered experimental at this stage. Can you replicate this problem using the yui adapter code?

Hey Tim, in a previous reply I had used the jquery adapter with his code to generate the TreePanel and it worked just fine...

sjanes71
20 Mar 2007, 1:28 PM
Ok, I get an alert for "click" but no response for "collapse."

The code:



var x__eF9sYWJlbF90b3BpY3M;
var tree__eF9sYWJlbF90b3BpY3M = function(){
var Tree = Ext.tree;
return {
init: function(){
var tree = new Tree.TreePanel('tree__eF9sYWJlbF90b3BpY3M', {
animate:true,
loader: new Tree.TreeLoader({dataUrl: '/label/navigate_json'}),
});
var root = new Tree.AsyncTreeNode({
text: 'Topics',
draggable:false, // disable root node dragging
id:'topics::',
rootVisible: false,
singleExpand: true
});
new Tree.TreeSorter(tree, {folderSort:true});
tree.on('click',
function(){
alert('click');
}
);
tree.on('collapse',
function(){
alert('collapse');
}
);
tree.setRootNode(root);
tree.render();
root.expand(false, false);
x__eF9sYWJlbF90b3BpY3M = tree;
}
};
}();
Ext.EventManager.onDocumentReady(tree__eF9sYWJlbF90b3BpY3M.init, tree__eF9sYWJlbF90b3BpY3M, true);

tryanDLS
20 Mar 2007, 1:57 PM
Did you try setting a BP in treenode.collapse? There are a couple conditions that can short-circuit the collapse process (e.g. a beforecollapse handler returning false and a couple other checks).

jack.slocum
21 Mar 2007, 12:13 AM
var tree = new Tree.TreePanel('tree__eF9sYWJlbF90b3BpY3M', {
animate:true,
loader: new Tree.TreeLoader({dataUrl: '/label/navigate_json'}), <-- extra comma
});

sjanes71
21 Mar 2007, 5:28 AM
I removed the comma from the code and rolled back the "display:none" fix and the same two problems persist: invisible children and no collapsing.

I'm reading through the code to get a sense of how it works...

jack.slocum
21 Mar 2007, 5:32 AM
Comment out single expand and let me know what happens - maybe a bug in there.

sjanes71
21 Mar 2007, 8:38 AM
When I comment it out and put back the display:none to the original code, the expanded nodes are invisible from the first expand. The collapse still does not work in either case.

jack.slocum
21 Mar 2007, 12:16 PM
I am not sure what to suggest. You will need to put up a link where we can take a look. You are welcome to PM the link to me.

santosh_vasanth
11 May 2007, 1:43 AM
jack sir
i was given a task that i should append tree node with child nodes as hours and respective nodes of hours as minutes and seconds.
these should be done dynamically without constructing a tree and should get from the server depending on respective action.
sir please mail me to solve this

tryanDLS
11 May 2007, 6:55 AM
jack sir
i was given a task that i should append tree node with child nodes as hours and respective nodes of hours as minutes and seconds.
these should be done dynamically without constructing a tree and should get from the server depending on respective action.
sir please mail me to solve this

1. Do not append new questions to existing non-related threads (just because a thread is about trees, doesn't make it related).
2. No one is going to do your job or provide solutions via email. There are numerous examples and forum posts regarding tree implementation. You need to start with the basic implementation and understand how to use the API. When you run into a problem with your code, post a detailed explanation in the Help forum.