extjs - 在 ExtJs 中更改网格中行的颜色

Question

如何使前五行的背景或文本颜色与接下来的五行不同。例如，前 5 个黄色、5 个橙色、5 个黄色、5 个橙色等等。

我为网格添加了以下侦听器

listeners: {
    viewready: function(g) {
        g.getView().getRow(1).style.color="#f30";
    }
} 

我用它来获取第二行红色的内容。但这对我不起作用。

Answer 1

您可以使用自定义 GridView getRowClass 方法：

var mygrid = new Ext.grid.GridPanel({
   viewConfig: {
      getRowClass: function(record, index, rowParams)
      {
         return (Math.floor(index / 5.0) % 2 == 0) ? 'rowClass1' : 'rowClass2';
      }
   }
})

然后在您的页面或 css 中定义自定义行样式类。

Answer 2

你需要这个http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column-cfg-renderer

例子

ExtJS 4 - 如何为网格的列添加背景颜色？