ExtJS的ListView控件 - 設置背景顏色爲特定行

Question

我有如下一個ExtJS的ListView控件：

 
var myList = new Ext.list.ListView({ 
    id:'mylist-view', 
    store: mystore, 
    multiSelect: true, 
    emptyText: 'No content to display', 
    reserveScrollOffset: true, 
    columns: [{ 
    header: 'Header-1', 
    width: .3, 
    dataIndex: 'data-1' 
    },{ 
    header: 'Header-2', 
    width: .3, 
    dataIndex: 'data-2', 
    align: 'right' 
    },{ 
    header: 'Header-3', 
    width: .3, 
    dataIndex: 'data-3', 
    align: 'right' 
    }], 
    }); 

我要爲特定的行不同的背景顏色。我該怎麼做？

我稱之爲提供了類似的問題，一些其他的解決方案，並嘗試了以下內容：

viewConfig: { 
    getRowClass: function(record, index, rowParams, ds) { 
    return record.get('data-1') == 'Total' ? 'background-color: #EEEEEE' : ''; 
    } 
} 

但是，這並沒有幫助。

Answer 1

getRowClass函數應該返回css類的名稱，而不是css樣式定義。

所以，你應該在你的viewConfig是這樣的：

viewConfig: { 
    getRowClass: function(record, index, rowParams, ds) { 
    return record.get('data-1') == 'Total' ? 'myRowClass' : ''; 
    } 
} 

而在你的CSS文件：

.myRowClass .x-grid-cell { 
    background-color: #EEEEEE 
} 

撥弄例如：https://fiddle.sencha.com/#fiddle/3p8

Answer 2

試試這個..

viewConfig: { 
    getRowClass: function (record) { 
     if (record && record.get('data-1') == 'Total') return 'data-available-row'; 
    } 
} 

CSS

.data-available-row > td { 
    background-color: #f7e5e5 !important; 
} 

這裏是小提琴：

Changing row color based on the row value

備註： 列表視圖只是一個Ext.grid.Panel

我在下面添加我的數據存儲代碼供您參考：

 

    var mystore = new Ext.data.JsonStore({ 
     fields: [ 'data-1', {name:'data-2', type: 'integer'}, 
    {name:'data-3', type:'float'}], 
     data: [ {"data-1":"Data-1","data-2":83,"data-3":3.2}, 
    {"data-1":"Total","data-2":73,"data-3":4.0} ] 
    });