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列更改网格行背景颜色，则需要使用其他技术。您可以使用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值更改行的背景。

rowdblclick上的Ext JS更改了单击的行背景颜色

1 个答案: