CODEWITHSUNDEEP
htmlextjsgridimage
user2474622
user2474622

Reputation:

Add a picture into a grid - ExtJS

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

Upvotes: 3

Views: 3100

Answers (2)

Nail Shakirov
Nail Shakirov

Reputation: 654

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; 
}

Upvotes: 1

Greendrake
Greendrake

Reputation: 3734

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.

Upvotes: 1

Related Questions