轉(zhuǎn)自：http://joyliu.org/blog/archives/167

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

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. ……

看能用上的這個(gè)參數(shù)metaData，這里可以通過(guò)tdCls,tdAttr, 和style去修改單元格的樣式和相關(guān)的屬性
這里我用tdCls和style
①設(shè)置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: '變化百分比' },

兩種方式都可以達(dá)到相同的效果，可以通過(guò)tdAttr來(lái)設(shè)置單元格的提示，在grid的列中顯示的內(nèi)容比較長(zhǎng)是可以用到，還是挺使用的。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。