die Kombination von 2-Renderer in eine Erklärung in ExtJS

Question

ich schon für ein Gitter machen, die wie folgt aussieht:

      me.processHealth({ 
 
           xtype: 'gridcolumn', 
 
           renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { 
 
            var str = ''; 
 
            if (value === 0) { 
 
             str = 'No'; 
 
            } 
 

 
            if (value === 1) { 
 
             str = 'Yes!'; 
 
            } 
 

 
            if (value === 2) { 
 
             str = 'Yes! Sub'; 
 
            } 
 

 
            if (value === 3) { 
 
             str = 'Yes! Vice Chair'; 
 
            } 
 

 
            if (value === 4) { 
 
             str = 'Yes! Chair'; 
 
            } 
 

 
            return str; 
 
           },

Dieser Code ändert die Zeichenfolge je nach dem Ergebnis aus der Abfrage. Ich muss jetzt einen Renderer hinzufügen, der auch die Hintergrundfarbe abhängig vom gleichen Wert ändert. Dies ist der Code für das (ich weiß nicht, wie die beiden zusammen zu integrieren):

renderer : function(value, meta) { 
 
    if(parseInt(value) === 1) { 
 
     meta.style = "background-color:green;"; 
 
    } else if(parseInt(value) === 2) { 
 
     meta.style = "background-color:red;"; 
 
    } 
 
    return value; 
 
}

Wie würde ich diese 2 so zu integrieren, dass ich sowohl die str ändern und die bg Farbe je auf diesen Werten? Dank

Answer 1

Eine einzelne renderer Funktion der metaData und einen Wert zurückgeben kann ändern angezeigt werden:

me.processHealth({ 
    xtype: 'gridcolumn', 
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { 
    var str = ''; 
    if (value === 0) { 
     str = 'No'; 
    } 

    if (value === 1) { 
     str = 'Yes!'; 
     metaData.style = "background-color:green;"; 
    } 

    if (value === 2) { 
     str = 'Yes! Sub'; 
     metaData.style = "background-color:red;"; 
    } 

    if (value === 3) { 
     str = 'Yes! Vice Chair'; 
    } 

    if (value === 4) { 
     str = 'Yes! Chair'; 
    } 

    return str; 
    }, 

Um eine CSS-Klasse auf eine gesamte Zeile hinzufügen, Sie getRowClass im viewConfig für das Netz nutzen können (siehe Sencha Docs here)

viewConfig: { 
    getRowClass: function(record, rowIndex, rowParams, store){ 
     return record.get("valid") ? "row-valid" : "row-error"; 
    } 
}