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

Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色Extjsgrid设置单元格字体颜色,单元格背景颜色,行背景颜色 一.在ColumnModel中用renderer渲染颜色:1.不定义样式:(1).字体颜色:{ header:"审核状态", dataIndex:"status", width:100, renderer:function(v){ if(v==1){ return"<s…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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>";
		}
	}
}

图解:
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色

(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>";
		}
	}
}

图解:
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
 

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 "等待审核";
		}
	}
}

图解:
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
 

(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文件中引入定义了该样式的样式文件

图解:
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
 

二.使用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中定义的字段
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
2.要记得在GridPanel中加入view属性的定义!
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
图示:
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157774.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号