extjs - ExtJS4 树形面板图标问题

Question

我们在我们的应用程序中使用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.如果我们选择父节点，那么特定父节点下的子节点必须被选中。

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

Answer 1

转到您的 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);

}

Answer 2

您可以通过列出树的“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;
}

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

Answer 3

更改树的图标，然后将其 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，同样可以正常工作。