ExtJS4 treepanel icon issue

Question

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.

Answer 1

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);

}

Answer 2

You can specify which tree you want the icon change to apply by listing the 'cls' property of the tree. For example:

{    
    xtype: 'treepanel',    
    cls: 'my-tree-panel',    
    store: 'MyStore',
    ...
}  

With that, the DIV that contains the tree panel will have the CSS class 'my-tree-panel' applied to it. Then in your css file define the selector as follows:

.my-tree-panel .x-tree-icon-leaf {    
    background-image: url("images/newicon.png") !important;
}

The icon change will be applied only to that particular tree panel. Thus, you can have different tree panels in your applications and you'll be able to customize the icons for each.

Answer 3

to change icon for tree then give its Id as

 #tree x-tree-node-expanded  .x-tree-node-icon
{
    background-image: url("bookopen.png") !important;
    background-repeat: no-repeat;
}
#tree .x-tree-node-collapsed   .x-tree-node-icon
{
    background-image: url("bookclose.png") !important;
    background-repeat: no-repeat;
}

if you want icon for any particular icon then give that node Id, the same works fine.