转自:http://blog.csdn.net/suixufeng/article/details/7480170
上面这种是最简单的,设定固定的某单元格中字体颜色。
- //--------------------------------------------------列头
- var cm = new Ext.grid.ColumnModel([
- sm,
- new Ext.grid.RowNumberer(), //自动添加行号
- // {
- // header: "序号",
- // dataIndex: "id",
- // tooltip: "ID",
- // //列不可操作
- // //menuDisabled:true,
- // //可以进行排序
- // sortable: true
- // } ,
- {
- header: "房间编号",
- tooltip: "房间编号",
- dataIndex: "RoomNumber",
- //可以进行排序
- sortable: true
- }, {
- header: "面积(M²)",
- tooltip: "房间面积",
- dataIndex: "area",
- //可以进行排序
- sortable: true
- }, {
- header: "单价(元/M²)",
- tooltip: "单价",
- dataIndex: "singlePrice",
- //可以进行排序
- sortable: true,
- editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
- allowBlank: false
- }))
- }, {
- header: "总价(元)",
- tooltip: "总价",
- dataIndex: "totalPrice",
- //可以进行排序
- sortable: true
- }, {
- header: "面积(M²)",
- dataIndex: "mianjiCC",
- //可以进行排序
- sortable: true
- }, {
- header: "单价(元/M²)",
- dataIndex: "priceCCS",
- //可以进行排序
- sortable: true,
- editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
- allowBlank: false
- }))
- }, {
- header: "总价(元)",
- dataIndex: "totalPriceCCS",
- //可以进行排序
- sortable: true
- }, {
- header: "",
- tooltip: "销售状态",
- dataIndex: "status",
- //可以进行排序
- sortable: true
- }]);
- //-----------------------------------------------------设置颜色
- cm.setRenderer(7, getColor);
- cm.setRenderer(4, getColor);
- function getColor(val) {
- if (val != "") {
- return '<font color=blue></font><span style="color:red;">' + Ext.util.Format.usMoney(val) + '</span>';
- }
- }
第二种效果设置背景色的单元背是不固定的,需要程序根据数据来判断。且加入mouseover和mouseout事件,背景色会根据鼠在移动到不同行而相应的改变。
除上面的代码外,还要加入事件处理。
注意:由于加入mouseover和mouseout事件,所以只能是EditorGridPanel,Gridpanel无法响应鼠标事件!
- //数据加载,根据条件改变单元格背景色
- grid.getStore().on('load', function (s, records) {
- var girdcount = 0;
- s.each(function (r) {
- if (r.get('status') == '未售') {
- grid.getView().getCell(girdcount, 2).style.backgroundColor = '#CCCCCC'; //填充单元格颜色
- // grid.getView().getCell(girdcount,13).disabled=true;
- } else if (r.get('status') == '已售') {
- grid.getView().getCell(girdcount, 2).style.backgroundColor = '#990033';
- } else if (r.get('status') == '大定') {
- grid.getView().getCell(girdcount, 2).style.backgroundColor = '#FF9900';
- } else if (r.get('status') == '小定') {
- grid.getView().getCell(girdcount, 2).style.backgroundColor = '#009900';
- } else if (r.get('status') == '保留') {
- grid.getView().getCell(girdcount, 2).style.backgroundColor = '#6633FF';
- }
- girdcount = girdcount + 1;
- });
- });
- //添加mouseover事件
- grid.on('mouseover',function(e){
- var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
- if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
- var colour=grid.getView().getCell(index,2).style.backgroundColor;
- grid.getView().getRow(index).style.backgroundColor=colour;
- }
- });
- //添加mouseout事件
- grid.on('mouseout',function(e){
- var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
- if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
- var colour='';
- grid.getView().getRow(index).style.backgroundColor=colour;
- }
- });
补充:
第一种情况:加载数据时改变列的颜色
首先定义一个样式如下(这里以红色背景为例):
.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 '';
};