Extjs grid设置单元格字体颜色，单元格背景颜色，行背景颜色
一.在ColumnModel中用renderer渲染颜色：
1.不定义样式：
(1).字体颜色：
{
header:"审核状态",
dataIndex:"status",
width:100,
renderer:function(v){
if(v==1){
return "审核成功";
}
else if(v==0){
return "等待审核";
}
}
}
图解：
(2).背景颜色：
{
header:"审核状态",
dataIndex:"status",
width:100,
renderer:function(v){
if(v==1){
return "审核成功";
}
else if(v==0){
return "等待审核";
}
}
}
图解：
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中定义的字段
2.要记得在GridPanel中加入view属性的定义！
图示：
