PDA

View Full Version : TreePanel and iconCls



silvaros
4 Aug 2009, 1:48 PM
I would greatly appreciate any help in getting the proper icons displayed in my tree.

CSS:


.FOLDER_HOME, .COI_HOME {
background: url('../images/folder_home.gif') no-repeat;
height: 16px;
width: 16px;
}

.INBOX {
background: url('../images/folder_inbox.gif') no-repeat;
height: 16px;
width: 16px;
}
I saw some examples had something like ".x-tree-node-icon .INBOX" but it didn't do the trick.



var treeLoader = new Ext.tree.TreeLoader({url: navUrl, preloadChildren:true});

var treePanel = new Ext.tree.TreePanel({
autoScroll: true,
enableDD: false,
loader:treeLoader,
root: {
text: folderName,
hasChildren: true,
draggable: false,
id: 'items'
}
});
I've tried to use preloadChildren so I could do something like this, but it only works for the non-leaf nodes:


treePanel.on('load', function(tree, node, resp){
if(node.attributes.iconCls)
{
node.getUI().iconNode.className = node.attributes.iconCls;
}
});
I tried removeClass/addClass functions and the override code i found in other examples. But I must be doing something wrong because everyone else seems to be able to get their icons set. Oh, and here's a json snippet



[{
"selected":false,
"text":"FOLDER_HOME",
"parentId":-1,
"type":"FOLDER_HOME",
"iconCls":"FOLDER_HOME",
"leaf":false,
"url":"...",
"name":"eed",
"id":13,
"children":
[{
"selected":false,
"text":"FOLDER_HOME",
"parentId":13,
"type":"FOLDER_HOME",
"iconCls":"FOLDER_HOME",
"leaf":true,
"url":"...",
"name":"Home",
"id":10000
},{
"selected":false,
"text":"INBOX",
"parentId":13,
"type":"INBOX",
"iconCls":"INBOX",
"leaf":true,
"url":"...",
"name":"Inbox",
"id":1000
}]
}]

5 Aug 2009, 3:14 AM
inspect via firebug - do you see the images being requested? Do you see the FOLDER_HOME css Rule being applied to the TreeNodeUI.iconEl?

silvaros
5 Aug 2009, 5:57 AM
I'm not sure where to find that property. I looked at node.getUI() in the treePanel.on('load', ..) but that must not be the right place. In the html I have



<img class="x-tree-node-icon FOLDER_HOME" unselectable="on" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>


The code I posted above basically just removes the 'x-tree-node-icon ' part and the icon shows up. The problem is that the child nodes aren't rendered yet (even though I'm using preloadChildren:true) so, I am assuming, the load function doesn't iterate through them and set the property. I guess I could use the load for the treenode instead of the treepanel? or create a recursive function? But isn't the point of the iconCls property to make it so I shouldn't have to do any of this?

5 Aug 2009, 6:05 AM
preloading children is irellevant. can you post a publically viewable demo?

silvaros
5 Aug 2009, 6:42 AM
Edit: here is a workaround that seems to be working for me in FF and IE




treePanel.on('load', function(node){
if (node.attributes.iconCls) {
node.getUI().iconNode.className = node.attributes.iconCls;
}
if (node.childNodes.length > 0) {
node.on('expand', function(node){
onExpand(node);
});
}
});



function onExpand(node)
{
// Change the icon of the current node even though it may have already been changed
if (node.attributes.iconCls) {
node.getUI().iconNode.className = node.attributes.iconCls;
}

// Loop through its childen
for (var i = 0, len = node.childNodes.length; i < len; i++) {
var curChild = node.childNodes[i];

// Change the icon of any child nodes
if (curChild.attributes.iconCls) {
curChild.getUI().iconNode.className = curChild.attributes.iconCls;
}

// If the current child has children add the on expand to it
if (curChild.childNodes.length > 0) {
curChild.on('expand', function(node){
onExpand(curChild);
});
}
}
}
Ya sure, here's a short one.

frankthetank
6 Aug 2009, 9:29 AM
I had the same problem with ext2.2 yesterday.
iconCls was not showing my custom icon from the css class.
Instead, I changed iconCls to icon with the path of the image and it worked (the Json returned from the treeloader).

Not sure if this will work in version 3.

oscarpoblacion
9 Oct 2009, 2:17 AM
Hi,

I having the same problem. I think that what happens is that when
establishing the iconCls from the treeLoader, the new class is
recognized and applied to the node, but in the last position, thus
being overridden by x-tree-node-icon


<img id="extdd-14" class="x-tree-node-icon organigrama-boss" unselectable="on" src="./ext/resources/images/default/s.gif"/>

Using icon property instead solves the problem, but the API says this
is not the preferred method. Is the icon property really a problem?

Best wishes,

Óscar

Scott White
20 Nov 2009, 3:07 PM
Same issue extjs 2.2.0, fix to be able to use the iconCls is to use css selectors

.x-tree-node-icon.<yourclass>{}

peet
11 Jul 2011, 11:16 AM
use !important; in your custom CSS