PDA

View Full Version : Changing cell colors of individual cell in ExtJS 4.1



Pravin.Pawar
3 Oct 2012, 12:28 AM
Hi,

I want to apply different colors to the grid Panel cell in ExtJS 4.1. Based on some business rules; I have to highlight cells with different colrs.

Please let me know what are the different possibilities through which we can achieve this.

At this point; im thinking to hold individual cell color in the additional NON visible grid column and apply those colors during the render event.

NOT sure if we can get rowIndex and colIndex in the render event...

skirtle
3 Oct 2012, 1:33 AM
Please post questions in the Q&A forum. I've moved this thread.

You don't need to add a hidden column to your grid, so long as the relevant data is in your store.

Use a renderer on the relevant columns and set either the tdCls or style on the metadata as appropriate:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer

More information on grid cell styling:

http://skirtlesden.com/articles/styling-extjs-grid-cells

Pravin.Pawar
3 Oct 2012, 1:54 AM
In my case; I have to validate each and every cell of the grid to identify applicable cell color. For this; I will need to run some bussiness logic which will tell cell color of the grid.

I think; I will need to build such a object which will contain cell color as well as value of the cell.

Pravin.Pawar
3 Oct 2012, 2:23 AM
here is my code-

function onGridRender(value, meta, record) {
meta.tdCls = record.get('M2') == "" ? 'gray-cell' : 'orange-cell';
return value;
}

please let me know how can i get column index of the rendering cell

skirtle
3 Oct 2012, 2:26 AM
The column index is passed to the renderer as the 5th argument:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer