PDA

View Full Version : [CLOSED] TreeNodeUI addClass()



brk11
17 Feb 2010, 6:55 AM
I'm trying to set the iconCls of a tree node using addClass method from TreeNodeUI, but it only works for the first "set". When I try to set the icon of the same node a second time, the icon doesn't change.

mystix
17 Feb 2010, 9:42 AM
as mentioned in your other bug report, it would help greatly if you could provide working code which demonstrates the problem at hand. this template serves as a good guide: http://www.extjs.com/forum/showthread.php?t=71015

thanks.

brk11
18 Feb 2010, 7:08 AM
Ext version tested:

Ext 3.X


Adapter used:

ext


css used:

custom css (include details)




Browser versions tested against:

Chrome 4
IE8
FF3.6 (firebug 1.5 installed)
Safari 4


Operating System:

Win7 Ent


Description:

The icon class doesn't change the second time you addClass.


Test Case:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Solarium</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css"></link>
<style type="text/css">
.user-icon {
background-image: url(/ext/examples/shared/icons/fam/user.png) !important;
background-repeat: no-repeat;
}

.user-red-icon {
background-image: url(/ext/examples/shared/icons/fam/user_red.png) !important;
background-repeat: no-repeat;
}

.user-green-icon {
background-image: url(/ext/examples/shared/icons/fam/user_green.png) !important;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';

Ext.onReady(function(){
i = 0;
var tree = new Ext.tree.TreePanel({
id: 'tree-panel',
width: 350,
height: 300,
bodyStyle: 'background:white;',
rootVisible: true,
useArrows: false,
containerScroll: true,
border: false,
autoScroll: true,
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'A',
leaf: true,
iconCls: 'user-icon'
}]
}),
listeners: {
'click': function(n) {
var iconCls = '';

switch(i%3) {
case 0: {
iconCls = 'user-green-icon';
break;
}
case 1: {
iconCls = 'user-red-icon';
break;
}
default: {
iconCls = 'user-icon';
}
}

Ext.get(n.getUI().getIconEl()).addClass(iconCls);
i++;
console.log(n.getUI());
}
}
});

var win = new Ext.Window({
title: 'Test case',
layout: 'fit',
height: 400,
//autoHeight: true,
width: 500,
closable: false,
resizable: false,
draggable: false,
items: [tree]
});

win.show();
});
</script>
</head>
<body>
</body>
</html>




Steps to reproduce the problem:

Click A node and the user icon should change every time.


The result that was expected:

Icon should change: user-blue -> user-green -> user-red -> user-blue...


The result that occurs instead:

Icon only change first time.


Debugging already done:

Show node state with FireBug. The class is added but the new icon isn't shown.


Possible fix:

not provided

evant
18 Feb 2010, 7:43 AM
I don't see why this is a bug. The classes get added to the node as you specify, you can verify it in firebug.

Marking this as closed.

mystix
18 Feb 2010, 8:06 AM
@brk11: you're adding classes, but never removing them.
think about it.