PDA

View Full Version : Change Grid Single cell Colour



genggeng13
23 May 2012, 1:23 AM
Hi All , How do i set a single grid cell font color base on certain criteria .

My Code:

xtype: 'grid', id: 'Grid',
title: 'Student',
store: jsonStores.StoreStudent,
height: 645,
colModel: new Ext.grid.ColumnModel([
selModel.Student,
{ header: 'Student ID', width: 60, dataIndex: 'Student ' },
{ header: 'Name', width: 280, dataIndex: 'Name' },
{ header: 'Age', width: 280, dataIndex: 'Age' },
{ header: 'Country', width: 280, dataIndex: 'Country' },
{ header: 'Islocal', width: 50, dataIndex: 'Islocal' }
]),
viewConfig: {
getRowClass: function(rec, index, rp, ds) {
var c = rec.get('Islocal')
if (c != true) {
return 'red'; //Set CSS style
}
}
}

By using the getRow Class it will make the whole row become red colour ,
What i actually want to do when is var c != true than the column country only will change to red colour.

Thank you

willigogs
23 May 2012, 1:41 AM
If you only need to change the background of the country column, the I would simply just use a column renderer. E.g:



// CSS
.redbackground {background:#f00;}


// JS
function render_IsLocal (val, meta, record, rowIndex, colIndex, store) {
var c = rec.get('Islocal')
if (c != true) {
meta.css += ' redbackground';
}
return val;
};


// ColumnModel
{ header: 'Country', width: 280, dataIndex: 'Country', renderer: render_IsLocal}

genggeng13
23 May 2012, 2:16 AM
Thank you very much will , it works