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

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.

Downloads

Download the sample: How-to-Display-an-Image-Inside-an-Ext-JS-GridPanel.zip

Comments

  1. Akshay says

    Canu Please share the fiddle for the demo. It will be really helpful , if you can share jsfiddle or sencha try for the same. I have used the same code, But Icon not coming. I have send json object of grid to extjs using ajax with sample json object

    {“success”:true,”columns”:[{"dataIndex":"Icon","header":" ","flex":1,"renderer":"function(value, metaData, record, rowIndex, colIndex, store) {alert(value);metaData.css = value;}"},{"dataIndex":"Name","header":"Name","flex":1}],”fields”:["Icon","Name"],”store”:[{"Icon":"tree-admin-enterprise","Name":"Enterprise"},{"Icon":"tree-admin-domains","Name":"Domains"}],”errorMsg”:””}

    • Akshay says

      HI ,

      Its Working now. When I removed double quotes for renderer value. But now the problem is too many Icons are coming for the same cell. why is it happen like this, Please help

Leave a Comment

Your email address will not be published. Required fields are marked *