2017-03-07 101 views
1

我一直在尋找從網格中的一行更改我的background-color。到目前爲止,我只有一次改變一種顏色。使用Extjs EXTjs ViewConfig rowclass

這裏是我的ViewConf

viewConfig: { 
     getRowClass: function (record, index) { 
      switch (record.get('status')){ 
       case 'load': return 'blue-row';break; 
       case 'miss': return 'blue-row';break; 
       case 'Active': return 'green-row';break; 
       default: return 'white-row'; break; 
      } 
     } 
    } 
在我的CSS文件

我:

.green-row .x-grid-cell { 
background-color: #43CE45 ; 
}​ 
.white-row .x-grid-cell { 
background-color: #FFFFFF ; 
}​ 
.blue-row .x-grid-cell { 
background: #C4C4C4; 
}​ 

在CSS列表恰在第一次是畫,其他的被忽略。在這種情況下,只有綠色的行被塗成綠色,其他的,雖然他們有班級分配,但他們沒有被繪。如果我改變順序,只是拳頭是在網格中繪製的。

如何爲網格行設置多種顏色?我看到的所有例子都只使用了2種顏色的主要和默認。

在此先感謝!

+0

確定正在應用的類?沒有意義,移動它們會產生變化。而且,這些休息是多餘的。 –

+0

是的,我在瀏覽器控制檯樣式選項卡上檢查它,如果行數據發生更改,它們將被分配並在運行時更改。我還檢查了其他部分的覆蓋規則,但沒有。 –

+0

我建議你發佈一個測試用例,因爲顏色獲得與類相匹配的應用,請參閱:https://fiddle.sencha.com/#view/editor&fiddle/1rl5 –

回答

0

也許,record.get('status')的驗證不在案件missActive
嘗試調試程序,並通過執行此檢查狀態:

viewConfig: { 
     getRowClass: function (record, index) { 

      console.log('status => ' + record.get('status')); 

      switch (record.get('status')){ 
       case 'load': return 'blue-row';break; 
       case 'miss': return 'blue-row';break; 
       case 'Active': return 'green-row';break; 
       default: return 'white-row'; break; 
      } 
     } 
    } 

See that fiddle case is working

+1

OP在評論中表示正在正確應用類。 –

+0

是的,你是對的。我相信這裏的問題是狀態驗證!也許他永遠不會'錯過'或'活躍' –

+0

我已經使用了'console.log'並檢查了在第一次加載中分配的類,並在修改狀態列時在運行時更改了該類。總是將類更改爲正確的類,但仍然繪製css中的第一個 –