Ext.grid.gridPanelのスタイルを設定する

I: Modify the header style
 
1: Modify the style directly
 
     Listening to the 'afterrender' event of the gridpanel
 
listeners : {
         'afterrender' : function(){
               var elments = Ext.select(".x-grid3-header");//.x-grid3-hd   
                elments.each(function(el) {   
                           el.setStyle("background-color", '#CBBC82');// set a different color  
                           el.setStyle("background-image", 'none');
                        }, this) ;       
            }
        }
 
2: Modify the viewConfig template
 
      var viewConfig={ 
          templates:{   
 
            // Introduce your own defined style in the template. The style of the header of the grid using this view is modified.   
              header:new Ext.Template( 
                  ' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', 
                  ' <thehead> <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);

Two: Modify the column style
 
1: Modify the value of the css property of Ext.grid.ColumnModel
 
         {
               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'
 
 
 
          }
 
If you need to modify the style of all rows you can use the columnModel's default property to set the css property value
 
var cm = new Ext.grid.ColumnModel({
         defaults: {
             css : 'height:27px; vertical-align:middle; font-size:12;background-color :#EDEEF0;background- image:none;'
         },
         columns:[]
 
      })
 
This changes the style of the entire grid's columns
 
 
 
2: Changing the color of the columns when loading data
 


First define a style as follows
 
 .x-grid-back-red { 
background: #FF0000; 
} 

Define the columns that change color.
 
 {header:'summary',dataIndex:'zhaoyao',align:'left',width:150,
         renderer : function(v,m){
               m.css='x-grid-back-red'; 
               return v; 
          }
 }

Three: modify the line style
 
1: Specify the background color of a line, the background color of the mouse over line and the background color of the selected line
 
 Use the gridView property to set these styles, first define the style
 
 viewConfig : {
         rowOverCls : 'my-row-over',//the mouse-over row style
         selectedRowClass : "my-row-selected",//the style of the selected row
         getRowClass : function(record,rowIndex,rowParams,store){ //specify the style of the row
           if(rowIndex == 2){
            return "my-row";
           }
          }
        }
 
2: Calling the method to change the color of the row after the data is loaded
 
The first problem to solve is if you determine that the data has been loaded, the easiest way to do this is to add an onload event to the grid's store.
If you want to conditionally change the background color of a row, you also need to iterate through gird's store, and here's a simple way to do that, namely the store's
each method.
 
  grid.getStore().on('load',function(s,records){
          var girdcount=0;
          s.each(function(r){
                  if(r.get('zy')=='Total for this period'){
                         grid.getView().getRow(girdcount).style.backgroundColor='#FFFF00';
                  }else if(r.get('zy')=='current year total'){
                         grid.getView().getRow(girdcount).style.backgroundColor='#FF1493';
                  }else if(r.get('zy')=='opening balance'){
                         grid.getView().getRow(girdcount).style.backgroundColor='#DCDCDC';
                  }
                 girdcount=girdcount+1;
             });
      });
By customizing these styles, you can modify the grid's row height, font background color and other properties.