如何摆脱extjs树中的图标

Question

我想摆脱extjs树中的图标。相反，我想设置所有具有粗体子节点的节点。

Answer 1

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

这将完成这项工作：

.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 中定义了返回自定义CSS类的计算得出的iconCls：

{
    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;
}