Как избавиться от иконок в дереве extjs

Question

Я бы хотел избавиться от значков в дереве extjs.Вместо этого я хотел бы установить все узлы, у которых есть дети, выделены жирным шрифтом.

Answer 1

ExtJS использует CSS для стилизации, поэтому самый простой способ удалить значки - создать правило CSS, которое переопределяет правило, предоставленное Ext.

Это сделает работу:

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

Добавьте класс с параметром конфигурации extraCls или используйте идентификатор компонента, чтобы при необходимости квалифицировать правило.

Что касается текста, выделенного жирным шрифтом, то, похоже, не существует способа использовать только 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-custom CSS класс, чтобы установить ширину 0:

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