搭建直播平臺，Ext Js grid 改變單元格背景顏色的方法

搭建直播平臺，Ext Js grid 改變單元格背景顏色的方法

第一種情況：載入資料時改變列的顏色

首先定義一個樣式如下（這裡以紅色背景為例）：

     .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;  
            }
        }

第二種情況：載入資料完成後改變行的顏色

首先要解決的一個問題是如果判斷資料已經載入完畢，最簡單的方法是給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;
        });
    } );

第三種情況：使用Ext本身的顏色渲染效果

暫時只發現Ext已經設計好的一種效果：單雙行背景顏色不同。

很簡單，在grid中配置stripeRows為true即可！ 

另外，如果想使用自己定義的行的背景顏色，那就去修改ext-all.css吧，提供幾個：

x-grid3-row  {
  border-color:#ffaaee;//改變grid邊框顏色
  border-top-color:#fff;
}
 
.x-grid3-row-alt {
       background-color:#ddeeaa;//改變 行的顏色
}
 
.x-grid3-row-over  {
       border-color:#ddd;
  background-color:#ee1166;//滑鼠移上去改變行的底色
  background-image:url(../images/default/grid/row-over.gif);
}

 以上就是 搭建直播平臺，Ext Js grid 改變單元格背景顏色的方法，更多內容歡迎關注之後的文章