Extjs grid设置单元格字体颜色，及单元格背景色

上面这种是最简单的，设定固定的某单元格中字体颜色。

[javascript]  view plain copy

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

 

第二种效果设置背景色的单元背是不固定的，需要程序根据数据来判断。且加入mouseover和mouseout事件，背景色会根据鼠在移动到不同行而相应的改变。

 除上面的代码外，还要加入事件处理。

注意：由于加入mouseover和mouseout事件，所以只能是EditorGridPanel，Gridpanel无法响应鼠标事件！

[javascript]  view plain copy

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.   });   

 

[javascript]  view plain copy

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.   });