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

ExtJS ListView - 设置特定行的背景颜色

2 个答案: