View Full Version : [CLOSED] TreeNodeUI addClass()

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.

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


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

Ext 3.X

Adapter used:


css used:

custom css (include details)

Browser versions tested against:

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

Operating System:

Win7 Ent


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

Test Case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
<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';

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';
case 1: {
iconCls = 'user-red-icon';
default: {
iconCls = 'user-icon';


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


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

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.

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