ExtJS4 Tree Panel - изменение иконки узла без дочерних элементов?

Question

У меня есть панель дерева в приложении ExtJS4, и я хочу изменить значок, используемый для узлов, чтобы они использовали значок «лист», когда они не содержат дочерних узлов.Но как только к нему добавляется дочерний узел, он возвращается к обычному значку папки.Каков наилучший способ добиться этого?

Answer 1

Понял:

При инициализации древовидной панели все узлы имеют allowChildren:true и leaf:false, а узлы, не содержащие дочерних элементов, имеют iconCls:'tree-leaf'.Соответствующее правило CSS для этого класса:

.x-reset .tree-leaf,
.x-reset .x-grid-tree-node-expanded .tree-leaf
{
    width: 16px;
    background-image: url('../ext4/resources/themes/images/gray/tree/leaf.gif');
}

Затем, если к пустому узлу добавлены дочерние узлы, я программно удаляю пользовательский класс iconCls css:И когда происходит обратное, когда узел с потомками теряет своих потомков и теперь пуст, в него программно добавляется пользовательский класс:

node.set('iconCls', 'tree-leaf');

Answer 2

Создайте свой собственный лист CSS и скопируйте следующий стиль, это заменит стиль по умолчанию и поместит ваши изображения вместо темы

.x-tree-icon-leaf {
    background-color: transparent;
    width: 16px;
    height: 16px;
    background-image:url(../img/neogeo.png) !important;
}
.x-tree-icon-parent {
    background-color: transparent;
    width: 16px;
    height: 16px;
    background-image:url(../img/folder-pass.png) !important;
}
.x-tree-icon-parent-expanded {
    background-color: transparent;
    width: 16px;
    height: 16px;
    background-image:url(../img/folder-open-pass.png) !important;
}