Extjs Treepanel: CSS to change default icons (node and leaf)

extjs tree extjs4 extjs4.1 extjs4.2
DeLe picture DeLe · Jul 13, 2013 · Viewed 9.6k times · Source

I have a tree panel like http://jsfiddle.net/bmbMy/ I try to change default icons (node and leaf) by using css. But that not working.

.x-grid-row  .x-grid-tree-node-expanded {
    background: url('http://icons.iconarchive.com/icons/sekkyumu/developpers/16/Play-Green-Button-icon.png') no-repeat center center !important;
}
.x-grid-row  .x-grid-tree-node-leaf {
    background-image:url('http://icons.iconarchive.com/icons/graphicrating/koloria/16/Button-Play-Pause-icon.png');
}

How can i do that thanks

Answer

Darin Kolev picture Darin Kolev · Jul 13, 2013

You haven't override the right css classes. Here is what you need:

.x-grid-tree-node-expanded .x-tree-icon-parent {
    background: url('http://icons.iconarchive.com/icons/sekkyumu/developpers/16/Play-Green-Button-icon.png') no-repeat center center !important;
}
.x-grid-row  .x-tree-icon-leaf {
    background-image:url('http://icons.iconarchive.com/icons/graphicrating/koloria/16/Button-Play-Pause-icon.png');
}

And the updated jsfiddle.

Related questions

Extjs 4 - creating a model for a tree panel

I would like to implement a tree panel with content loaded dynamically from the server (as Json) and with a custom data model. But I dont know how to define a model and a data store for that tree. Can …

Read More
check child nodes of a tree when a parent is clicked [ExtJS]

I would like to know how can i check the sibling nodes of a tree while clicking on a particular node in ExtJs. I had given id's for each node and i can access the id of a clicked node. …

Read More
Javascript how to parse JSON array

I'm using Sencha Touch (ExtJS) to get a JSON message from the server. The message I receive is this one : { "success": true, "counters": [ { "counter_name": "dsd", "counter_type": "sds", "counter_unit": "sds" }, { "counter_name": "gdg", "counter_type": "dfd", "counter_unit": "…

Read More