將圖像縮略圖添加到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中的網格行

回答

相關問題