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

和你的css课程：

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

将图片添加到网格中 - ExtJS

2 个答案: