How to Display an Image Inside an Ext JS GridPanel’s Cell

September 25, 2009. Posted by Jorge

A simple approach you can take to displaying an image inside an Ext GridPanel’s cell consists of using a renderer function to modify the cell’s appearance.

To explain this approach, I will use a sample GridPanel that displays movie rentals information. Together with movie titles and number of rentals, the grid will display rental trends using a small icon, as shown in the following screenshot:

How to do it

First, we need some data to work with. An ArrayStore with a few dummy records will do the job:

var store = new Ext.data.ArrayStore({
    fields: ['title', 'rentals', 'trend'],
    data: [['ACADEMY DINOSAUR', 305,'up' ],
    ['DRAGONFLY STRANGERS', 240, 'neutral'],
    ['FAMILY SWEET', 188, 'down'],
    ['FREAKY POCUS', 205, 'up'],
    ['GABLES METROPOLIS',265,'up']]
});

Next comes the GridPanel definition:

var grid = new Ext.grid.GridPanel({
    title: 'Movie rentals this month',
    store: store,
    columns: [
     { id: 'title-col', header: "Title", width: 180, dataIndex: 'title', sortable: true },
     { header: "Rentals", width: 75, dataIndex: 'rentals', sortable: true, align: 'right' },
     { header: "Trend", width: 75, resizable: false, dataIndex: 'trend', sortable: true, align: 'center',
         renderer: function(value, metaData, record, rowIndex, colIndex, store) {
             switch (value) {
                 case 'down':   
                     metaData.css = 'trend-down';
                     break;
                 case 'neutral':    
                     metaData.css = 'trend-neutral';
                     break;
                 case 'up':   
                     metaData.css = 'trend-up';
                     break;
             }
             return '';     // Return an empty string so only the cell's background is visible
         }
     }
    ],
    autoExpandColumn: 'title-col',
    renderTo: Ext.getBody(),
    width: 350,
    height: 200,
    loadMask: true
});

How it works

The insteresting part in the above code is the trend column's renderer. A renderer function is an interceptor method that can change the grid cell before it is rendered.

Inside the renderer, we add the trend image by inspecting the cell's value and modifying the css property of the metaData object:

renderer: function(value, metaData, record, rowIndex, colIndex, store) {
     switch (value) {
         case 'down':   
             metaData.css = 'trend-down';
             break;
         case 'neutral':    
             metaData.css = 'trend-neutral';
             break;
         case 'up':   
             metaData.css = 'trend-up';
             break;
     }
     return '';     // Return an empty string so only the cell's background is visible
}

The styles assigned to metaData.css simply change the cell's background to reflect the trend. Here are the styles used:

<style type="text/css">
   .trend-down 
   {
           background:url(img/trend-down.png) 20px no-repeat !important;
   }
   .trend-neutral 
   {
           background:url(img/trend-neutral.png) 20px no-repeat !important;
   }
   .trend-up 
   {
           background:url(img/trend-up.png) 20px no-repeat !important;
   }
</style>

The metaData object has another property, metaData.attr, that you can use to apply attributes to the cell's data container element, for example: metaData.attr = 'style="font-weight:bold";'.

You can create a more complex logic based on the renderer function's other arguments: record, rowIndex, colIndex and store.