extjs grid 整行变颜色_Extjs grid设置单元格字体颜色，单元格背景颜色，行背景颜色...

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属性的定义！

图示：