View Full Version : TreeNode does NOT Display Desired GIF File

19 Apr 2011, 7:31 AM
This Tree depicts a file/directory structure for a remote host. It displays nodes for both files and directories. The Tree renders well except that the Directory Nodes that have no children (i.e. no files or directories, these are leaf nodes) show the leaf.gif. Unfortunately, I'm trying to show the folder.gif.

To implement, I subclassed Ext.tree.TreeLoader and overrode the createNode() fn to produce the node objects. This all works. The directory nodes that have file or directory children are constructed as AsyncTreeNode objects. These render properly. The directory nodes that have no children and are, therefore leaf nodes, are constructed as TreeNode objects. In these cases, I assign the config.iconCls member with 'x-tree-node-collapsed'. Unfortunately, the nodes still display with leaf.gif. The following is a snippet from my createNode() fn. This snippet is loaded with temp logging code:

// The debugLog() calls log to FireBug's console.log.
returnNode = new Ext.tree.TreeNode(nodeConfig);
debugLog('CWB DEBUG nodeConfig info text="'+nodeConfig.text+'"; iconCls="'+nodeConfig.iconCls+'".');
if (returnNode.attributes){
var a = returnNode.attributes;
debugLog('CWB DEBUG returnNode.attributes text="'+a.text+'"; iconCls="'+a.iconCls+'".');
var ui = returnNode.ui;
var img = ui.getIconEl();
var el = ui.getEl();
if (img){
debugLog('CWB DEBUG img className="'+img.className+'"; nodeName="'+img.nodeName+'"; nodeType="'+img.nodeType+'"; src="'+img.src+'".');
debugLog('CWB DEBUG Unexpected condition: img is NOT defined.');

if (el){
debugLog('CWB DEBUG el className="'+el.className+'"; nodeName="'+el.nodeName+'"; nodeType="'+el.nodeType+'".');
debugLog('CWB DEBUG Unexpected condition: el is NOT defined.');
debugLog('CWB DEBUG Unexpected condition: returnNode.attributes is NOT defined.');

The results of the above logging is copied from FireBug below:

CWB DEBUG nodeConfig info text="Documents and Settings (0 Files)"; iconCls="x-tree-node-collapsed".
CWB DEBUG returnNode.attributes text="Documents and Settings (0 Files)"; iconCls="x-tree-node-collapsed".
CWB DEBUG Unexpected condition: img is NOT defined.
CWB DEBUG Unexpected condition: el is NOT defined.

Why does my assignment of 'x-tree-node-collapsed' not change the icon that is displayed?

19 Apr 2011, 9:59 AM
Is your JSON data passing 'isLeaf: false' for the childless nodes? And do the problem nodes also contain an empty 'children' array?

19 Apr 2011, 10:29 AM
JSON that is returned from my data source is interpreted and used to build the config objects for the AsyncTreeNode and TreeNode objects that are returned from this function. This is why I overrode the createNode() fn. Below is the initialization of this config object. Note that the nodeConfig var is the one passed to the constructor of TreeNode in my first post. In this case, hasChildren always contains false.

var hasChildren = ((attr.totalFileCount > 0)||(attr.totalDirectoryCount > 0));

var nodeConfig = {
id: attr.path,
allowChildren: hasChildren,
expandable: hasChildren,
// leaf: (! hasChildren),
listeners: {
beforechildrenrendered: this.onBeforeChildrenRendered,
scope: this
singleClickExpand: true,
text: label
// Add the checkbox if applicable ...
if (hasChildren && this.isMultiSelect && this.isDirSelectable){
nodeConfig.checked = false;

if (! hasChildren){
nodeConfig.iconCls = 'x-tree-node-collapsed';

One of the things that confuses me on this, is where does the Ext code in TreeNode.js use iconCls? I'm sure I'm missing something, but it seems to be thrown away. This is why I was trying to log content of ui, ui.getIconEl(), and ui.getEl(). When/where does it use the iconCls config member that I pass in?

19 Apr 2011, 10:46 AM
...One of the things that confuses me on this, is where does the Ext code in TreeNode.js use iconCls?

It would be the code in TreeNodeUI.js that really *uses* iconCls.

19 Apr 2011, 10:58 AM
That's what I thought Fay. But I'm still confused. Before posting, I opened the TreeNodeUI.js file and searched on "node.attributes.iconCls" and "iconCls". Got 0 hits. The only thing passed to the TreeNodeUI constructor is the node. So I'm not sure where iconCls goes or is used.

My original question remains. It seems like the iconCls member of the config for TreeNode is disregarded. I'm sure I'm wrong, but what am i missing here? Is there something else in the config that needs to be set?

19 Apr 2011, 11:04 AM
Maybe I just can't understand what it is you're trying to achieve, but have you looked at the \examples\tree\xml-tree-loader.js example which changes the iconCls.

19 Apr 2011, 11:30 AM
I looked at the example you refer to. I'm doing what they are doing. I got 'x-tree-node-collapsed' by examining rendered AsyncTreeNodes in FireBug. Those rendered nodes do display folder.gif, which is what I'm trying to display here. So I know that this CSS class exists in a CSS file that my Tree sees and that its URL points to a legitimate GIF file, because it displays for the AsyncTreeNodes (non-leaf).

19 Apr 2011, 12:06 PM
Just went back to FireBug and noticed something interesting. This may clue someone as to what I'm missing.

Went to the HTML tab of FireBug and inspected one of these troubled TreeNode elements. Saw something that I don't understand. On the HTML Style tab, it shows the highest precedence is a CSS selector called: ".x-tree-node-leaf .x-tree-node-icon". This selector points to the leaf.gif. This is what displays and is not what I want.

But yet, the HTML is as follows:
<img class="x-tree-node-icon x-tree-node-collapsed" ...>
So my iconCls, "x-tree-node-collapsed", string gets into the HTML and it is in the CSS precedence. But the selector it refers to does not have the background-image url(). It is second in precedence to the one above.

Is there a way to handle the config.iconCls in this case so that my selector shows up first. Does TreeNodeUI apply its URL after mine? Any suggestions?

19 Apr 2011, 2:43 PM
Finally solved this and I'd like to share the key points in case someone else gets stuck:
The key was Condor's post at the end of this thread:

In short, he said "don't use the same CSS classes that TreeNodeUI uses. So I changed my config.iconCls from 'x-tree-node-collapsed' to my own 'treeNodeLeafFolder'. This didn't quite get it all. Another CSS selector, apparently being set in TreeNodeUI somewhere, was still taking precedence. So i added !important to the new selector in my CSS file and it worked.

My new CSS Selector is as follows: