如何將背景顏色（或自定義css類）應用於網格中的列 - ExtJs 4？

它似乎應該是如此簡單，但我根本無法完成這件事（我甚至不需要它動態地完成）。例如，假設我有一個簡單的2柱網的設置，如下所示：如何將背景顏色（或自定義css類）應用於網格中的列 - ExtJs 4？

columns : [  
     {header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'}, 
     {header: 'CATEGORY', dataIndex: 'category', width:100} 
    ]

的cls: 'red'屬性僅影響報頭，而不是實際的列。我曾在其他地方看到，我應該使用自定義渲染器（可能），但如果我嘗試類似：

{header: 'USER', dataIndex: 'firstName', width:70, 
    renderer: function(value) { 
     this.addCls('red'); 
     return value; 
    } 
}

我仍然得到無聊的白色背景。我也看到有人使用renderer函數定義，如下所示：function(value, metadata, record, rowIndex, colIndex, store)，但是當我使用alert()來測試輸入參數時，除value之外，我得到undefined，這使我相信這可能只適用於ExtJs 4之前的版本。

我也嘗試在我的渲染器函數中返回類似'<span class="red">' + value + '</span>'的東西，但這隻突出顯示文本，而不是更改列的整個背景。

我不想重寫默認的Ext css類，因爲我想將背景顏色應用於應用程序中的特定網格，而不是全部。

此外，所討論的網格的所有列可能具有不同的顏色（請注意，在示例中，我僅將該類添加到第一列）。

假設red在我的css文件中定義爲.red {background:#FF0000;}。

來源

2011-07-13 LittleTreeX

將tdCls屬性添加到列標題定義中，並使用您想要使用的CSS類的值。

columns : [ 
    {header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'}, 
    {header: 'CATEGORY', dataIndex: 'category', width:100} 
]

來源

2012-02-29 17:52:13 GreenGiant

這適用於ExtJS 4。 – cjauvin

你最好閱讀：http://www.sencha.com/learn/grid-faq/

節「要修改單元格/行/列」

來源

2011-07-13 11:46:47 atian25

我已經看過了，它看起來好像這個文檔不適用於ExtJs 4.例如，我嘗試利用自動生成的類：x-grid3-td- {columnID}，它沒有工作。（我也嘗試過如下合理的變化：x-grid-td和x-grid4-td）。我會繼續關注併發布我的發現。 – LittleTreeX

雖然通過atian25建議網常見問題並不適用於ExtJS的4，我能用它來引導我走向我的問題的正確答案。

在JavaScript中，一個ID屬性添加到您的列定義：

{header: 'SomeHeader', id: 'myColumn' dataIndex: 'theData'}

，這將產生以下CSS類該列中的所有TD元素：

.x-grid-cell-myColumn

在你的CSS文件（必須在Ext css文件後加載）添加以下定義：

.x-grid-table .x-grid-cell-myColumn {background:#FF0000;}

和賓果，你有一個明亮的紅色背景說專欄。使用這種相同的技術，您可以以任何您想要的方式自定義各列。

注意：不使用.x-grid-table選擇器，「行」類的特異性將勝出。如果您想對自定義列保持懸停效果，則還需要重新定義.x-grid-row-over。

來源

2011-07-14 14:48:48 LittleTreeX

這是一個可重複使用的不好的解決方案，因爲id是唯一的，所以你不能在同一個網格或同一網格中多次使用它。 2個網格在同一頁面中。 @ GreenGiant的'tdCls'答案是更好的解決方案 –

@ jenson-button-event您可能很正確。這是我當時可以提出的最佳解決方案。但是，在我發佈此消息後不久，我停止使用ExtJS，並且未驗證或嘗試其他任何東西。無論如何，我會標記他的答案，因爲它似乎更合適。感謝您指出了這一點。我甚至不確定他的方法當時是否有效或可能。 ExtJS4當時比較新，而且它似乎也有一些奇怪和缺陷（這是我停止使用它的一個重要原因）。 – LittleTreeX

的目標是一個CLS適用於列，我與getRowClass做，然後1-2秒後，將其刪除。 websync每5秒推送一次新數據，所以當這個更改爲單元格出現時，它應該像一個變化的列（單元格）的閃爍，在新數據刷新之前返回到「白色」（默認）？指定用於比較新記錄的值爲0，但實際情況是正在比較的最後一個值！

來源

2012-07-18 06:27:27 livesmart360

如何將背景顏色（或自定義css類）應用於網格中的列 - ExtJs 4？

回答

相關問題