Question

我正在尝试将图像添加到当前网格中。现在它显示文章的名称，我想要的是在每个文章名称上方添加一个唯一的缩略图。我的代码目前正在完全替换文章名称并返回损坏的图像。

var grid = Ext.create('Ext.grid.Panel', {
store: gridStore,
id:'my_grid',
stateful: true,
listeners : {
             'celldblclick' : function(iView, iCellEl, iColIdx, iStore, iRowEl,iRowIdx, iEvent) {
                   var textbody = gridStore.getAt(iRowIdx).data.id;
                   $('#articleBody').html(textbody);
                   $('#header').html('<strong> Uncategorized </strong>')
            }
},
columns: [
    {
        text     : 'Article Name',
        flex     : 1,
        sortable : true,
        dataIndex: 'company',
        dataIndex:'image',
        renderer : function(value, metadata, record, rowIndex,colIndex, store)
        {
            return   "<img src='"+value+"' />";
        }
    }, 
],
height: 500,         
renderTo: 'gridPanel',
viewConfig: {
    stripeRows: true
}
});

此外，是否可以在DataIndex中设置多个属性？我需要公司和图像作为索引。

谢谢。

Answer 1

您不能使用多个dataIndexes，但您可以轻松扩展renderer()以添加额外的HTML，以便以您喜欢的任何样式和配置显示标题和图像。您已经将record传递给渲染器，因此只需从您想要的记录中的属性中获取值：

renderer : function(value, metadata, record, rowIndex,colIndex, store)  {
    return   record.get( 'company' ) + "<img src='"+value+"' />";
}

Answer 2

设置dataIndex两次的代码只会导致dataIndex设置为'image'，因为第二个代码将替换第一个代码。据我所知，没有办法让一列显示多个数据值。您应该将它们放在不同的列中。

您的文章名称完全丢失的原因是，正如我上面所解释的那样，dataIndex设置为'image'。至于破碎的图像，你所拥有的路径可能不起作用。你应该验证它是否正确。

Answer 3

试试这个......

{
    text     : 'Article Name',
    flex     : 1,
    sortable : true,
    dataIndex: 'company',
    renderer: function(value, metadata, record) {
        return Ext.String.format('{0} <img height="20" width="20" src="{1}"></img>', value, record.data.image);
    }
},

如果dataIndex与'company'不同，那么您可以在渲染器

中使用以下内容

return Ext.String.format('{0} <img height="20" width="20" src="{1}"></img>', record.data.company, record.data.image);

将图像缩略图添加到ExtJS中的网格行

3 个答案: