1. 程式人生 > >Ext.grid.GridPanel根據某列改變行的顏色

Ext.grid.GridPanel根據某列改變行的顏色

<style>
.x-grid-record-red table{
   background: #E6D1E3;
}
.x-grid-record-yellow table{
   background: #F3FEC2;
}
.x-grid-record-green table{
   background: #92FCCC;
}
</style>

 var qGridPanel = new Ext.grid.GridPanel({
    // 表格面板標題,預設為粗體,我不喜歡粗體,這裡設定樣式將其格式為正常字型
    title                : '<span class="commoncss">我發起的工作任務</span>',
    height           : 500,
    id                   : 'id_grid_jobTaskinfo',
    autoScroll    : true,
    frame            : true,
    region           : 'center',          
    store             : qGridStore,          
    stripeRows  : true,           
    cm                 : qGridColumns,         
    tbar                : tbar,           
    bbar               : bbar,          
    viewConfig    : {
             getRowClass : function(record,rowIndex,rowParams,store){
                  if(record.data.status == '3' || record.data.status == '7' || record.data.status == '8'){     //正常關閉、責任人原因中止、發起人原因中止 
                           return 'x-grid-record-red';
                  }
                 if(record.data.status == '2' || record.data.status == '5' || record.data.status == '6'){
                           return 'x-grid-record-yellow';
                 }
                 if(record.data.status == '1' || record.data.status == '4'){
                          return 'x-grid-record-green';
                  }
            }
  }
   ,
  loadMask          : {
         msg             : '正在載入表格資料,請稍等...'
  }
  });