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

score 1 · Accepted Answer · answered Jun 11 '13 at 13:21

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.

Nail Shakirov · Answer 2 · 2013-06-11T14:57:58.420

You can use actioncolumn for show icons in your cells in grid and use renderer function to put icons into cells. Good rule to use css classes in your application. Here's my simple example:

                   {
                        xtype: 'actioncolumn',
                        width: 70,
                        align: 'center',
                        dataIndex: 'yourDataIndex',
                        menuDisabled: 'true',
                        text: 'sometext',
                        sortable: false,
                        fixed: 'true',
                        renderer: function (value, metadata, record) {
                           metadata.tdCls = 'mycss'
                        }
                    }

and you'r css class:

.mycss {
    background-position:center  !important;
    width: auto !important;
    background-repeat: no-repeat;
    background-image: url("yourIcon.png") !important; 
}

Add a picture into a grid - ExtJS

2 Answers2