extjs - ExtJS 4 树形图标

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

这似乎按预期工作并保持图标相同，无论展开/折叠或叶子/非叶子。

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