Extjs grid设置单元格字体颜色，及单元格背景色「建议收藏」

1. //————————————————–列头  
2.   var cm = new Ext.grid.ColumnModel([  
3. sm,  
4.          new Ext.grid.RowNumberer(), //自动添加行号  
5.   //         {
     
6.   //            header: “序号”,  
7.   //            dataIndex: “id”,  
8.   //            tooltip: “ID”,  
9.   //            //列不可操作  
10.   //            //menuDisabled:true,  
11.   //            //可以进行排序  
12.   //            sortable: true  
13.   //        } ,   
14.       {  
15.       header: “房间编号”,  
16.       tooltip: “房间编号”,  
17.       dataIndex: “RoomNumber”,  
18.       //可以进行排序  
19.       sortable: true  
20.   }, {  
21.       header: “面积（M²）”,  
22.       tooltip: “房间面积”,  
23.       dataIndex: “area”,  
24.       //可以进行排序  
25.       sortable: true  
26.   }, {  
27.       header: “单价（元/M²）”,  
28.       tooltip: “单价”,  
29.       dataIndex: “singlePrice”,  
30.       //可以进行排序  
31.       sortable: true,  
32.       editor: new Ext.grid.GridEditor(new Ext.form.NumberField({  
33.           allowBlank: false  
34.       }))  
35.   
36.   
37.   }, {  
38.       header: “总价（元）”,  
39.       tooltip: “总价”,  
40.       dataIndex: “totalPrice”,  
41.       //可以进行排序  
42.       sortable: true  
43.   
44.   }, {  
45.       header: “面积(M²)”,  
46.       dataIndex: “mianjiCC”,  
47.       //可以进行排序  
48.       sortable: true  
49.   
50.   }, {  
51.       header: “单价(元/M²)”,  
52.       dataIndex: “priceCCS”,  
53.       //可以进行排序  
54.       sortable: true,  
55.       editor: new Ext.grid.GridEditor(new Ext.form.NumberField({  
56.           allowBlank: false  
57.       }))  
58.   
59.   }, {  
60.       header: “总价(元)”,  
61.       dataIndex: “totalPriceCCS”,  
62.       //可以进行排序  
63.       sortable: true  
64.   
65.   }, {  
66.       header: “”,  
67.       tooltip: “销售状态”,  
68.       dataIndex: “status”,  
69.       //可以进行排序  
70.       sortable: true  
71.   }]);  
72.   //—————————————————–设置颜色  
73.   
74.   cm.setRenderer(7, getColor);  
75.   cm.setRenderer(4, getColor);  
76.   function getColor(val) {  
77.       if (val != “”) {  
78.           return ‘<font color=blue></font><span style=”color:red;”>’ + Ext.util.Format.usMoney(val) + ‘</span>’;  
79.       }  
80.   }  

1. //数据加载，根据条件改变单元格背景色  
2.   grid.getStore().on(‘load’, function (s, records) {  
3.       var girdcount = 0;  
4.       s.each(function (r) {  
5.           if (r.get(‘status’) == ‘未售’) {  
6.               grid.getView().getCell(girdcount, 2).style.backgroundColor = ‘#CCCCCC’; //填充单元格颜色  
7.               // grid.getView().getCell(girdcount,13).disabled=true;   
8.           } else if (r.get(‘status’) == ‘已售’) {  
9.               grid.getView().getCell(girdcount, 2).style.backgroundColor = ‘#990033’;  
10.           } else if (r.get(‘status’) == ‘大定’) {  
11.               grid.getView().getCell(girdcount, 2).style.backgroundColor = ‘#FF9900’;  
12.           } else if (r.get(‘status’) == ‘小定’) {  
13.               grid.getView().getCell(girdcount, 2).style.backgroundColor = ‘#009900’;  
14.           } else if (r.get(‘status’) == ‘保留’) {  
15.               grid.getView().getCell(girdcount, 2).style.backgroundColor = ‘#6633FF’;  
16.           }  
17.           girdcount = girdcount + 1;  
18.       });  
19.   });   

1. //添加mouseover事件  
2. grid.on(‘mouseover’,function(e){  
3.  var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置  
4.  if(index!==false){
   //当取到了正确的列时，（因为如果传入的target列没有取到的时候会返回false）  
5. var colour=grid.getView().getCell(index,2).style.backgroundColor;  
6. grid.getView().getRow(index).style.backgroundColor=colour;      
7.   
8.  }  
9.   });  
10.     
11.   //添加mouseout事件  
12. grid.on(‘mouseout’,function(e){  
13.  var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置  
14.  if(index!==false){
    //当取到了正确的列时，（因为如果传入的target列没有取到的时候会返回false）  
15.   
16. var colour=”;  
17.   
18. grid.getView().getRow(index).style.backgroundColor=colour;      
19.   
20.  }  
21.   });  

补充：

第一种情况：加载数据时改变列的颜色
首先定义一个样式如下（这里以红色背景为例）：

    .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样式为自定义样式

另外：

整行的话
viewConfig: {

    getRowClass: function(record, rowIndex, rowParams, store){

        return record.get(“valid”) ? “row-valid” : “row-error”;
    }
}
根据record等获取数据，然后自己判断
各种情况返回不同的css样式名
然后再css定义这些样式即可

补充：改变单元格背景

    function MonthStatus(val, p, r) {
        if (val>0) {
           p.style='background-color:#42E61A';
           return '';  
        } else {
            return  '' ;
        }
        return '';
    };