treeview - ExtJS4 树面板 - 更改没有子节点的节点的图标？

Question

我在 ExtJS4 应用程序中有一个树面板，我想更改用于节点的图标，以便它们在不包含子节点时使用“叶子”图标。但是，一旦将子节点添加到其中，它就会恢复为正常的文件夹图标。实现这一目标的最佳方法是什么？

Answer 1

弄清楚了：

在树形面板初始化时，所有节点都有allowChildren:true和leaf:false，不包含子节点的节点有iconCls:'tree-leaf'。该类随附的 css 规则是：

.x-reset .tree-leaf,
.x-reset .x-grid-tree-node-expanded .tree-leaf
{
    width: 16px;
    background-image: url('../ext4/resources/themes/images/gray/tree/leaf.gif');
}

然后，如果一个空节点添加了任何子节点，我会通过以下方式以编程方式删除自定义 iconCls css 类：

node.set('iconCls', '');

而当相反的情况发生时，当具有子节点的节点失去其子节点并且现在为空时，自定义类会以编程方式添加到其中：

node.set('iconCls', 'tree-leaf');

Answer 2

创建自己的 CSS 表并复制以下样式，这将覆盖默认样式并放置您的图像而不是主题

.x-tree-icon-leaf {
    background-color: transparent;
    width: 16px;
    height: 16px;
    background-image:url(../img/neogeo.png) !important;
}
.x-tree-icon-parent {
    background-color: transparent;
    width: 16px;
    height: 16px;
    background-image:url(../img/folder-pass.png) !important;
}
.x-tree-icon-parent-expanded {
    background-color: transparent;
    width: 16px;
    height: 16px;
    background-image:url(../img/folder-open-pass.png) !important;
}