Добавить изображение в сетку - ExtJS

Question

Я (очень) новичок в ExtJS, и я пытаюсь добавить изображение в одно из полей моей сетки. Я уже искал некоторые результаты или советы по Google, я обнаружил «функцию рендеринга», но это не работает (я имею в виду, может быть, я просто неправильно это использую)

Это мой код:

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

Файл Json заполняет все эти поля, кроме «Alerte». И здесь я хотел бы добавить картинку (без текста в этом поле, только изображение).

Спасибо заранее, я надеюсь, что я был максимально ясен!

Винсент

Answer 1

Добавить renderer в вашей колонке конфигурации:

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

Обратитесь к документации, чтобы увидеть, какие аргументы рендерер получает, так что вы можете настроить изображение в соответствии с фактической записи, если это необходимо.

Answer 2

Вы можете использовать actioncolumn для отображения значков в ячейках в сетке и использовать функцию renderer для размещения значков в ячейках. Хорошее правило использовать классы css в вашем приложении. Вот мой простой пример:

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

и you'r CSS класс:

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