一：修改头样式
1：直接修改样式
监听gridpanel的'afterrender' 事件
listeners : {
'afterrender' : function(){
var elments = Ext.
select(
".x-grid3-header");
//.x-grid3-hd
elments.each(function(el) {
el.setStyle("background-color",
'#CBBC82');
// 设置不同的颜色
el.setStyle(
"background-image",
'none');
}, this) ;
}
}
2：修改viewConfig的模板
var viewConfig=
{
templates:{
// 在模板中引入自己定义的样式。使用这个view的grid的header的样式就修改了。
header:
new Ext.Template(
' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
' <thead> <tr id="my-grid-head">{mergecells} </tr>' +
' <tr id="x-grid3-hd-row">{cells} </tr> </thead>',
" </table>"
),
mhcell: new Ext.Template(
' <td id="myrow" colspan="{mcols}"> <div align="center"> <b>{value} </b> </div>',
" </td>"
)
}
};
grid.view=
new Ext.grid.GridView(viewConfig);
二：修改列样式
1：修改Ext.grid.ColumnModel的css属性值
{
header : 'Last Updated',
width : 85,
align : 'center',
css:'height:27px; vertical-align:middle; font-size:12;color:red;',
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
如果需要修改所有行的样式可以使用columnModel的default属性设置css属性值
var cm =
new Ext.grid.ColumnModel({
defaults: {
css : 'height:27px; vertical-align:middle; font-size:12;background-color :#EDEEF0;background- image:none;'
},
columns:[]
})
这样就改变整个grid的行列的样式
2：加载数据时改变列的颜色
首先定义一个样式如下
.x-grid-back-
red {
background: #FF0000;
}
定义改变颜色的列：
{header:'摘要',dataIndex:
'zhaoyao',align:
'left',width:
150,
renderer : function(v,m){
m.css=
'x-grid-back-red';
return v;
}
}
三：修改行样式
1：指定某一行的背景色，鼠标移过行的背景色以及选中行的背景色设置
使用gridView属性的设置这些样式，首先定义好样式
viewConfig : {
rowOverCls : 'my-row-over',
//鼠标移过的行样式
selectedRowClass :
"my-row-selected",
//选中行的样式
getRowClass : function(record,rowIndex,rowParams,store){
//指定行的样式
if(rowIndex ==
2){
return "my-row";
}
}
}
2：加载数据完成后调用方法改变行的颜色
首先要解决的一个问题是如果判断数据已经加载完毕，最简单的方法是给grid的store添加onload事件。
如果你想有条件地改变某行的背景颜色，则还需要遍历gird的store，这里有个简单的方法即store的
each方法。
grid.getStore().on('load',function(s,records){
var girdcount=
0;
s.each(function(r){
if(r.
get(
'zy')==
'本期合计'){
grid.getView().getRow(girdcount).style.backgroundColor=
'#FFFF00';
}else if(r.
get(
'zy')==
'本年累计'){
grid.getView().getRow(girdcount).style.backgroundColor=
'#FF1493';
}else if(r.
get(
'zy')==
'期初余额'){
grid.getView().getRow(girdcount).style.backgroundColor=
'#DCDCDC';
}
girdcount=girdcount+
1;
});
});
通过这些样式的自定义可以修改grid的行高，字体背景色等属性啦。
转载于:https://www.cnblogs.com/kunpengit/archive/2012/11/06/2756709.html
相关资源：数据结构—成绩单生成器
