Display an image in grid column

[coshmos]

Hi, everyone.

I made a grid and need to display an image for every record in one of the column.
A grid are made this way:

        var grid = Ext.create('Ext.grid.Panel', {
            id: 'GridDataFromCreateForm',
            store: store,
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                flex: 3
            }, {
                header: 'Category',
                dataIndex: 'category',
                flex: 5
            }, {
                header: 'Shelf',
                dataIndex: 'shelf',
                flex: 2
            }, {
                header: 'Amount',
                dataIndex: 'amount',
                flex: 2,
                editor: {
                    xtype: 'numberfield',
                    allowBlank: false,
                    minValue: 0,
                    maxValue: 100000
                }
            }, {
                header: 'Photo',
                dataIndex: 'photo',
                flex: 2 {
                    xtype: 'actioncolumn',
                    flex: 0.5,
                    items: [{
                        icon: this.initialConfig.baseAppUrl + 'Themes/Default/Images/Dictionary_Action_Remove_16x16.png',
                        tooltip: 'Sell stock',
                        handler: function (grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            me._beginRemove(rec, store);
                        }
                    }]
                }], selModel: {
                selType: 'cellmodel'
            },
            title: 'Your fruits',


            tbar: [
            productSelect,
            {
                xtype: 'button',
                text: 'Add fruit',
                handler: addSelectedFruit
            }],
            plugins: [cellEditing]
            });
         this.on('beforesubmit', function () {
            me.params = {};


            var i = 0;
            store.each(function (x) {
                me.params['createdto.entries[' + i + '].product.id'] = x.get('productId');
                me.params['createdto.entries[' + i + '].amount'] = x.get('amount');
                i++;
            });
        });
         cellEditing.on('edit', function (x, y, z) {
            me.recount(store);
        });


        return grid;
        }

And at the Photo header I need to place a photo, which addreess is represented in dataIndex: 'photo'. Could I make it dynamically? Or before I don't return the grid, I don't have anything in dataIndex: 'photo'?
*I tried render, but nothing was happened.

[vietits]

Try this:

...
},{
    header: 'Photo',
    dataIndex: 'photo',
    renderer: function(value){
        return '<img src="' + value + '" />';
    },
    ...
},{
....

[coshmos]

Nothing happened and Chrome's JS console shows this error:
Uncaught TypeError: Cannot read property 'dom' of undefined

UPDATE: Done, I've got wrong url. Thanks.