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.如果我们选择父节点，则必须选择特定父节点下的子节点。

enter image description here

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

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

您可以通过列出＆＃39; cls＆＃39;来指定要应用图标更改的树。树的财产。例如：

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

这样，包含树面板的DIV将具有CSS类＆＃39; my-tree-panel＆＃39;适用于它。然后在你的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，同样可以正常工作。

ExtJS4 treepanel图标问题

3 个答案: