ExtJS ListView - 为特定行设置背景颜色答案

【问题标题】：ExtJS ListView - Set background color for specific rowExtJS ListView - 为特定行设置背景颜色
【发布时间】：2014-03-21 00:49:26
【问题描述】：

我有一个 ExtJS ListView 如下：

var myList = new Ext.list.ListView({ id:'mylist-view', 商店：我的商店，多选：真， emptyText: '没有要显示的内容', 保留滚动偏移：真，列： [{ 标头：'标头-1'，宽度：0.3，数据索引：“数据-1” },{ 标头：'标头-2'，宽度：0.3，数据索引：'data-2'，对齐：'正确' },{ 标头：'标头 3'，宽度：0.3，数据索引：'data-3'，对齐：'正确' }], });

我想为特定行设置不同的背景颜色。我该怎么做？

我参考了为类似问题提供的一些其他解决方案并尝试了以下方法：

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

但是，这无济于事。

【问题讨论】：

标签： listview extjs

【解决方案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

【讨论】：

【解决方案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

备注： Listview 只是一个Ext.grid.Panel

我在下面添加我的数据存储代码供您参考：

var mystore = new Ext.data.JsonStore({ 字段：['data-1'，{name：'data-2'，类型：'integer'}， {名称：'data-3'，类型：'float'}]，数据：[ {"data-1":"Data-1","data-2":83,"data-3":3.2}, {"data-1":"总计","data-2":73,"data-3":4.0} ] });

【讨论】：

我尝试了上述解决方案，但没有区别。我在我的代码中使用 ListView 但不是 Panel。我知道 Panel 是 ListView 的父类，但这仍然不起作用
你确定吗？它正在工作。尝试重新打开小提琴示例。我用 Listview 改变了网格面板！
您可以尝试使用我粘贴在问题中的代码吗？我尝试了提供的所有解决方案，但它对我不起作用。 var mystore = new Ext.data.JsonStore({ fields: [ 'data-1', {name:'data-2', type: 'integer'}, {name:'data-3', type:'float' } ]，数据：[ {"data-1":"Data-1","data-2":83,"data-3":3.2}, {"data-1":"Total","data- 2":73,"data-3":4.0} ] });
在我看来你的问题与字符串比较有关。尝试将'Total' 更改为"Total"。我用你的数据修改了小提琴。它还在工作！