Проблема с иконкой в ​​ExtJS4 - PullRequest
Новая
       4

Проблема с иконкой в ​​ExtJS4

4 голосов
/ 15 июля 2011

Мы используем древовидную панель в нашем приложении. Код: 

var exStore = Ext.create('Ext.data.TreeStore',{ 
    root : { 
        children : [{ 
            text : 'Parent 1',
            id : 'parent1',
            checked : false,
            iconCls : 'ico1',
            children : [{
                text : 'Child 1',
                id : 'child1',
                checked : false,
                leaf : true
            },{
                text : 'Child 2',
                id : 'child2',
                checked : false,
                leaf : true
            }]
        },{
            text : 'Parent 2', 
            id : 'parent2',
            checked : false,
            iconCls : 'ico2',
            children :[{
                text : 'Child 3',
                id : 'child3',
                checked : false,
                leaf : true
            },{
                text : 'Child 4',
                id : 'child4',
                checked : false,
                leaf : true
            }]
        }] 
    }
});

var treepanel = Ext.create('Ext.tree.Panel',{
    id : 'tree',
    width : 300,
    height : 300,
    store : exStore,
    rootVisible : false
});

Но здесь мы сталкиваемся с двумя проблемами.

1.Мы указали iconCls для родительского узла.отображается нормально, когда дерево свернуто. Если мы расширяем дерево, оно заменяется значком папки. Для справки, пожалуйста, посмотрите на прикрепленные изображения.
2. Если мы выбираем родительский узел, то дочерние узлы под определенными родительскими узлами должныgetselected.

enter image description here
enter image description here

Если у кого-то есть идея. Пожалуйста, помогите мне. Мы много пытаемся решить эти проблемы.

Ответы [ 3 ]

4 голосов
/ 20 июля 2011

Зайдите на свой css и попробуйте что-то вроде: 

.x-tree-node-collapsed .x-tree-node-icon
{
    background-image: url('../images/tree/ico1.png') !important;
    background-repeat: no-repeat;
}

   .x-tree-node-expanded .x-tree-node-icon
{
    background-image: url('../images/tree/ico2.png') !important;
    background-repeat: no-repeat;
}
    .x-tree-node-leaf .x-tree-node-icon{
    background-image:url(/images/menu/folder.gif);

}
3 голосов
/ 16 июня 2012

Вы можете указать, к какому дереву вы хотите применить изменение значка, перечислив свойство дерева «cls».Например: 

{    
    xtype: 'treepanel',    
    cls: 'my-tree-panel',    
    store: 'MyStore',
    ...
}

При этом к DIV, содержащему панель дерева, будет применен класс CSS «my-tree-panel».Затем в вашем CSS-файле определите селектор следующим образом: 

.my-tree-panel .x-tree-icon-leaf {    
    background-image: url("images/newicon.png") !important;
}

Изменение значка будет применено только к этой конкретной панели дерева.Таким образом, вы можете использовать разные панели дерева в своих приложениях и настраивать иконки для каждого из них.

0 голосов
/ 05 июля 2013

, чтобы изменить значок для дерева, затем укажите его Id как 

 #tree x-tree-node-expanded  .x-tree-node-icon
{
    background-image: url("bookopen.png") !important;
    background-repeat: no-repeat;
}
#tree .x-tree-node-collapsed   .x-tree-node-icon
{
    background-image: url("bookclose.png") !important;
    background-repeat: no-repeat;
}

, если вам нужен значок для какого-либо конкретного значка, затем укажите этот идентификатор узла, то же самое отлично работает.

...