PDA

View Full Version : Changing images in tree panel structure



21 Apr 2013, 10:49 PM
Hi,
I have a tree panel.
How i will change the image of task folder. (please see image)
Is there any way to set our own image?
Can someone please help.
thanks.

slemmon
23 Apr 2013, 11:34 AM
You can use the icon
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.NodeInterface-cfg-icon
and iconCls
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.NodeInterface-cfg-iconCls
configs of nodeInterface.

So, in your store config you could do something like:


var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention",
leaf: true,
iconCls: 'my-icon-class'
}, {
text: "homework",
expanded: true,
children: [{
text: "book report",
leaf: true
}, {
text: "algebra",
leaf: true
}
]
}, {
text: "buy lottery tickets",
leaf: true
}
]
}
});

24 Apr 2013, 8:05 AM
Thanks for reply,

yes i am doing the same. i have json file, within this i am doing

Here is my json data.



{"text":".","children": [
{
task:'Blend',
iconCls:'task-folder-arrow',
expanded: true,
children:[{
task:'Blend Requirement',
leaf:true,
iconCls:'task'
},{
task:'Blend Management',
leaf:true,
iconCls:'task'
},{
task:'Blend Production',
leaf:true,
iconCls:'task'
},{
task: 'Blend Staging',
leaf: true,
iconCls: 'task'
}]
},{
task:'Finished Goods',
iconCls:'task-folder-arrow',
children:[{
task:'FG Management',
leaf:true,
iconCls:'task'
},{
task:'FG Production',
leaf:true,
iconCls:'task'
},{
task:'Release to Warehouse',
leaf:true,
iconCls:'task'
}]
}, {
task:'Print Order Management',
iconCls:'task',
leaf: true,
}
]}


But still it showing default only.
I am not getting where i am doing wrong.

please help?

slemmon
24 Apr 2013, 10:23 AM
See if this works for you:
http://jsfiddle.net/slemmon/eVcAd/

26 Apr 2013, 4:42 AM
Hi Slemmon,

Thanks a lot, its work for me

26 Apr 2013, 6:55 AM
Hi thanks,

When i will set iconCls for nodes, its work fine
But when i will set for root then before expending its show mine cls but after expending its taking default one. (As i shown in image)

How i can avoid this by default?

slemmon
26 Apr 2013, 1:04 PM
Try with:



.test
{
background-image: url('http://www.sfartscommission.org/gallery/wp-content/themes/mimbopro/images/icon_flickr.png');
}




.x-grid-tree-node-expanded .test
{
background-image: url('http://wakoopa.com/images/logo_icon.png?1363962553');
}

28 Apr 2013, 9:49 PM
Thanks a lot,

Its worked for me.