3

我（非常）是 ExtJS 的新手，我正在尝试将图片添加到我的网格的一个字段中。我已经在谷歌上寻找一些结果或提示，我发现了“渲染功能”但它不起作用（我的意思是，也许我只是用错了）

这是我的代码：

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 文件填充所有这些字段，但“警报”除外。这就是我想添加图片的地方（此字段中没有文字，只有图片）。

在此先感谢，我希望我尽可能清楚！

文森特

4

2 回答 2

1

您可以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; 
}
于 2013-06-11T14:14:38.580 回答
1

将渲染器添加到您的列配置：

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

请参阅文档以查看渲染器获取的参数，以便您可以根据需要根据实际记录自定义图像。

于 2013-06-11T13:21:35.687 回答