Adding image thumbnails to grid rows in ExtJS

Question

I'm trying to add images to my current grid. Right now it displays the names of articles and what I'd like is to add a unique thumbnail above each articles name. My code is currently replacing the article name entirely and returning a broken image.

var grid = Ext.create('Ext.grid.Panel', {
store: gridStore,
id:'my_grid',
stateful: true,
listeners : {
             'celldblclick' : function(iView, iCellEl, iColIdx, iStore, iRowEl,iRowIdx, iEvent) {
                   var textbody = gridStore.getAt(iRowIdx).data.id;
                   $('#articleBody').html(textbody);
                   $('#header').html('<strong> Uncategorized </strong>')
            }
},
columns: [
    {
        text     : 'Article Name',
        flex     : 1,
        sortable : true,
        dataIndex: 'company',
        dataIndex:'image',
        renderer : function(value, metadata, record, rowIndex,colIndex, store)
        {
            return   "<img src='"+value+"' />";
        }
    }, 
],
height: 500,         
renderTo: 'gridPanel',
viewConfig: {
    stripeRows: true
}
});

Also, is it possible to set multiple attributes within DataIndex? I need both company and image as indexes.

Thank you.

Answer 1

You can't use multiple dataIndexes, but you can just easily expand your renderer() to add the extra HTML to show both the title and image in whatever style and configuration you'd like. You're already getting the record passed to the renderer, so simply grab the value from the property in the record that you'd like:

renderer : function(value, metadata, record, rowIndex,colIndex, store)  {
    return   record.get( 'company' ) + "<img src='"+value+"' />";
}