Question

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

Answer 1

想出来：

在初始化treepanel时，所有节点都有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;
}

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

2 个答案: