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

Posted 2023-02-26

【中文标题】在 ExtJs 中更改网格中行的颜色

【英文标题】：change color of rows in grid in ExtJs

【发布时间】：2012-03-06 10:24:00

【问题描述】：

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

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

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

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

【问题讨论】：

到目前为止您尝试过的代码？

【参考方案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 中定义自定义行样式类。

【参考方案2】：

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

例子

ExtJS 4 - How to add background colors to columns of a grid?