CODEWITHSUNDEEP
javascriptextjswindowextjs4
Shashwat
Shashwat

Reputation: 2668

Setting the icons of a node in TreePanel

ExtJS 4:

I've created a treepanel. I wanted to set my own icons for its node so I used iconCls property for every node. Its working. But when I expand a node, it returns back to its normal 'Open Folder' icon.

var treeObject = {
text: "BANK OF AMERICA 1",
cls: "enterprise",
children: [
    {
        text: "core outputs",
        cls: "businessUnit",
        iconCls: 'abc'
    }
],
iconCls: 'abc',
leaf: "false",
expanded: true,
type: "enterprise"
}
treePanel.setRootNode(treeObject);

Please suggest something to avoid this problem.

Upvotes: 2

Views: 9926

Answers (2)

stambikk
stambikk

Reputation: 1365

Starting from Ext Js 4.0.6, you can use icon config on Ext.data.NodeInterface to set your node icons - just define a field named 'icon' on your model, use it for your treestore...

Ext.define('ModelForTreeNodes', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'icon', type: 'string', defaultValue: "Images/nodeicon.png" },
        // other fields
    ],
    // other config options
});

Then you can change the icon by simply setting the icon field on the node...and that's it.

var node = myTree.getStore().getNodeById(nodeId);
node.set('icon', 'Images/newIcon.png');

Upvotes: 0

elweilando
elweilando

Reputation: 182

try to specify your css class like this to prevent override with the default classes of extjs

.x-grid-tree-node-expanded .x-tree-icon-parent.abc{
  background: url(abc) x y no-repat !important;
}

Upvotes: 1

Related Questions