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

全栈程序员站长

发布于 2022-09-18 14:24:31

3.4K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

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

一.在ColumnModel中用renderer渲染颜色：

1.不定义样式：

(1).字体颜色：

{
	header:"审核状态",
	dataIndex:"status",
	width:100,
	renderer:function(v){
		if(v==1){
			return "<span style='color:green;'>审核成功</span>";
		}
		else if(v==0){
			return "<span style='color:red;'>等待审核</span>";
		}
	}
}

图解：

(2).背景颜色：

{
	header:"审核状态",
	dataIndex:"status",
	width:100,
	renderer:function(v){
		if(v==1){
			return "<span style='background:green;'>审核成功</span>";
		}
		else if(v==0){
			return "<span style='background:red;'>等待审核</span>";
		}
	}
}

图解：

2.定义一个样式：

(1).字体颜色：

//样式
.fontColor{
	color:#FF0000; 
}

//Extjs
{
	header:"审核状态",
	dataIndex:"status",
	width:100,
	renderer:function(v,m){
		if(v==1){
			return "审核成功";
		}
		else if(v==0){
			m.css='fontColor'; 
			return "等待审核";
		}
	}
}

图解：

(2).背景颜色：

//css样式：
.backColor{
	background: #FF0000;  
}
或者
.backColor{
	background-color:#FF0000 !important;
}

//Extjs:
{
	header:"审核状态",
	dataIndex:"status",
	width:100,
	renderer:function(v,m){
		if(v==1){
			return "审核成功";
		}
		else if(v==0){
			m.css='backColor';        
			return "等待审核";
		}
	}
}

注：该方法需要在jsp文件中引入定义了该样式的样式文件

图解：

二.使用GridView改变颜色（需要定义样式）：

1.字体颜色：

注：这种方式设置字体颜色有点问题，还未解决。

2.背景颜色：

//css样式：
.backColor{
	background: #C3FF8F;  
}
或者
.backColor{
	background-color:#C3FF8F !important;
}


//Extjs:
/*-----1.创建数据源-----*/
var epStore = new Ext.data.JsonStore({
	autoLoad: true,
	url:"getEProject.eva?doType=getAuditProject",
	root:"data",
	fields: ["id","xmid","project","company","etype","emode","eagency","status"]
});


/*-----2.创建GridView-----*/
var epView = new Ext.grid.GridView({
	getRowClass : function(record, rowIndex){
		if(record.get('status') == 1){
			return "backColor";
		}
	}
});


/*-----3.创建ColumnModel----*/
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel({
	columns:[
		sm,
		{
			header:"编号",
			dataIndex:"id",
			hidden:true
		},{
			header:"项目名称",
			dataIndex:"project",
			width:150,
			sortable:true
		},
		......
		{
			header:"审核状态",
			dataIndex:"status",
			width:100,
			renderer:function(v){
				if(v==1){
					return "审核成功";
				}
				else if(v==0){
					return "等待审核";
				}
			}
		}
	]
});


/*-----4.创建GridPanel----*/
var grid = new Ext.grid.GridPanel({
	store:epStore,
	cm:cm,
	sm:sm,
	view: epView,
	loadMask:{msg:'正在加载数据，请稍侯……'},  
	height:80,
	tbar:[
		......
	],
	bbar: new Ext.PagingToolbar({
        pageSize: pageSize,
        store: epStore,
        displayInfo: true,
        displayMsg: '当前显示 {0} - {1} ，共{2}条记录',
        emptyMsg: "没有数据",
        items: ['-']
    })
});

注：

1.用GridView中的getRowClass方法来实现颜色的渲染，status是在Store中定义的字段