轉自：http://joyliu.org/blog/archives/167

在Extjs4的Grid中改變單元格背景顏色，最近項目中也有用到，所以還是做好實例，還是用之前的例子《Extjs4：給Grid的Header加上提示》,變化的百分比如果是正數用綠色背景色，如果是負數用橙色背景色，先看下效果:

cell改變背景色

　　查詢api,在grid中需要改變列，單元格屬性用的比較多的還是renderer

renderer : Function A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it is rendered. …… Parameters value : Object The data value for the current cell metaData : Object A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style. ……

看能用上的這個參數metaData，這里可以通過tdCls,tdAttr, 和style去修改單元格的樣式和相關的屬性
這里我用tdCls和style
①設置style

{xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { /* if (value > 0) { return '<span style="color:green;">' + value + '%</span>'; } else if (value < 0) { return '<span style="color:red;">' + value + '%</span>'; }*/ if(value>0){ metaData.tdCls="changeplus"; }else{ metaData.tdCls="changediv"; } return value+'%'; }

②如果是用tdCls，
app.css

.x-grid-cell.changeplus { background-color: #42E61A; } .x-grid-cell.changediv { background-color: #F79709; }

CompanyGrid.js

{xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { /* if (value > 0) { return '<span style="color:green;">' + value + '%</span>'; } else if (value < 0) { return '<span style="color:red;">' + value + '%</span>'; }*/ if (value > 0) { metaData.style=' margin: 0px; padding: 0px; color: rgb(102, 102, 0);">; }else{ metaData.style=' margin: 0px; padding: 0px; color: rgb(102, 102, 0);">; } return value+'%'; }, width: 75, dataIndex: 'pctChange', text: '變化百分比' },

兩種方式都可以達到相同的效果，可以通過tdAttr來設置單元格的提示，在grid的列中顯示的內容比較長是可以用到，還是挺使用的。

總結

以上是生活随笔為你收集整理的Extjs4:改变Grid单元格背景色（转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。