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开始，您可以在icon上使用Ext.data.NodeInterface config来设置节点图标 - 只需在模型上定义名为“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');

在TreePanel中设置节点的图标

2 个答案: