一：修改头样式 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( ' {value}
', " " ) } }; 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的行高，字体背景色等属性啦。