[2.0b1] Suggested change to TreeNode icon

[ALL]

I am sure some of you are aware of this, but if you have a tree and are using the default css, and a folder does not have anything in it, it will change the icon of the folder to a "non folder icon".

This can be eassily fixed by changing these lines in the ext-all.css and tree.css files:

tree.css =>


/* some default icons for leaf/folder */
.x-tree-node-collapsed .x-tree-node-icon{
background-image:url(../images/default/tree/folder.gif);
}
.x-tree-node-expanded .x-tree-node-icon{
background-image:url(../images/default/tree/folder-open.gif);
}
.x-tree-node-leaf .x-tree-node-icon{
background-image:url(../images/default/tree/leaf.gif);
}

To:

/* some default icons for leaf/folder */
.x-tree-node-expanded .x-tree-node-icon{
background-image:url(../images/default/tree/folder-open.gif);
}
.x-tree-node-leaf .x-tree-node-icon{
background-image:url(../images/default/tree/leaf.gif);
}
.x-tree-node-collapsed .x-tree-node-icon{
background-image:url(../images/default/tree/folder.gif);
}

and ext-all.css =>


.x-tree-node-collapsed .x-tree-node-icon{background-image:url(../images/default/tree/folder.gif);}
.x-tree-node-expanded .x-tree-node-icon{background-image:url(../images/default/tree/folder-open.gif);}
.x-tree-node-leaf .x-tree-node-icon{background-image:url(../images/default/tree/leaf.gif);}

To:


.x-tree-node-expanded .x-tree-node-icon{background-image:url(../images/default/tree/folder-open.gif);}
.x-tree-node-leaf .x-tree-node-icon{background-image:url(../images/default/tree/leaf.gif);}
.x-tree-node-collapsed .x-tree-node-icon{background-image:url(../images/default/tree/folder.gif);}

it might even be best if both folder and folder-open are moved below the default icon (ie: leaf.gif)

Just my opinion/Thoughts,
-ALL

[mystix]

sorry to burst your bubble, but.... have you read the guidelines?

[ALL]

well, no, but when i posted this, i debated on weather to post it in the bugs or help, since it isnt really a question i decided not to post it in help, and seen how most users would expect the folder icon to stay there, it might be considered a "bug", in the sense of how wikipedia defined it; since "it behaves in a manner in which the user would not expect."

But if you feel it should be posted in the Help secion it wont bother me, i just thought that it might slightly be considered a bug, and i really believe most people would expect the folder icon to stay there when a folder is expanded with no items in it.

(in no way was i trying to argue the point, i was just stating how i felt about it)

[mystix]

well, no, but when i posted this, i debated on weather to post it in the bugs or help, since it isnt really a question i decided not to post it in help, and seen how most users would expect the folder icon to stay there, it might be considered a "bug", in the sense of how wikipedia defined it; since "it behaves in a manner in which the user would not expect."

But if you feel it should be posted in the Help secion it wont bother me, i just thought that it might slightly be considered a bug, and i really believe most people would expect the folder icon to stay there when a folder is expanded with no items in it.

(in no way was i trying to argue the point, i was just stating how i felt about it)

woah chill... it's not a problem. i'll just move this to the Open Discussion forum for better coverage and further discussion.

[acesfull]

Thanks, this is an easy fix. I just wasted over an hour trying to figure out why my empty folders were turning into leafs. Definitely should be the default.

[tfrugia]

Thanks for the CSS changes. I made the changes, but I'm still having the same problem (empty folder nodes showing the leaf node icon).

FB shows this after I drag all child nodes out of a node:


.x-tree-node-leaf .x-tree-node-icon {ext-all.css (line 444)
background-image:url(../images/default/tree/leaf.gif);
}

Any ideas?

[smartriver]

My turnaround:


tree.on("movenode", handleMoveNode);

function handleMoveNode(tree, node, oldParent, newParent, index) {

if (oldParent.firstChild == null) {
oldParent.ui.removeClass('x-tree-node-icon');
oldParent.ui.addClass('x-tree-node-collapsed');

//alert('oop');
}
}

hope this helps

[OutpostMM]

It would probably be better for portability's sake to leave the original Ext CSS files and put the changes in a new file. Then you can upgrade Ext without losing your changes. I added these rules to my own CSS sheet to change the icon for the folders (in this case, to my own custom icon, but they might as well point to folder.gif):


.x-tree-node-expanded .x-tree-node-icon
{
background-image:url(../images/icon-tree-nodeopen.gif);
}
.x-tree-node-collapsed .x-tree-node-icon
{
background-image:url(../images/icon-tree-nodeclosed.gif);
}

[elDub]

Well, as I too was looking for this solution and came across several other posts, here is the solution in the FAQ (http://extjs.com/learn/Ext_FAQ_Tree#My_tree_node_icons_appear_as_leaf_icons_when_in_my_mind_I_know_that_they_may_at_some_time_have_children) that Animal pointed to in yet ANOTHER post.

[arthurakay]

I have a similar issue.. though I don't know if it's really the same thing.

For starters... I checked my source code (the CSS files) and these changes are in there, so I'm assuming I have the latest CSS changes.

My problem involves spontaneously changing icons within my tree.

If I have a tree setup with several sets of children and grand-children, the page loads just fine no matter if the sub-folders are empty or full.

However, if you spend enough time (say 7 moves, for example) moving the children around, the 'folder' icon spontaneously becomes the 'leaf' icon.

Is this a glitch? Or is there some CSS explanation I haven't thought of?

It looks like (using FireBug) that the DIV class name gets changed from 'x-tree-node-el x-unselectable x-tree-node-collapsed' to 'x-tree-node-el x-unselectable x-tree-node-leaf'