css - Ext JS on rowdblclick 更改点击的行背景颜色

Question

你好
我是 Ext JS 的新手，我已经创建了以下字段的网格宽度

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 中生成。
我必须做到这一点，当用户在任何行上双击时，该行的背景颜色变成用户最喜欢的颜色(红色、蓝色、黄色)。
到目前为止我已经做到了

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

...我得到了点击行的索引，但我不知道如何改变它的背景颜色。将不胜感激。

Answer 1

您需要使用 GridView 对象来获取所选行的 DOM。并将带有您喜欢的颜色的 CSS 应用到该行。首先，您需要创建几个 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 列更改 gird 行背景颜色，则需要使用另一种技术。您可以使用 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 值更改该行的背景。