網格中的樣式行

Question

我想創建一個網格，每行都有不同的樣式（字體，顏色，背景顏色等）。樣式是一個字符串數組（每個都有CSS代碼），其長度與網格中的行數相同。 我的問題是，我找不到一個解決方案，將每行的樣式設置爲存儲在我的數組中的樣式。 我創建的網格看起來是這樣的：

newGrid = Ext.create('Ext.ux.Grid', { 
     store: tableStore, 
     columns: gridColumns, 
    }); 

和陣列看起來很像styles[]

任何幫助將不勝感激！

Answer 1

這裏是working fiddle

var myStyles = [ 
     { 
      backgroundColor: 'red' 
     }, 
     { 
      backgroundColor: 'green', 
      fontWeight: 'bold' 
     }, 
     { 
      backgroundColor: 'blue' 
     }, 
     { 
      backgroundColor: 'yellow', 
      fontStyle: 'italic' 
     } 
]; 

myStore.getData().each(function(record){ 
    // You can map grid store records with styles array in any other way, 
    // for example purposes I just use row internalId 
    var recordId = record.internalId - 1; 

    for(var propertyName in myStyles[recordId ]) { 
     myGridView.getRow(record).style[propertyName] = myStyles[recordId][propertyName]; 
    } 
}); 

Ext.view.Table.getRow()返回HTML元素，所以你可以用它操控與JS你想要的任何方式，閱讀HTMLElement.className和HTMLElement.style例如。

此外，藉助更多的附加代碼，您可以根據例如記錄特定屬性值將樣式數組與網格記錄進行映射。