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:

var doctorSearchGrid = new Ext.grid.GridPanel({
frame:false,
title: 'Doctor search result',
autoHeight:true,
height : 'auto',
width:700,
footer : true,
store: doctorSearchStore,
columns: [
{header: "Country", dataIndex: 'country'},
{header: "hospital", dataIndex: 'hospital'},
{header: "male doctors", dataIndex: 'male_doctor_count'}
{header: "female doctors", dataIndex: 'female_doctor_count'}
] });

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.

function formatFemaleCount( currentCellValue, metadata, record, rowIndex, colIndex, doctorOrderStore ) {
var docRecords = doctorOrderStore.getAt(rowIndex);
var maleFemaleRatio = docRecords.male_doctor_count / docRecords.female_doctor_count;
if ( maleFemaleRatio <= .80 ) {
metadata.attr = 'style="color:green;"';
} else if ( maleFemaleRatio >= 1.2 ) {
metadata.attr = 'style="color:red;"';
} else {
metadata.attr = 'style="color:black;"';
}

return currentCellValue;
}

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.
var doctorSearchGrid = new Ext.grid.GridPanel({
frame:false,
title: 'Doctor search result',
autoHeight:true,
height : 'auto',
width:700,
footer : true,
store: doctorSearchStore,
columns: [
{header: "Country", dataIndex: 'country'},
{header: "hospital", dataIndex: 'hospital'},
{header: "male doctors", dataIndex: 'male_doctor_count'}
{header: "female doctors", dataIndex: 'female_doctor_count', renderer:formatFemaleCount }
] });

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

Tagged with: , ,
Posted in Sencha ExtJS
3 comments on “Formatting GridPanel cells in ExtJS
  1. Izik says:

    By the way, if want to use css class you can write this:

    metadata.css ='some-css-class';

  2. wtcindia says:

    Since, ExtJS is a Javascript library, I was hoping that it would be using java script date formatter. I tried to follow some of the formats but I did not get the desired result. Finally, I see following:

    The date parsing and format syntax is a subset of PHP’s date() function, and the formats that are supported will provide results equivalent to their PHP versions.

    Usually ExtJS teams take sensible decision. So, I hope there will be some good reason for this as well.

  3. wtcindia says:

    While this post explains how to format a particular cell, there may be situations, where you may need to combine values coming from two or more column to be represented in a single cell. ExtJS provides you a simple way to do that.All you need to do is to define a renderer function, which should be responsible for combining the values based on your need. Say for example
    You have following fields of your interest in doctorSearchStore:
    firstName
    lastName,
    departmentName

    and you want to show all these values under a heading “Doctor Name” with department name being shown next to the doctor name (last name followed by the first name) then you may need to write a renderer function, which will look like following:
    function formatDoctorName(val, x, store){
    return store.data.lastName + ' ' + val + ', ' + store.data.departmentName ;
    }

    where val may be representing firstName of the doctor (as you may have defined in the column definition).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: