Display an Image Inside an Ext JS GridPanel’s Cell, Part 3

Are you stuck figuring out how to display an image inside an Ext GridPanel cell?  In this article we will examine how this can be done using a template column.  (In part 1 and part 2 of this series we explored how it can be done using a renderer function.) As in previous articles, the example I will use is a GridPanel that displays movie rentals information.  Along 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 to define the styles used to insert the trend icons in the gridd’s cells:

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

An ArrayStore will feed the grid a few dummy records:

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']]
});

As we will use a TemplateColumn, we need an instance of the XTemplate class to provide the formatting for the column’s cells:

var template = new Ext.XTemplate(
   '<span class="{[this.getTrendClass(values.trend)]}">{rentals}' +
   '<img class="padding-img" src="' + Ext.BLANK_IMAGE_URL + '"/></span>',
   {
        getTrendClass : function(trend) {
            var retValue = '';
            switch (trend) {
                 case 'down':
                     retValue = 'trend-down';
                     break;
                 case 'neutral':
                     retValue = 'trend-neutral';
                     break;
                 case 'up':
                     retValue = 'trend-up';
                     break;
                 default:
                    retValue = 'trend-neutral';
                     break;
             }
             return retValue;
        }
   }
);

template.compile();

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: 275, dataIndex: 'title', sortable: true },
     { header: "Rentals", width: 75, dataIndex: 'rentals', sortable: true, align: 'right',
        xtype:'templatecolumn', tpl:template}
],
    autoExpandColumn: 'title-col',
    renderTo: Ext.getBody(),
    width: 350,
    height: 175,
    loadMask: true
});

How it works

A TemplateColumn is a column definition class that renders a value by processing a record’s data using a configured XTemplate. By using the xtype:’templatecolumn’ and tpl:template configuration options on the rentals column, we are specifying that the data type of this column is TemplateColumn, and its XTemplate instance is the previously defined template object. Note that template will render the cell’s contents as a span element that contains the value of the record’s rentals field:

'<span class="{[this.getTrendClass(values.trend)]}">{rentals}' +
'<img class="padding-img" src="' + Ext.BLANK_IMAGE_URL + '"/></span>'

To understand how the icon that represents the trend value is inserted, observe that inside the template we use the {[ ... ]} tags to call the template’s member function getTrendClass:

getTrendClass : function(trend) {
    var retValue = '';
    switch (trend) {
         case 'down':
             retValue = 'trend-down';
             break;
         case 'neutral':
             retValue = 'trend-neutral';
             break;
         case 'up':
             retValue = 'trend-up';
             break;
         default:
            retValue = 'trend-neutral';
             break;
     }
     return retValue;
}

getTrendClass changes the style of the span element using the css classes defined earlier.  The style simply assigns a background image to the span element, and this image is one of the three icons that represent the three trends: neutral, up, and down. Also in the template, the transparent image (Ext.BLANK_IMAGE_URL) serves to add some padding between the cell’s  value and the right border of the cell.  This prevents the value from displaying right over the trend icon, which is positioned on the background and right-aligned.

What about you?

Do you have a favorite approach to accomplish this task?  Share your thoughts in the comments section.

Downloads

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