CODEWITHSUNDEEP
extjs4
Green Fireman
Green Fireman

Reputation: 697

ExtJS 4 set background color to a cell

Is there a way in ExtJS 4 to add a background colour to the cells in the whole table, depending only on the value in the cell and not on the columns?

Upvotes: 0

Views: 1200

Answers (3)

Роман Гуйван
Роман Гуйван

Reputation: 1128

Basicly what you want to do is:

Create 1 renderer for all columns:

columns:{
  defaults: {
     renderer: myrenderer
    },
   items:[
    //your column definitions here...   
  ]
}

The renderer is smth like this:

var myrenderer = function(value, metaData, record, rowIndex, colIndex, store, view) {
if (value >= 0 && value < 25) {
    metaData.tdCls += 'x-change-cell-red';
} else if (value >= 25 && value < 50) {
    metaData.tdCls += 'x-change-cell-orange';
} else if (value >= 50 && value < 75) {
    metaData.tdCls += 'x-change-cell-yellow';
} else if (value >= 75 && value < 100) {
    metaData.tdCls += 'x-change-cell-green';
} else if (value === 100){
    metaData.tdCls +='x-change-cell-awesome-green';
}else {
    metaData.tdCls += 'x-change-cell-violet';
}
return value + '%';
}

Upvotes: 1

PinoyPal
PinoyPal

Reputation: 388

This works for me...

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

Upvotes: 1

mialkin
mialkin

Reputation: 2781

Add renderer to your column:

renderer: function (val, metadata, record) {
var backgroundColor = null;
if (val) {
    if (val == 1) backgroundColor = "green";
    if (val == 2) backgroundColor = "red";                   
}
metadata.style = 'background-color: ' + backgroundColor + ';';               
return '';

}

Here is a working example: https://fiddle.sencha.com/fiddle/b73

Upvotes: 3

Related Questions