We are using treepanel in our application.The code is:
var exStore = Ext.create('Ext.data.TreeStore',{
root : {
children : [{
text : 'Parent 1',
id : 'parent1',
checked : false,
iconCls : 'ico1',
children : [{
text : 'Child 1',
id : 'child1',
checked : false,
leaf : true
},{
text : 'Child 2',
id : 'child2',
checked : false,
leaf : true
}]
},{
text : 'Parent 2',
id : 'parent2',
checked : false,
iconCls : 'ico2',
children :[{
text : 'Child 3',
id : 'child3',
checked : false,
leaf : true
},{
text : 'Child 4',
id : 'child4',
checked : false,
leaf : true
}]
}]
}
});
var treepanel = Ext.create('Ext.tree.Panel',{
id : 'tree',
width : 300,
height : 300,
store : exStore,
rootVisible : false
});
But we are facing two issues here.
1.We have specified iconCls for parent node.It is displaying fine when tree collapsed.If we expand the tree it is replaced with folder icon.For reference please have a look at attached images.
2.If we select the parent node,then the child nodes under particular parent nodes has to getselected.
If any one has idea.Please help me.We are trying a lot on these issues.
Go to your css and try something like :
.x-tree-node-collapsed .x-tree-node-icon
{
background-image: url('../images/tree/ico1.png') !important;
background-repeat: no-repeat;
}
.x-tree-node-expanded .x-tree-node-icon
{
background-image: url('../images/tree/ico2.png') !important;
background-repeat: no-repeat;
}
.x-tree-node-leaf .x-tree-node-icon{
background-image:url(/images/menu/folder.gif);
}