Add a picture into a grid - ExtJS

Question

i'm (very) new to ExtJS, and I'm trying to add a picture into one of the fields of my grid. I've already looking for some results or tips on Google, I found out the "render function" but it doesn't work (I mean, maybe I'm just using it wrong)

Here's my code :

Ext.define('AM.view.user.List' ,{
  extend: 'Ext.grid.Panel',
  alias: 'widget.userlist',
  title: 'Test ',
  store: 'Users',
  initComponent: function() {
    this.columns = [
   {header: 'ID du CPE', dataIndex: 'ID',  flex: 1},
       {header: 'Modèle', dataIndex: 'Modele', flex: 1},
   {header: 'Firmware', dataIndex: 'firmware', flex: 1},
   {header: 'Année MeS', dataIndex: 'annee', flex: 1},
       {header: 'Statut', dataIndex: 'statut', flex: 1},
   {header: 'Alerte', dataIndex: 'alerte', flex: 1}   
    ];
    this.callParent(arguments);
  }
});

A Json File populate all these fields, except 'Alerte'. And this is where I would like to add a picture (no text in this field, only a picture).

Thanks by advance, I hope i've been clearest as possible !

Vincent

Answer 1

Add a renderer to your column config:

{header: 'Alerte', dataIndex: 'alerte', flex: 1, renderer: function() {
return '<img src="blablabla"/>';
}}

Refer to the documentation to see what arguments renderer gets so that you can customize your image according to the actual record if needed.