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

Snap1

This entry was posted in Computer, Java. Bookmark the permalink.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s