Ikony drzewa ExtJS 4

Question

Jak mogę zmienić ikony węzłów drzewa dla każdego węzła, gdy węzeł obsługuje rozwijanie/zwijanie?

Na przykład mogę ustawić globalnie ikony rozwijania/zwijania dla drzewa za pomocą tego CSS:

#reports-tree .x-tree-icon-parent
{
    background-image: url('../images/tree/folder_closed.png');
    background-repeat: no-repeat;
}

#reports-tree .x-grid-tree-node-expanded .x-tree-icon-parent
{
    background-image: url("../images/tree/folder_opened.png");
    background-repeat: no-repeat;
}

Mogę również ustawić poszczególne ikony leaf, używając standardowo iconCls.

Jednak w niektórych przypadkach mam węzły bez liści, którym chcę nadać niestandardową ikonę i NIE używać normalnych ikon rozwijania/zwijania.

extjs extjs4 extjs4.1

2

Lloyd 24 wrzesień 2012, 15:13

Answer 1

Wygląda na to, że rozwiązaniem jest dodanie !important ikony CSS, np.:

.sg-arp-reports-tree-report-stim {
    background-image: url('../images/tree/report_stim.png') !important;
    background-repeat: no-repeat;
}

Wydaje się, że działa to zgodnie z oczekiwaniami i utrzymuje tę samą ikonę niezależnie od rozwinięcia/zwinięcia lub liścia/nie-liścia.

2

Lloyd 24 wrzesień 2012, 15:39

Answer 2

To powinno ci pomóc

#helpContentsTree .x-tree-node-expanded  .x-tree-node-icon
{
    background-image: url("test1.gif") !important;
    background-repeat: no-repeat;
}
#helpContentsTree .x-tree-node-collapsed   .x-tree-node-icon
{
    background-image: url("test.jpg") !important;
    background-repeat: no-repeat;
}

1

Ponmudi VN 4 lipiec 2013, 11:50

Ikony drzewa ExtJS 4

2 odpowiedzi

Podobne pytania

Nowe pytania

extjs