ExtJS 4 Tree Icons

Question

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.

Then change the `iconClass` before rendering. Could you show your JS code? — Shiplu Mokaddim, Sep 24 '12 at 11:41

score 2 · Accepted Answer · answered Sep 24 '12 at 11:39

2

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.

answered Sep 24 '12 at 11:39

Lloyd

29,197
4
84
98

is `sg-arp-reports-tree-report-stim` the default iconClass for non-leaf node? Changing ExtJS core is not a good practice. – Shiplu Mokaddim Sep 24 '12 at 11:43
Eh? I'm not changing anything `core` this is just a custom CSS class that's specified for `iconCls`. – Lloyd Sep 24 '12 at 11:47
All of the default Ext JS CSS classes start with the `x-` prefix. The sandboxed CSS classes start with `x4-`. – Eric Sep 24 '12 at 13:28

score 1 · Answer 2 · answered Jul 04 '13 at 07:50

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

ExtJS 4 Tree Icons

2 Answers2