CODEWITHSUNDEEP
javascriptextjsextjs4
DavidMcHale92
DavidMcHale92

Reputation: 61

Adding image thumbnails to grid rows in ExtJS

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.

Upvotes: 0

Views: 2090

Answers (3)

scs
scs

Reputation: 119

Try this ...

{
    text     : 'Article Name',
    flex     : 1,
    sortable : true,
    dataIndex: 'company',
    renderer: function(value, metadata, record) {
        return Ext.String.format('{0} <img height="20" width="20" src="{1}"></img>', value, record.data.image);
    }
},

If dataIndex is different than 'company' then you can use following in renderer

return Ext.String.format('{0} <img height="20" width="20" src="{1}"></img>', record.data.company, record.data.image);

Upvotes: 0

existdissolve
existdissolve

Reputation: 3114

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+"' />";
}

Upvotes: 1

forgivenson
forgivenson

Reputation: 4435

Your code that is setting dataIndex twice will just result in the dataIndex being set to 'image', because the second one will replace the first. As far as I know, there is no way to have a single column display multiple data values. You should probably just place them in separate columns.

The reason your article name is missing completely is because, as I explained above, the dataIndex is set to 'image'. As for the broken image, it is possible the path you have doesn't work. You should verify that it is correct.

Upvotes: 0

Related Questions