CODEWITHSUNDEEP
extjsextjs4extjs4.1
Lloyd
Lloyd

Reputation: 29668

ExtJS 4 Tree Icons

How can I change the tree node icons on a per node basis when when the node supports expand/collapse?

For example, I can set the expand/collapse icons globally for the tree using this CSS:

#reports-tree .x-tree-icon-parent
{
    background-image: url('../images/tree/folder_closed.png');
    background-repeat: no-repeat;
}

#reports-tree .x-grid-tree-node-expanded .x-tree-icon-parent
{
    background-image: url("../images/tree/folder_opened.png");
    background-repeat: no-repeat;
}

I can also set individual leaf icons using iconCls as standard.

However, in some cases I have non-leaf nodes that I want to give a custom icon and NOT use the normal expand/collapse icons.

Upvotes: 2

Views: 4858

Answers (2)

Ponmudi VN
Ponmudi VN

Reputation: 1553

This should help you 

#helpContentsTree .x-tree-node-expanded  .x-tree-node-icon
{
    background-image: url("test1.gif") !important;
    background-repeat: no-repeat;
}
#helpContentsTree .x-tree-node-collapsed   .x-tree-node-icon
{
    background-image: url("test.jpg") !important;
    background-repeat: no-repeat;
}

Upvotes: 1

Lloyd
Lloyd

Reputation: 29668

It seems the solution is to drop in !important for the icon CSS, e.g:

.sg-arp-reports-tree-report-stim {
    background-image: url('../images/tree/report_stim.png') !important;
    background-repeat: no-repeat;
}

This seems to work as expected and keeps the icon the same regardless of expanded/collapsed or leaf/not-leaf.

Upvotes: 2

Related Questions