Настройка значков узла в TreePanel

ExtJS 4:

Я создал панель дерева. Я хотел установить свои собственные значки для его узла, поэтому я использовал свойство iconCls для каждого узла. Это работает. Но когда я расширяю узел, он возвращается к своему обычному значку «Открыть папку».

var treeObject = {
text: "BANK OF AMERICA 1",
cls: "enterprise",
children: [
    {
        text: "core outputs",
        cls: "businessUnit",
        iconCls: 'abc'
    }
],
iconCls: 'abc',
leaf: "false",
expanded: true,
type: "enterprise"
}
treePanel.setRootNode(treeObject);

Пожалуйста, предложите что-нибудь, чтобы избежать этой проблемы.


javascript window extjs extjs4
person Shashwat    schedule 29.06.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

попробуйте указать свой класс css таким образом, чтобы предотвратить переопределение с классами extjs по умолчанию

.x-grid-tree-node-expanded .x-tree-icon-parent.abc{
  background: url(abc) x y no-repat !important;
}
person elweilando    schedule 29.06.2012
comment
Мне просто нужно было включить !important после url(), даже не меняя имя моего css. Вот и все. Спасибо большое. Но, пожалуйста, скажите мне, почему он переопределялся только тогда, когда я расширял узел. - person Shashwat; 29.06.2012
comment
код extjs не проверяет, дали ли вы ему пользовательский iconCls, прежде чем он установит значок папки при сворачивании и развертывании (есть два разных изображения, открытое и закрытое, которые он использует для отображения). Он просто устанавливает значок по умолчанию, когда эти события срабатывают. - person Reimius; 30.06.2012
comment
@ПолШредер! Вы хотите сказать, что !important переопределяет их css? Но здесь, когда я расширяю узел, он устанавливает значок по умолчанию; но когда я его сворачиваю, он снова отображает мой пользовательский css. Я не понял. - person Shashwat; 02.07.2012
comment
Они должны иметь расширенный cls в качестве дополнительного определения cls, создающего более конкретный путь в css, чтобы он вместо этого использовал этот cls, но тег !important переопределяет все подобные свойства css. В некотором смысле он переопределяет их CSS, но только для этого конкретного свойства. - person Reimius; 02.07.2012

arrow_upward
0
arrow_downward

Начиная с Ext Js 4.0.6, вы можете использовать icon config на Ext.data.NodeInterface для установки значков ваших узлов - просто определите поле с именем "значок" в своей модели, используйте его для своего хранилища деревьев...

Ext.define('ModelForTreeNodes', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'icon', type: 'string', defaultValue: "Images/nodeicon.png" },
        // other fields
    ],
    // other config options
});

Затем вы можете изменить значок, просто установив поле значка на узле... и все.

var node = myTree.getStore().getNodeById(nodeId);
node.set('icon', 'Images/newIcon.png');
person stambikk    schedule 04.09.2015