How to get rid of icons in extjs tree

Question

I would like to get rid of the icons in an extjs tree. Instead i would like to set all the nodes that have children in bold.

Claimant

Answer 1

ExtJS relies on CSS for styling, so the easiest way to remove the icons is to create a CSS rule that overrides one provided by Ext.

This will do the job :

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

Add a class with the extraCls config option or use the component ID to qualify the rule if necessary.

As for the bold text, there doesn't seem to be a way using just CSS, so you could listen to the afterRender event of the tree view, though that won't be enough if you add nodes dynamically.

Rasmussen

assuming of course it's the only way you want trees in your whole application... you might want to add a class to your tree panel , then reference specifically in that case. – Dunnite

Answer 2

In the column definition:

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

Repay

Answer 3

Below my solution with ExtJS 6.5 that brings 2 advantages:

• to focus on certain types of nodes only
• to avoid the space between the trigger and the text

I define in the Model a calculated iconCls returning a custom css class:

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

Then in the sass file I take advantage of the native x-tree-icon-custom css class to set the width to 0:

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

Obcordate