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} ] 
    });