W naszej aplikacji używamy treepanel. Kod to:

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
});

Ale mamy tu do czynienia z dwoma problemami.

1. Określiliśmy iconCls dla węzła nadrzędnego.Wyświetla się dobrze, gdy drzewo jest zwinięte.Jeśli rozwiniemy drzewo, zostanie ono zastąpione ikoną folderu.W celach informacyjnych spójrz na załączone obrazy.
2. Jeśli wybierzemy węzeł rodzicielski, to węzły potomne pod poszczególnymi węzłami macierzystymi muszą zostać wybrane.

tu wpisz opis obrazu
tu wpisz opis obrazu

Jeśli ktoś ma pomysł. Pomóż mi. Bardzo staramy się rozwiązać te problemy.

4
Unknown 15 lipiec 2011, 09:18

3 odpowiedzi

Najlepsza odpowiedź

Przejdź do swojego css i wypróbuj coś takiego:

.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);

}
4
Soufiane Hassou 16 luty 2012, 22:09
5
Pamiętaj, że zmieni to wszystkie drzewa w Twojej aplikacji.
 – 
dbrin
24 kwiecień 2012, 05:12

Możesz określić, do którego drzewa chcesz zastosować zmianę ikony, wyświetlając właściwość „cls” drzewa. Na przykład:

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

Dzięki temu DIV zawierający panel drzewa będzie miał zaaplikowaną do niego klasę CSS „my-tree-panel”. Następnie w swoim pliku css zdefiniuj selektor w następujący sposób:

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

Zmiana ikony zostanie zastosowana tylko do tego konkretnego panelu drzewa. W ten sposób możesz mieć różne panele drzewa w swoich aplikacjach i będziesz mógł dostosować ikony dla każdego z nich.

3
user1454926 16 czerwiec 2012, 09:54

Aby zmienić ikonę dla drzewa, a następnie podaj jego identyfikator jako

 #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;
}

Jeśli chcesz ikonę dla dowolnej konkretnej ikony, podaj identyfikator węzła, to samo działa dobrze.

0
Ponmudi VN 5 lipiec 2013, 15:04