自定義設置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的行高，字體背景色等屬性啦。