extjs 4 grid 变色

来自：http://www.cnblogs.com/lihuiyy/archive/2012/09/26/2704329.html

 

 

.yellow-row .x-grid-cell{
             background-color:#FFFF00 !important;
         }
         .white-row .x-grid-cell{
             background-color:#FFFFFF !important;
         }
         .blue-row .x-grid-cell{
             background-color:#00AAFF !important;
         }

 

var gridPanel = new Ext.grid.Panel({
         title : '联系人',
         store : Ext.data.StoreManager.lookup('simpsonsStore'),
         viewConfig : {
             getRowClass: function(record, rowIndex, rowParams, store){
                 var cls;
                 switch(rowIndex % 2){
                     case 1:
                         cls = 'white-row';   
                         break;
                     case 0:
                         cls =  'yellow-row';
                         break;
                 }
                 if(record.get('name') == '张毛毛'){
                     cls =  'blue-row';
                 }
                 return cls;
             }
         },
         columns : [{
                     text : '姓名',
                     dataIndex : 'name',
                     sortable : true,  //不可排序
                     hideable: false   //不可隐藏
                     //flex: 1   //尽量拉伸
                 }, {
                     text : '电话',
                     dataIndex : 'phonenumber'
                     //renderer : renderCol
                     //flex : 1
                     //hidden: true
                 },{
                     text: '性别',
                     dataIndex: 'sex',
                     renderer: function(value){
                         if(value == '男'){
                             return "<span style='color:blue;'>男</span><img src='../imgs/man.png' width='15'/>";
                         }else{
                             return "<span style='color:red;'>女</span><img src='../imgs/woman.png' width='15'/>";
                         }
                     }
                 },{
                     text: '出生日期',
                     dataIndex: 'birthday',
                     type: 'date',
                     renderer: Ext.util.Format.dateRenderer('Y年m月d日')
                 }],
         height : 200,
         width : 400,
         renderTo : document.getElementById('grid'),
         listeners: {
             click: {
                 element: 'el', //bind to the underlying el property on the panel
                 fn: function(){
                     var selections = gridPanel.getSelectionModel().getSelection();
                     Ext.MessageBox.alert('aaaa',selections[0].get('name'));
                 }
             }
         }
     });

 

上面对背景颜色的设置只是针对行的设置，下面是对列进行背景渲染的函数

function
 renderCol(value, metaData, record, rowIndex, columnIndex, store, view ){

       metaData.style = "background-color: #F5C0C0";

        return
 value;

     }