Formatting GridPanel cells in ExtJS

Formatting a cell of GridPanel is straight forward in ExtJS. However API documentation was not very straight forward so I thought it will be helpful for others to use the example below:

Suppose you have a grid with following configuration:

 

If the male and female count ratio in a given hospital is greater than 1.2 then we want to show the female count in RED color. If the ratio is less than .80 then we want to show the female count in GREEN color.

How do we do that?
If you notice, in above code, columns configuration is an array of type ColumnModel. ColumnModel provides a configuration renderer, which allows you to specify a function, which is used to generate HTML markup for a cell given the cell’s data value.

 

You can even change the display value by returning the desired value.
I observed that if you do not return a value, it starts showing empty value in the cell. It was a bit surprising because documentation doesn’t say anything about returning a value.

Finally, you need to define the renderer attribute for the desired cell.

 

You can even use Ext.util.Format methods as renderer. In fact, usually, that should be sufficient for your need.

Related Posts

Leave a comment

Translate »
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.