ExtJS4 treepanel icon issue

Unknown picture Unknown · Jul 15, 2011 · Viewed 8.9k times · Source

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.

enter image description here
enter image description here

If any one has idea.Please help me.We are trying a lot on these issues.

Answer

Armance picture Armance · Jul 20, 2011

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

}