如何删除 extjs 树中的图标

Question

我想删除 extjs 树中的图标。相反，我想将所有有子节点的节点设置为粗体。

Answer 1

ExtJS 依赖 CSS 进行样式设置，因此删除图标的最简单方法是创建一个 CSS 规则来覆盖 Ext 提供的规则。

这将完成这项工作：

.x-tree-icon { display: none !important; }

添加一个带有 extraCls 配置选项的类，或者在必要时使用组件 ID 来限定规则。

至于粗体文本，似乎没有办法只使用 CSS，因此您可以监听树视图的 afterRender 事件，尽管如果动态添加节点，这还不够。

Answer 2

在列定义中：

columns: [{
    xtype: 'treecolumn',
    text: 'Task',
    iconCls: '', // This property to get rid of tree icon
    width: 200,
    sortable: true,
    dataIndex: 'someStringIdentifier',
    locked: true
}

Answer 3

下面是我使用 ExtJS 6.5 的解决方案，它带来了 2 个优点：

• 仅关注某些类型的节点，
• 以避免触发器和

我在 Model 中定义的文本之间存在空格，计算出的 iconCls 返回自定义 css 类：

{
    name: 'iconCls',
    calculate: function (data) {
        return 'uw-shrink-icon';
    }
}

然后在 sass 文件中，我利用本机 x-tree-icon-custom css 类将宽度设置为 0：

.x-tree-icon-custom.uw-shrink-icon {
    background-image: none;
    width:0px;
}