javascript - 如何摆脱 extjs 树中的图标

Question

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

Answer 1

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

这将完成这项工作：

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

如有必要，使用 config 选项添加一个类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 个优点：

• 只关注某些类型的节点
• 避免触发器和文本之间的空间

我在模型中定义了一个计算iconCls返回的自定义 css 类：

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

然后在 sass 文件中，我利用原生x-tree-icon-customcss 类将宽度设置为 0：

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