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

我试图将图像添加到我当前的网格中。现在它显示文章的名称和我想要在每个文章名称上添加唯一缩略图。我的代码正在完全替换文章名称并返回一个破碎的图像。将图像缩略图添加到ExtJS中的网格行

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中设置多个属性？我需要公司和图像作为索引。

谢谢。

来源

2014-01-08 DavidMcHale92

您不能使用多个dataIndexes，但您可以轻松地扩展您的renderer()以添加额外的HTML以显示您希望的任何样式和配置的标题和图像。你已经得到传递给渲染器的record，所以干脆抢在记录中的属性，您想要的值：

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

来源

2014-01-08 16:07:00 existdissolve

如果我定义我的数据存储像这样： '[ [”公司'，'id'，'image']， ['company'，'id'，'image']， ['company'，'id'，'image']， ['company'，'id '，'image']， ['company'，'id'，'image']， ['company'，'id'，'image']， ];' With image is a url to the我想加载的图像，我将如何使用我的渲染器返回语句？ – DavidMcHale92

我试过 'return record.get（'company'）+“”;' 但它只返回公司ID。 – DavidMcHale92

您的商店映射是否与返回的数据相匹配？看起来它没有索引或两个。 – existdissolve

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

您的文章名称完全缺失的原因是，正如我上面解释的，dataIndex设置为'图像'。至于破碎的图像，可能你的路径不起作用。你应该确认它是正确的。

来源

2014-01-08 15:59:54 forgivenson

尝试......

{ 
    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比“公司”不同，那么您可以使用以下渲染

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

来源

2014-01-09 09:40:22 scs

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

回答

相关问题