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:

color: red;

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);



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s