Ext JS的上rowdblclick變化單擊行背景顏色

Question

你好
我是新來的Ext JS和我創建網格whidth如下因素領域

columns: [ 
{ 
    header : 'Firs name', 
    width : 200, 
    sortable : true, 
    dataIndex: 'firstName' 
}, 
{ 
    header : 'Last name', 
    width : 200, 
    sortable : true, 
    dataIndex: 'lastName' 
}, 
{ 
    header : 'Favourite color', 
    width : 195, 
    sortable : true, 
    dataIndex: 'favouriteColor' 
} 

], 

值將在PHP中生成。
我必須做到這一點，當用戶doubleCllick任何行，該行的背景顏色變成用戶最喜歡的顏色（紅色，藍色，黃色）。
到目前爲止，我已經做了

grid.on('rowdblclick', function(grid,index,e) { 
    alert(index); 
    }); 

...我得到的點擊行的索引，但我不知道如何改變它的背景色。將感謝任何幫助。

Answer 1

您需要使用GridView對象來獲取所選行的DOM。並將你喜歡的顏色應用到該行。首先，您需要創建幾個CSS類：

.redrow { 
    background-color: red !important; 
} 

類似的藍色和黃色。接下來，您需要獲取行並將CSS類添加到行中。

grid.on('rowdblclick', function(grid,index,e) { 
    var color = grid.getStore().getAt(index).get('favouriteColor'); 

    if(color == 'red') 
     Ext.fly(grid.getView().getRow(index)).addClass('redrow'); 
    else if(color == 'blue') 
     Ext.fly(grid.getView().getRow(index)).addClass('bluerow'); 
    . 
    . 
    . 
}); 

---

如果您嘗試根據該favouriteColor列更改網格行背景顏色，你需要使用另一種技術。您可以使用ViewConfig並落實getRowClass方法如下所示：

viewConfig: { 
    forceFit: true, 
    getRowClass: function(record, index,prarms,store) { 
     var color = record.get('favouriteColor'); 
     if(color == 'red') 
      return 'redrow'; 
     else if(color == 'blue') 
      return 'bluerow'; 
     else if (color == 'yellow') 
      return 'yellowrow'; 
     else 
      return;   
    } 
} 

的ViewConfig與電網聲明一起使用。您不使用getRowClass的返回值。該框架利用了返回值。您只需編寫用於爲該行選擇正確的CSS類的邏輯。如果您需要在呈現網格時顯示背景顏色，則可以使用getRowClass方法。它不能在用戶事件或網格渲染後使用。

就你而言，你不需要這種方法，因爲當用戶雙擊右側行時，你正在改變行的顏色？因此，根據該行的favouriteColor值，您可以在第一部分中找到您更改行背景的答案。