extjs changement de la grille de fond de la cellule en fonction de la valeur

J'ai appliqué un moteur de rendu de mon grille-colonne,
mais la couleur de fond n'est pas en train de changer:

renderer: function(value, meta) {
    if (parseInt(value) > 0) {
        meta.tdCls = 'category-matching'; return value;
    }
    else { 
        meta.tdCls = 'category-not-matching'; return value;
    }
}

css:

.x-grid-cell .category-matching {
    background-color:green;
}
.x-grid-cell .category-not-matching {
    background-color:red;
}

J'ai aussi essayé

.grid-cell-inner

et

background-color:red; !important

mais aucun effet.

Une idée?

OriginalL'auteur Roman | 2013-11-11

  1. 35

    ...

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

    Cela fonctionne pour moi.

    Qui fonctionne pour moi aussi!
    Fonctionne pour moi aussi, sauf que vous devez ajouter "valeur de retour" ou vous vous retrouverez avec une colonne vide.
    ce serait correct! Merci

    OriginalL'auteur Sivakumar

  2. 2

    Inspiré par Sélectionner Sourire... cela a fonctionné pour moi:

        var myRender = function (value, metaData, record, rowIndex, colIndex, store, view) {
        if (parseInt(value) < 0) {
            metaData.attr = 'style="background-color:#ffaaaa !important;"';
        }
        return value
    };

    et le champ

    {id: 'dta', dataIndex: 'days_to_arrival', renderer: myRender}

    .

    ps. fait sous ExtJS v2.2.1

    OriginalL'auteur cloudeasy

  3. 1

    de se référer à ces exemple

    Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa',  "email":"[email protected]",  "change":100  },
{ 'name': 'Bart', "email":"[email protected]", "change":-20  },
{ 'name': 'Homer', "email":"[email protected]",  "change":23   },
{ 'name': 'Marge', "email":"[email protected]", "change":-11   }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name',  dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
],
height: 200,
width: 400,
viewConfig: {
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},
renderTo: Ext.getBody()
});
});

    CSS:

    .price-fall .x-change-cell {
background-color: #FFB0C4;
color:red;
}
.price-rise .x-change-cell {
background-color: #B0FFC5;
color:green;
}
    les valeurs sont dans le magasin, donc je ne change rien. Mais pour d'autres cas d'utilisation, il sera utile!

    OriginalL'auteur Surya Prakash Tumma

  4. 0

    Essayer 

    .x-grid-cell.category-matching {
background-color:green;
}
.x-grid-cell.category-not-matching {
background-color:red;
}
    Aussi, il serait utile si vous pouviez poster le rendu HTML de la grille.
    pas d'effet avec qui

    OriginalL'auteur BillyTom

  5. 0
    renderer: function (value, metaData) {
if (parseInt(value) > 0) {
metaData.tdStyle = 'background-color:#ffaaaa';
}
return value
}
    cela fonctionne avec extjs 6.5
    Expliquer pourquoi ce code pourrait l'aider.
    Même si votre code résout les OP problème, il est recommandé d'ajouter le texte descriptif de votre extrait de code.

    OriginalL'auteur Frank Ricardo Ramirez