Wie füge ich eine css-Klasse zu einem Knoten des Baumes in Ext4?

Ich möchte hervorheben, dass einige der Knoten in einem Ext.Baum.Panel.

In Ext3 habe ich erreicht dies, indem Sie eine Klasse, um den Baum Knoten ui-Objekt:

//add a class with to highlight the node
myTreeNode.getUI().addClass('highlightclass');

//remove the class to remove the highlighting
myTreeNode.getUI().removeClass('highlightclass');

Was ist das äquivalent in Ext4?
Ich war in der Lage, um das Symbol zu ändern, durch festlegen der iconCls Bereich des Knotens Modell, aber ich würde wirklich gerne in der Lage sein, eine Klasse, die mir erlaubt, markieren Sie den gesamten Knoten.

InformationsquelleAutor alexwells | 2012-06-15
  1. 3

    Hier ist die Antwort, die ich fand zu meiner eigenen Frage:

    //add a css class to a specific tree node
myTreePanel.getView().addRowCls(myTreeNode,'highlightclass');

//remove a css class from a specific tree node
myTreePanel.getView().removeRowCls(myTreeNode,'highlightclass');
    • auf jeden Fall eine bessere Lösung für Ihr Szenario.
    • Funktioniert wie ein Charme, Dank!
    • Ich fand die Klasse verschwunden jedes mal, wenn der Elternteil wurde erweitert oder reduziert
    • Das gleiche problem wie @WendyLisaGibbons
    • Habe meine eigene Lösung für das problem, das funktionierte besser als das, was hier beschrieben wird.
    InformationsquelleAutor alexwells
  2. 1

    Während die ausgewählte Antwort kann funktionieren, in meiner version von ExtJS (4.0.7) sobald ich erweitern oder reduzieren Sie einen Knoten in meinem Baum-panel die css-Klassen wurden alle zurückgesetzt. Ich glaube, die dauerhafte Möglichkeit dieses Problem zu beheben wäre

    myTreeNode.set('cls', 'highlightclass');

    Diese fügen Sie Ihre Klasse auf die spezifische Knoten in s td.x-grid-Zelle DOM-element.

    Hoffe, das hilft

    • Ich bin damit einverstanden, dass dies die beste Lösung für ExtJS 4.x, aber für die version 5 gibt es ein Problem zu: schweben auf den Erweiterungspfeil, die Klasse wird überschrieben
    • Gutes know @qdev ich hatte noch nicht das Vergnügen im Umgang mit ExtJS 5 noch.
    • hier ist ein bug-report, die ich geöffnet habe, über diese. Es umfasst ein Turnschuh so gut: sencha.com/forum/...
    InformationsquelleAutor macguru2000
  3. 0

    Um dies zu erreichen, müssen Sie denken, der Baum, anstatt als treegrid. Einrichten einer Spalten-definition für Ihren Baum mit nur einer Spalte, blenden Sie die Kopfzeile der Spalte, und fügen Sie einen renderer für die Spalte.

    danach können Sie festlegen, Ihren renderer wie so mit eine css-Klasse definiert, die für die markierten Zeilen und wahrscheinlich ein Attribut in der Zeile model zu sagen, welche Zeilen hervorgehoben werden sollen:

    renderer: function(value, metaData){
    if (whatever you want here as a condition) {
        metaData.tdCls = "x-grid-row-alt-mine";
    }
    return value;
}
    • Als ich versuchte, dies umzusetzen habe ich alles verloren, das Baum Vertiefungen, aber während der Untersuchung, es stolperte ich über die Lösung, die ich schließlich mit. Vielen Dank für Ihre Hilfe.
    • Mein code ist etwas komplexer, ich kann sehen, warum Sie verloren die Vertiefungen mit diesem snippet.
    • Bitte aufzuklären.
    InformationsquelleAutor Reimius
Schreibe einen Kommentar