自定义设置 Ext.grid.GridPanel_样式

一：修改头样式

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的行高，字体背景色等属性啦。