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.

score 17 · Accepted Answer · answered Jul 05 '11 at 09:51

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.

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. — Dawesi, May 06 '15 at 12:52

score 3 · Answer 2 · answered Nov 24 '15 at 21:32

3

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
}

answered Nov 24 '15 at 21:32

Michel

571
1
4
19

score 0 · Answer 3 · answered Oct 01 '18 at 21:01

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

How to get rid of icons in extjs tree

3 Answers3