How to set custom icon for tree node in ExtJS 4?

[Natalia R]

I cannot figure this out.
Even demo examples with custom icons on screenshot are now actually all with standard icons.

How to set custom icon for a tree node?

[bergstyle]

I use good old fashion CSS overrides for Hub List. Here is my css file.

/* Replaces default tree node yellow 
   folder icon with an OSX style one
*/
#containerTreePanel .x-tree-icon-parent {
    background-image: url("images/icon-fldr-default-closed.png");
}

/* This is the open state of the yellow
   folder icon.
*/
#containerTreePanel .x-grid-tree-node-expanded .x-tree-icon-parent {
    background-image: url("images/icon-fldr-default-closed.png");
    padding-top: 1px;
}

/* Replaces the default tree node leaf
   icon with Hub List list icon
*/
#containerTreePanel .x-tree-icon-leaf {
    background-image: url("images/icon-sdbar-list.png");
    width: 14px;
} 

[budnik]

We got solution from Evan Trimboli.

It's rather simple:

node.set('iconCls', your-icon-class);

[Skiff_]

You can do this while defining the store:

{ text: "Some text", expanded: true, iconCls: 'ico-test', children: [ ] }

and your css class:

.ico-test { background-color:#352788; width:15px; height:15px; background-image:none !important; }

[ordinary_guy]

We got solution from Evan Trimboli.

It's rather simple:

node.set('iconCls', your-icon-class);

Hmmm, this only seems to work if the node is not-expanded. Once the node is expanded it reverts to the standard open folder icon and the iconCls added to the node/model is ignored.

[ligaard]

We got solution from Evan Trimboli.

It's rather simple:

node.set('iconCls', your-icon-class);

How do I get a node object in the first place?

[Pascal KEMAJOU]

I found that if you do like this

"children": [{
"text": "Go jogging",
"leaf": true,
"checked": true,
"iconCls":"sys-car"
},{

You get the Resulttreepanel.png

[lexsidev]

Hmmm, this only seems to work if the node is not-expanded. Once the node is expanded it reverts to the standard open folder icon and the iconCls added to the node/model is ignored.

To have expanded/not expanded nodes keep your icon you can add .x-tree-lines before your class selector in your css.
If you set the node's iconCls property to node-icon, add the following to your css and it works wether or not the node is expanded :

.x-tree-lines img.node-icon{
    width:16px;
    background-image:url('/resources/images/admin-user.png')
}

[tvanzoelen]

just put this model on your tree and the icon property on the node will work. In that case css classes are not needed.

Ext.define('TreeModel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'text', type: 'string', defaultValue: null },
        { name: 'parentId', type: 'string', defaultValue: null },
        { name: 'index', type: 'int', defaultValue: null },
        { name: 'depth', type: 'int', defaultValue: 0 },
        { name: 'expanded', type: 'bool', defaultValue: false, persist: false },
        { name: 'expandable', type: 'bool', defaultValue: true, persist: false },
        { name: 'checked', type: 'auto', defaultValue: null },
        { name: 'leaf', type: 'bool', defaultValue: false, persist: false },
        { name: 'cls', type: 'string', defaultValue: null, persist: false },
        { name: 'icon', type: 'string', defaultValue: null, persist: false },
        { name: 'iconCls', type: 'string', defaultValue: null, persist: false },
        { name: 'iconQtip', type: 'string', defaultValue: null, persist: false },
        { name: 'root', type: 'boolean', defaultValue: false, persist: false },
        { name: 'isLast', type: 'boolean', defaultValue: false, persist: false },
        { name: 'isFirst', type: 'boolean', defaultValue: false, persist: false },
        { name: 'allowDrop', type: 'boolean', defaultValue: true, persist: false },
        { name: 'allowDrag', type: 'boolean', defaultValue: true, persist: false },
        { name: 'loaded', type: 'boolean', defaultValue: false, persist: false },
        { name: 'loading', type: 'boolean', defaultValue: false, persist: false },
        { name: 'href', type: 'string', defaultValue: null, persist: false },
        { name: 'hrefTarget', type: 'string', defaultValue: null, persist: false },
        { name: 'qtip', type: 'string', defaultValue: null, persist: false },
        { name: 'qtitle', type: 'string', defaultValue: null, persist: false }
    ]
});

[Asken]

To have expanded/not expanded nodes keep your icon you can add .x-tree-lines before your class selector in your css.
If you set the node's iconCls property to node-icon, add the following to your css and it works wether or not the node is expanded :

.x-tree-lines img.node-icon{
    width:16px;
    background-image:url('/resources/images/admin-user.png')
}

I couldn't get it to work with the above. I used this instead if someone is interested:

.x-grid-cell-inner img.node-icon {
    width:16px;
    background-image:url('/resources/images/admin-user.png')
}