extjs grid 整行变颜色_ExtJS Grid 改变单元格背景颜色的方法-阿里云开发者社区

第一种情况：加载数据时改变列的颜色首先定义一个样式如下(这里以红色背景为例)：.x-grid-back-red {background: #FF0000;}定义改变颜色的列：{header:'摘要',dataIndex:'zhaoyao',align:'left',width:150,renderer : function(v,m){m.css='x-grid-back-red';return v;}}效果图如下：

第二种情况：加载数据完成后改变行的颜色首先要解决的一个问题是如果判断数据已经加载完毕，最简单的方法是给grid的store添加onload事件。如果你想有条件地改变某行的背景颜色，则还需要遍历gird的store，这里有个简单的方法即store的each方法。看下面这个例子：grid.getStore().on('load',function(s,records){var girdcount=0;s.each(function(r){if(r.get('zy')=='本期合计'){grid.getView().getRow(girdcount).style.backgroundColor='#FFFF00';}else if(r.get('zy')=='本年累计'){grid.getView().getRow(girdcount).style.backgroundColor='#FF1493';}else if(r.get('zy')=='期初余额'){grid.getView().getRow(girdcount).style.backgroundColor='#DCDCDC';}girdcount=girdcount+1;});});效果图如下：

第三种情况：使用Ext本身的颜色渲染效果暂时只发现Ext已经设计好的一种效果：单双行背景颜色不同。很简单，在grid中配置stripeRows为true即可！另外，如果想使用自己定义的行的背景颜色，那就去修改ext-all.css吧，提供几个：-----------在ext-all.css修改代码如下---------.x-grid3-row {border-color:#ffaaee;//改变grid边框颜色border-top-color:#fff;}.x-grid3-row-alt{background-color:#ddeeaa;//改变 行的颜色}.x-grid3-row-over {border-color:#ddd;background-color:#ee1166;//鼠标移上去改变行的底色background-image:url(../images/default/grid/row-over.gif);}//修改GRID某一行样式 grid.getView().addRowClass(r,css)

//修改grid某一单元格样式 Ext.get(grid.getView().getCell(r,c)).addClass(css) 或 grid.getView().getRow(r).style.backgroundColor="red"; //css样式为自定义样式

本文转自yunlielai51CTO博客，原文链接：http://blog.51cto.com/4925054/1281107，如需转载请自行联系原作者