PDA

View Full Version : change icons in Tree Panel



gabrialice
24 Oct 2012, 1:50 AM
Hello everybody!
I'm developing a Web Desktop application with EXT JS 3 and I need to change icons in a Tree Panel component. Now the icons are folder if the tree element has children, or tab if it doesn't contain.
I need instead to change icons depending on one node attribute.
I put this code inside the TreePanel:
listeners:{
'beforeload':function(node){
var nodeId=node.id,
elType=nodeId.substr(0,1),
idEl=parseInt(nodeId.substr(1)),
noEl=node.text;
stEl=node.attributes.str;
switch(elType){
case'p': node.getUI().getIconEl().src='images/accordian.gif' ;
break;
case'd': node.getUI().getIconEl().src='../../images/tabs.gif' ;
break;
default:break;
}
....
}
but the icon is changed only when I click to expand it. How can I assign the new icons directly to the nodes?
Thanks!

PavlaQ
24 Oct 2012, 2:59 AM
maybe this code help you



listeners: {
append: function( thisNode, newChildNode, index, eOpts ) {
newChildNode.set('icon', '../images/grid/g_1_blue_16.png');
}
}

gabrialice
24 Oct 2012, 5:21 AM
Thanks for your reply!
To load data in TreePanel I use:
loader: new et.TreeLoader({
dataUrl:urlModul0,baseParams:{op:'elProcedi'},
preloadChildren:true,singleExpand:true,
listeners:{'loadexception':function(tl,no,re){
ShowNotif('ERRORE',re.responseText);
}
}
}),
Should I add 'append' in the loader listeners?

PavlaQ
24 Oct 2012, 5:25 AM
I'm using this code sample when I create tree store. For example



var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'model.TreeStore',
root: {
expand: true
},
proxy: {
type: 'ajax',
url : 'index.php',
reader: {
type: 'json',
root: 'children'
}
},
listeners: {
append: function( thisNode, newChildNode, index, eOpts ) {
newChildNode.set('icon', '../images/grid/g_1_blue_16.png');
}
}
});