PDA

View Full Version : AsyncTreeNode Leaf Attribute Issue



Jul
7 Apr 2007, 9:54 PM
This is a small bug with an easy workaround, but I thought I would mention it anyway just in case someone else gets stuck on it.

This happens in a TreePanel built with AsyncTreeNodes. In the JSON data that is passed back for each node, the "leaf" attribute is used to determine if the expansion icon that appears next to the node should be suppressed. That attribute is a boolean value.

If "leaf":"true" is passed back, the expansion icon correctly does not appear.
If no "leaf" attribute is passed back for a node, the expansion icon does appear as expected.

However, if "leaf":"false" is returned, the expansion icon unexpectedly does not appear.

Of course the easy workaround is to not pass the "leaf" attribute back at all, but I think "leaf":"false" should force the expansion icon to appear rather than make it disappear.

JeffHowden
7 Apr 2007, 11:09 PM
If "leaf":"true" is passed back, the expansion icon correctly does not appear.
If no "leaf" attribute is passed back for a node, the expansion icon does appear as expected.

However, if "leaf":"false" is returned, the expansion icon unexpectedly does not appear.

Of course the easy workaround is to not pass the "leaf" attribute back at all, but I think "leaf":"false" should force the expansion icon to appear rather than make it disappear.

The reason you're seeing this is because you're not passing boolean values, but strings. What you want is


"leaf": true

or


"leaf": false

Jul
8 Apr 2007, 1:24 AM
That makes sense. I had mistakenly overlooked the fact that true didn't have quotes around it when snooping on the POSTS coming from the TreePanel in the examples.

Thanks for pointing that out.

- Jul

Animal
10 Apr 2007, 2:25 AM
I'm still getting the leaf icon, and no +/- indicator even when I specify leaf:false

I have this



var tree = new Ext.tree.TreePanel(menuContainer, {
animate: false,
loader: new Ext.tree.TreeLoader(),
enableDD: true,
ddGroup: "menuTree"
});
var root = new Ext.tree.AsyncTreeNode({
text:'Nige\u0027s Menu',
id:1,
className:'com.aspicio.entity.base.Menu',
expanded:true,
allowDrag:false,
leaf:false,
children:[{
text:'Static Data',
id:3,
className: 'com.aspicio.entity.base.Menu',
expanded:true,
allowDrag:true,
leaf:false,
children:[]
}]
});
tree.setRootNode(root);
tree.render();


It may have no children, but it is not a leaf. I want it to have a folder icon and a +/- indicator!

jack.slocum
10 Apr 2007, 12:28 PM
If it has no children (and it knows that) it won't have a plug/minus indicator. I don't know anyway around that.

Jul
10 Apr 2007, 5:51 PM
I was saving this for a future post... but I had a use case similar to Animal's. I had a node that temporarily had no children... but knew the node would at some point in the future have children. I wanted to force the node to be a non-leaf and then have it try to fill until the children became available.

I was going to look deeper in the tree code at some point to determine how difficult this would be. Some of my thoughts about solving it involved one or both of these:

A) Adding a configuration option for an AsyncTreeNode that would make that node not cache. Every expansion request would result in a new request from the server for that node's children.
B) AsyncTreeNodes set to leaf:false would continue to generate a server request until something other than an empty list of children was returned.

What do you think?

- Jul

jack.slocum
11 Apr 2007, 1:40 AM
I like B ) better than A). Both are good workarounds though. Can you bump this thread after the 15th and I will take a look again for 1.1?

Animal
11 Apr 2007, 3:47 AM
My tree doesn't come from a server, all the nodes are added in one go in the "children" property of the root node, and then in the "children" property of each child.

The tree has its state fully defined in the javascript code.

Animal
11 Apr 2007, 5:30 AM
I'm setting the icon manually to visually indicate to the user that it's a folder which may be dropped into:



var root = new Ext.tree.AsyncTreeNode({
text:'Nige\u0027s Menu',
id:1,
className:'com.aspicio.entity.base.Menu',
icon:'/aspicio/images/default/tree/folder-open.gif',
expanded:true,
allowDrag:false,
leaf:false,
children:[{
text:'Static Data',
id:3,
className:'com.aspicio.entity.base.Menu',
icon:'/aspicio/images/default/tree/folder-open.gif',
expanded:false,
allowDrag:true,
leaf:false,children:[]
}]
});

Animal
11 Apr 2007, 5:58 AM
Which is not so great because it appears with an open folder all the time.

The default UI should look at the leaf attribute, and if its === false, it should put a folder icon there.

leaf:false means "I don't care if there are no child nodes, it's a folder"

This is better:



Ext.override(Ext.tree.TreeNodeUI, {
updateExpandIcon : function(){
if(this.rendered){
var n = this.node;
var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
var hasChild = n.hasChildNodes();
if(hasChild || (n.leaf === false)){ //<-- explicitly NOT a leaf...
cls += n.expanded ? "-minus" : "-plus";
var c1 = n.expanded ? "x-tree-node-collapsed" : "x-tree-node-expanded";
var c2 = n.expanded ? "x-tree-node-expanded" : "x-tree-node-collapsed";
this.removeClass("x-tree-node-leaf");
Ext.fly(this.elNode).replaceClass(c1, c2);
}else{
Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
}
this.ecNode.className = "x-tree-ec-icon "+cls;
}
}
});


But once you've opened the empty folder, because it has no children, you can't close it. That's not too bad, at least it's a folder!, and open/closed makes no difference if there are no children.

jack.slocum
11 Apr 2007, 11:36 PM
Why not do like Explorer and give it a folder icon via iconCls? Then use x-tree-node-collapsed/x-tree-node-expanded to alter that icon when it actually has children?

e.g. iconCls: 'folder' with this css:


.x-tree-node img.folder, .x-tree-node-collapsed img.folder{
// folder closed bg image
}

.x-tree-node-expanded img.folder {
// open folder bg image
}

Animal
12 Apr 2007, 8:47 AM
OK, that should work.

One thing missing is an extra CSS selector in tree.css:

line 9 should be



.x-tree-node .x-tree-node-icon, .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .x-tree-node-icon{


This would work if the TreeNodeUI added the class name specified in iconCls, but it's not adding it.

I have attached a test case which unzips into examples/tree

Wolfgang
12 Apr 2007, 11:04 AM
I think this is related:
http://extjs.com/forum/showthread.php?t=4088

Animal
13 Apr 2007, 12:26 AM
iconCls works as Jack intended in the latest build. It looks good! Empty "Menu" nodes with no application components added to them display as folders.

Wolfgang
13 Apr 2007, 12:54 AM
iconCls works as Jack intended in the latest build. It looks good!

Which build - Do you mean beta2 or svn?


Empty "Menu" nodes with no application components added to them display as folders.
So do you mean this works (in that build) ?


.x-tree-node img.folder, .x-tree-node-collapsed img.folder{
// folder closed bg image
}

.x-tree-node-expanded img.folder {
// open folder bg image
}

Animal
13 Apr 2007, 4:17 AM
Yes, as long as you add config:



iconCls: 'folder'


to your nodes.

I use the folder images in /images/default/tree

Of course, you can't expand an empty node, so the ."x-tree-node-expanded img.folder" rule is redundant, but yes, it all works properly with the latest download of beta 2.

Wolfgang
13 Apr 2007, 4:26 AM
Thank you animal :)

mherger
18 May 2007, 8:22 AM
Some weeks back you asked the OP to bump this thread after the 15th - I'm doing this for him now :-).

I'd like to see some way to influence tree's caching behaviour as well. Thanks!

Michael

jack.slocum
18 May 2007, 1:55 PM
Some weeks back you asked the OP to bump this thread after the 15th - I'm doing this for him now :-).

I'd like to see some way to influence tree's caching behaviour as well. Thanks!

Michael
This issue was fixed with the addition of iconCls.

mherger
19 May 2007, 3:54 AM
Thanks. I'll do some rtfm then...

Michael