ExtJS4树面板图标问题

我们正在应用程序中使用treepanel。代码为：

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

但我们在这里面临两个问题

1.我们已为父节点指定了iconCls。当树折叠时，它显示良好。如果我们展开树，它将替换为文件夹图标。如需参考，请查看附加图像。
2.如果选择父节点，则必须选择特定父节点下的子节点

---

如果有人有想法，请帮助我。我们在这些问题上做了很多尝试。

转到您的css并尝试以下内容：

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

}

---

通过列出树的“cls”属性，可以指定要应用图标更改的树。例如：

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

这样，包含树面板的DIV将应用CSS类“my tree panel”。然后在css文件中定义选择器，如下所示：

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

---

图标更改将仅应用于该特定树面板。因此，您的应用程序中可以有不同的树面板，并且可以自定义每个树面板的图标。

要更改树的图标，请将其Id指定为

 #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;
}

---

如果您想要任何特定图标的图标，那么请提供该节点Id，同样可以正常工作。

请注意，这将更改应用程序中的所有树。