Question

当节点支持展开/折叠时，如何在每个节点上更改树节点图标？

例如，我可以使用此CSS为树全局设置展开/折叠图标：

#reports-tree .x-tree-icon-parent
{
    background-image: url('../images/tree/folder_closed.png');
    background-repeat: no-repeat;
}

#reports-tree .x-grid-tree-node-expanded .x-tree-icon-parent
{
    background-image: url("../images/tree/folder_opened.png");
    background-repeat: no-repeat;
}

我还可以使用leaf作为标准设置单个iconCls图标。

但是，在某些情况下，我有非叶节点，我想提供自定义图标，而不是使用正常的展开/折叠图标。

Answer 1

似乎解决方案是将!important放入图标CSS，例如：

.sg-arp-reports-tree-report-stim {
    background-image: url('../images/tree/report_stim.png') !important;
    background-repeat: no-repeat;
}

这似乎按预期工作，无论展开/折叠或leaf / not-leaf如何，图标都保持不变。

Answer 2

这应该可以帮到你

#helpContentsTree .x-tree-node-expanded  .x-tree-node-icon
{
    background-image: url("test1.gif") !important;
    background-repeat: no-repeat;
}
#helpContentsTree .x-tree-node-collapsed   .x-tree-node-icon
{
    background-image: url("test.jpg") !important;
    background-repeat: no-repeat;
}

ExtJS 4树图标

2 个答案: