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.

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.

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
}