PDA

View Full Version : [FIXED][3.0] Icons in tree different in v3



fzammetti
12 Mar 2009, 6:42 AM
Hi folks... in v2.2.0 I was doing this to add a node to a tree:



newTaskNode.appendChild(new Ext.tree.TreeNode({
id : newID, text : inResourceRecord.get("name"),
icon : "img/resource.gif"
}));Now, that still essentially works in v3, but the problem is that my icon is being overlayed on top of the default node icons. It seems obvious to me that it's because the default icons are put there via background images, so my icon specification sits on top of it (that seems to be supported by the documentation which actually says that it's preferred to use iconCls rather than icon).

However, I'd really like to change my existing code as little as possible, so my question is how can I turn off the background images? I tried setting iconCls to null in this config, but that didn't work (makes sense). I also tried creating a style class:


.cssnobg : {background-image:none;}...and applied that via iconCls, but that didn't work either. Any pointers?

Thanks,
Frank

jsakalos
12 Mar 2009, 6:50 AM
Since Ext 2.0 I've never done it with icon, only with iconCls. I guess it should work in Ext 3 too. Or a bug?

fzammetti
12 Mar 2009, 6:54 AM
Can you give me an example of how you do it with iconCls? What does your style definition look like? I would prefer not to do that, seems like it should work as it does in v2, but I've also got to get this done one way or another so I'll change it if I have to.

jsakalos
12 Mar 2009, 7:03 AM
If we're talking about tree, I just return iconCls in json. Like:


{"text":"Node 2","iconCls":"icon-save", .... }

You can see many custom icons here: http://filetree.extjs.eu

fzammetti
12 Mar 2009, 7:04 AM
I actually meant what does the definition of icon-save look like? I've just played with a bunch of settings around iconCls and cls, with various style definitions, and none of them are working, so I'm hoping I just botched the style definition.

FYI, this is manually adding nodes to an already constructed tree, although I'd hope that wouldn't matter.

jsakalos
12 Mar 2009, 7:06 AM
All are like this:


.icon-graph {
background-image:url(../img/silk/icons/chart_curve.png) ! important;
}
.icon-chart {
background-image:url(../img/silk/icons/chart_bar.png) ! important;
}
.icon-prefs {
background-image:url(../img/silk/icons/application_form.png) ! important;
}
.icon-ok {
background-image:url(../img/icons/ok16.png) ! important;
}
.icon-view-tile {
background-image:url(../img/silk/icons/application_view_tile.png) ! important;
}
.icon-check, .icon-check-off {
background-image:url(../ext/resources/images/default/menu/unchecked.gif) ! important;
}
.icon-check-on {
background-image:url(../ext/resources/images/default/menu/checked.gif) ! important;
}
.icon-stat-data {
background-image:url(../img/icons/kate_16.png) ! important;
}

fzammetti
12 Mar 2009, 7:13 AM
Hmm, no dice. No matter what I do it always insists on using the default icons. I tried using both iconCls and cls, with a style specification like you show here (which is in fact what I had before, except for important, which I tried adding too). *Seems* like a bug at the moment.

fzammetti
12 Mar 2009, 7:33 AM
Here's an example to demonstrate this:


<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<style>
.bgproject : { background-image:url(img/project.gif) ! important; }
.bgtask : { background-image:url(img/task.gif) ! important; }
.bgresource : { background-image:url(img/resource.gif) ! important; }
</style>
<script>
Ext.onReady(function() {

new Ext.tree.TreePanel({
layout : "fit", id : "projectsTree", title : "Project View",
root : new Ext.tree.TreeNode( { id : "root", text : "Projects" } ),
});

vp = new Ext.Viewport({
layout : "border", items : [
{ region : "center", html : "Center" },
{
region : "west", width : 200,
items : [ Ext.getCmp("projectsTree") ]
}
]
});

var pRootNode = Ext.getCmp("projectsTree").getRootNode();
var newProjectNode = pRootNode.appendChild(new Ext.tree.TreeNode({
id : "p1", text : "Project 1",
/*icon : "img/project.gif"*/
/*iconCls : "bgproject"*/
cls : "bgtask"
}));
var newTaskNode = newProjectNode.appendChild(new Ext.tree.TreeNode({
id : "t1", text : "task1",
/*icon : "img/task.gif"*/
/*iconCls : "bgtask"*/
cls : "bgtask"
}));
newTaskNode.appendChild(new Ext.tree.TreeNode({
id : "r1", text : "resource1",
/*icon : "img/resource.gif"*/
/*iconCls : "bgresource"*/
cls : "bgresource"
}));
pRootNode.expand();

});
</script>
</head>
<body></body>
</html>...and here are the icons I'm using in the img directory below the directory this HTML file is in:

12467 - project.gif
12468 - task.gif
12469 - resource.gif

Note that in the code I have three config possibilities there, two commented out... the only one that is working for me AT ALL is icon... both iconCls and cls seem to have no effect.

I'm still holding out hope that I've just done something really stupid here, but if not then I'm going to have to cut bait here soon and just not use my custom icons, but if someone can confirm this and possibly get a fix into SVN in the next few hours, that would be my preference.

letssurf
13 Mar 2009, 12:39 PM
You CSS style is invalid.


.bgproject : { url(img/project.gif) ! important; }

should be more like


.bgproject : { background-image: url(img/project.gif) ! important; }

fzammetti
13 Mar 2009, 12:50 PM
Oh duh... now I gotta go home and check if I actually had it screwed up or if I typed it wrong into the message here... hoping it's the later, but expecting it's the former :) Stupid-a** typo either way... I'll let you know in a few hours if that's what it is...

fzammetti
15 Mar 2009, 7:06 PM
I'm still observing the same behavior, even given that correction (test code above has been corrected as well). Can anyone else try that test code and confirm they see the same thing? (both cls and iconCls, neither works for me) If you see the same thing, and no one else has any ideas how to fix it, then I'm thinking this is most likely a v3 bug. I definitely don't know what else to try here.

fzammetti
16 Mar 2009, 8:20 AM
Saki, could you please move this one to bugs as well? I'm still hoping someone can point to a mistake on my part, but at this point it seems like it's a bug. I'm going to have to code around this for my book work tonight, unless it's fixed in the next few hours (I was holding off over the weekend just in case it was a problem on my part, but tonight I gotta make a move).

jsakalos
16 Mar 2009, 8:24 AM
Moved.

evant
6 Apr 2009, 11:08 PM
There was a css bug, but unrelated, if 'icon' is specified it adds a class 'x-tree-node-inline-icon' which hides the default icon, however due to the css refactor it wasn't included.

FYI the css still wasn't correct, which is why the iconCls wasn't working. I tested this using both iconCls and icon and it showed up correctly, with the latest from SVN.



Ext.onReady(function() {

new Ext.tree.TreePanel({
layout : "fit", id : "projectsTree", title : "Project View",
root : new Ext.tree.TreeNode( { id : "root", text : "Projects" } )
});

vp = new Ext.Viewport({
layout : "border", items : [
{ region : "center", html : "Center" },
{
region : "west", width : 200,
items : [ Ext.getCmp("projectsTree") ]
}
]
});

var pRootNode = Ext.getCmp("projectsTree").getRootNode();
var newProjectNode = pRootNode.appendChild(new Ext.tree.TreeNode({
id : "p1", text : "Project 1",
//icon : "img/project.gif",
iconCls : "bgproject"
}));
var newTaskNode = newProjectNode.appendChild(new Ext.tree.TreeNode({
id : "t1", text : "task1",
//icon : "img/task.gif",
iconCls : "bgtask"
}));
newTaskNode.appendChild(new Ext.tree.TreeNode({
id : "r1", text : "resource1",
//icon : "img/resource.gif"
iconCls : "bgresource"
}));
pRootNode.expand();

});



CSS:


.bgproject { background-image:url(img/project.gif) ! important; }
.bgtask { background-image:url(img/task.gif) ! important; }
.bgresource { background-image:url(img/resource.gif) ! important; }