Teilweises Festlegen der Textfarbe innerhalb einer ExtJS-Rasterzelle

Question

Ich habe eine ExtJS 4.2-Rasterspalte (als Teil einer PHP MVC 3-Website), die sich auf den Status einer Reihe von Prozessen für Elemente bezieht.Diese Spalte gibt eine Zeichenfolge aus dreibuchstabigen Abkürzungen pro abgeschlossenem Prozess zurück, beispielsweise getrennt durch Leerzeichen Was Pre Cut wäre ein Gegenstand, der gewaschen, vorbereitet und geschnitten wurde, und Was Scr Pee wäre ein Gegenstand, der gewaschen, geschrubbt und geschält wurde.

Die gewünschte Funktionalität wäre jedoch das Abrufen alle die Prozesse und gestalten Sie jeden Eintrag so, dass er anzeigt, ob er abgeschlossen wurde;Ein Beispiel wäre <green>Was Pre</green> Cut würde einen Artikel bezeichnen, der gewaschen und vorbereitet, aber nicht geschnitten wurde.

Ist das möglich?Handelt es sich hierbei um etwas, bei dem ich die Werte und entsprechenden Stilformate pro Prozess als Array-Objekt statt als Zeichenfolge übergebe und die gewünschte Formatierung über den Renderer der Zelle erzeuge, oder bin ich optimistisch, was die Leistungsfähigkeit des Renderers einer Rasterspalte angeht?

Answer 1

Ein Spaltenrenderer bietet Ihnen eine Laufzeitumgebung, die HTML ausgibt. Die Fähigkeiten davon können kaum überschätzt werden ...

Ich bin mir nicht sicher, ob ich Ihre Problematik vollständig verstehe, aber hier ist ein Beispiel für den Anfang.Anhand einer Liste möglicher Prozesse werden alle Prozesse für jeden Datensatz angezeigt und die Prozesse hervorgehoben, die für diesen Datensatz gekennzeichnet sind (Beispiel Geige):

var processes = ['Foo', 'Bar', 'Baz', 'Bat']; // all available processes

new Ext.grid.Panel({
    renderTo: Ext.getBody()
    ,width: 400
    ,height: 200
    ,forceFit: true

    ,store: {
        fields: ['id', 'status', 'statusDetails']
        ,data: [
            {id: 1, status: 'Foo Bar', statusDetails: ['Foo', 'Bar']}
            ,{id: 2, status: 'Bar Baz', statusDetails: ['Bar', 'Baz']}
            ,{id: 3, status: 'Baz Bat', statusDetails: ['Baz', 'Bat']}
        ]
    }

    ,columns: [{
        dataIndex: 'id'
        ,text: "ID"
        ,width: 40
    },{
        dataIndex: 'status'
        ,text: "Status"
        ,renderer: function(value, md, record) {
            md.tdCls = 'processes-cell'; // gives us a hook for CSS
            return Ext.Array.map(processes, function(process) {
                var statusDetails = record.get('statusDetails');
                // possible alternative:
                // var statusDetails = record.get('status').split(' ');
                return '<div class="process ' + process + ' '
                + (statusDetails.indexOf(process) !== -1 ? 'on' : 'off')
                + '">' + process
                + '</div>';
            }).join('');
        }
    }]
});

Und stylen Sie das nach Herzenslust.Zum Beispiel:

.processes-cell .process {
    display: inline-block;
    width: 25%;
    text-align: center;
    border: 1px solid white;
}
.processes-cell .process.off {
    background-color: lightpink;
}
.processes-cell .process.on {
    background-color: lightgreen;
}
.processes-cell .x-grid-cell-inner {
    padding: 1px;
}

Answer 2

Ha ja, Rixo ist mir zuvorgekommen.Er hat Recht, Sie müssen mit dem arbeiten renderer Eigenschaft für Ihre Spalte.Ich habe auch eine Geige erstellt, falls Sie vielleicht ein weiteres Beispiel sehen möchten: https://fiddle.sencha.com/#fiddle/872