extjs set tree node’s style

a extjs tree panel maybe have a lot of nodes, by default it is very simple. sometimes we want to change some node’s styles.

1. write a css file, for example:

.rednode{
color: red;
}

.greennode{
color: green;
}

.igear {
background-image: url(../image/Gear-icon.png) !important;
}

2. link the css in your page

3. to set a node’s style statically, just set it’s cls and iconCls:

id: ‘node1’,

text: ‘Setting’,

iconCls: ‘igear’,

cls: ‘rednode’

4. to set a node’s style dynamically, add script below into proper functions(eg. node’s click event)

listeners: {
itemclick: function(view,record){
if(record.data.url!=null && record.data.url!=””){
var cnode = treePanel.getStore().getNodeById(record.data.id);
cnode.set(‘iconCls’,’igear’);
cnode.set(‘cls’,’rednode’);
addTab(record);
}
}
}