javascript - 在 TreePanel 中设置节点的图标

Question

ExtJS 4：

我创建了一个树形面板。我想为其节点设置我自己的图标，所以我为每个节点使用了 iconCls 属性。它的工作。但是当我展开一个节点时，它会返回到其正常的“打开文件夹”图标。

var treeObject = {
text: "BANK OF AMERICA 1",
cls: "enterprise",
children: [
    {
        text: "core outputs",
        cls: "businessUnit",
        iconCls: 'abc'
    }
],
iconCls: 'abc',
leaf: "false",
expanded: true,
type: "enterprise"
}
treePanel.setRootNode(treeObject);

请提出一些建议来避免这个问题。

Answer 1

尝试像这样指定您的 css 类，以防止使用 extjs 的默认类覆盖

.x-grid-tree-node-expanded .x-tree-icon-parent.abc{
  background: url(abc) x y no-repat !important;
}

Answer 2

从 Ext Js 4.0.6 开始，您可以使用iconconfig onExt.data.NodeInterface来设置节点图标 - 只需在模型上定义一个名为“icon”的字段，将其用于您的树存储...

Ext.define('ModelForTreeNodes', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'icon', type: 'string', defaultValue: "Images/nodeicon.png" },
        // other fields
    ],
    // other config options
});

然后您可以通过简单地设置节点上的图标字段来更改图标......就是这样。

var node = myTree.getStore().getNodeById(nodeId);
node.set('icon', 'Images/newIcon.png');