如何在网格中实现替代行颜色

Question

如何在 extjs 5 网格中实现替代行颜色。据我所知，我们必须在 css 中应用 x-grid-row-alt class 来实现这一点。它在 extjs 4 中工作，但在 Extjs 5 中不工作。对此有什么想法吗？

Answer 1

可以使用stripeRows（设置在网格的viewConfig）：

True to stripe the rows.

This causes the CSS class x-grid-row-alt to be added to alternate rows of the grid. A default CSS rule is provided which sets a background color, but you can override this with a rule which either overrides the background-color style using the !important modifier, or which uses a CSS selector of higher specificity.

如果您想自定义它，请尝试使用 x-grid-item-alt（这是 altRowCls 的默认设置）。

您还可以更改 scss 背景颜色变量 $grid-row-cell-alt-background-color。

Answer 2

在网格的 viewConfig 中使用 getRowClass 方法。

viewConfig: {
  getRowClass: function(record, index, rowParams)
  {
     return (index % 2 == 0) ? 'grid-row1' : 'grid-row2';
  }
},

CSS

tr.grid-row1 td{
    background-color: #d6f0f9;
}
tr.grid-row2 td{
    background-color: #F2F2F2;
}

工作JSFiddle

如何在网格中实现替代行颜色

How to achieve alternative row color in grid

javascript

extjs

extjs5