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)


相关推荐

  • [Java web]– spring3(2)「建议收藏」

    [Java web]– spring3(2)「建议收藏」1.复杂对象的创建:不能直接new的对象,需要一个相对复杂的创建过程。  :FactoryBean===============================================================================================2.复杂对象的创建流程:  2.1 定义类:implements FactoryBean&l…

  • 域名和服务器IP地址有什么关系[通俗易懂]

    域名和服务器IP地址有什么关系?很多用户也经常听说或接触域名和服务器IP地址,一般用户访问网站是通过域名或搜索进入,但大多数人不知道的是直接再浏览器里面输入IP地址也可以直接访问网站,下面我们就详细聊聊域名和服务器IP地址之间的关系。域名和服务器IP地址之间的关系?对于很多初入互联网的用户来说,刚开始对于域名和IP地址的概念不清楚,经常会将服务器IP地址当作域名,甚至误以为域名就是服务器IP地址等等很多问题,那么域名和服务器IP地址的定义是怎么样的呢?又有怎样的关联呢?域名:域名是一串用各.

  • CLion 2021.3.x激活码(已测有效)

    CLion 2021.3.x激活码(已测有效),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 阿里云wordpress配置免费ssl证书

    阿里云wordpress配置免费ssl证书本文最后更新于352天前,其中的信息可能已经有所发展或是发生改变。1、登录阿里云,选择产品中的ssl证书如果域名是阿里的他会自动创建dns解析,如果是其他厂商需要按照图片配置,等待几分钟进行验证点击审核,等待签发签发后根据需求下载所需证书我的wordpress是直接买的阿里轻量应用服务器,打开轻量应用服务器的控制台配置域名选择刚申请好的ssl证书在wordpre…

  • 导出的Excel名字乱码_恢复的excel文件乱码

    导出的Excel名字乱码_恢复的excel文件乱码因为经常要用到导出功能,之前因为文件名乱码,所以都用英文或是拼音缩写来代替,今天特意要接觉下这个问题。顺便记录下。望对小白有用。/***导出结算详情列表*@return*/publicvoiddepositLogExport(){Stringtitle=”押金流水报表”;StringexcelName=”押金流水报表.xls”;OutputStreamos=null;t…

  • 50个多线程面试题,你会多少?(一)[通俗易懂]

    50个多线程面试题,你会多少?(一)[通俗易懂]下面是Java线程相关的热门面试题,你可以用它来好好准备面试。什么是线程? 什么是线程安全和线程不安全? 什么是自旋锁? 什么是Java内存模型? 什么是CAS? 什么是乐观锁和悲观锁? 什么是AQS? 什么是原子操作?在JavaConcurrencyAPI中有哪些原子类(atomicclasses)? 什么是Executors框架? 什么是阻塞队列?如何使用阻塞队列来…

发表回复

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

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