Reputation:
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
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
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