在 ExtJS 中，如何将自定义 CSS 类添加到数据网格行？

Posted 2023-02-22

【中文标题】在 ExtJS 中，如何将自定义 CSS 类添加到数据网格行？

【英文标题】：In ExtJS, how to add a custom CSS class to data grid rows?

【发布时间】：2011-11-30 01:37:15

【问题描述】：

如何将自定义 CSS 类添加到数据网格中的行 (Ext.grid.Panel)？

我正在使用 ExtJS 4.0。

【问题讨论】：

你也可以看看这个问题：***.com/questions/7471223/…

【参考方案1】：

如果你想在数据加载后改变类，你可以这样做：

myGridPanel.getView().removeRowCls(rowIndex,"old class");
myGridPanel.getView().addRowCls(rowIndex,"new class");

这里，rowIndex 是被选中的行，你可以在一些事件函数中得到它（比如“select”）。通过使用它，您可以在单击后更改行的 CSS。

【参考方案2】：

方法是在网格上定义viewConfig：

Ext.create('Ext.grid.Panel', 
    ...

    viewConfig: 
        getRowClass: function(record, index, rowParams, store) 
            return record.get('someattr') === 'somevalue') ? 'someclass' : '';
        
    ,

    ...
);

【讨论】：

参见文档：docs.sencha.com/extjs/4.2.2/#!/api/…

我想做同样的事情，但喜欢改变下拉菜单。就像我从下拉列表中选择与该条件相对应的东西一样，网格行类会发生变化，并且网格数据应该保持不变。只需根据组合框选择更改行类即可。

【参考方案3】：

用最简单的方法

在您的网格中使用 -

cls: 'myRowClass'

你的 CSS -

.myRowClass .x-grid-cell background:#FF0000 !important;

【讨论】：

这绝对不是被问到的。

【参考方案4】：

在您的initComponent() 或您的Ext.grid.Panel 中使用getRowClass()，如下所示：

    initComponent: function()
        var me = this;
        me.callParent(arguments);
        me.getView().getRowClass = function(record, rowIndex, rowParams, store) 
            if (/* some check here based on the input */) 
                return 'myRowClass';
            
        ;
    

这基本上覆盖了底层Ext.grid.View 的getRowClass() 函数，该函数在渲染时调用以应用任何自定义类。然后您的自定义 css 文件将包含以下内容：

.myRowClass .x-grid-cell background:#FF0000;  

【讨论】：

这当然是推荐的做事方式，并且根据示例允许根据记录的值有条件地应用类，这是 getRowClass 覆盖的常见用途。

另外，我发现在网格的viewConfig 配置中定义getRowClass 很好，无需使用initComponent 的命令式方法:)

这不是推荐的方式，请使用viewConfig，看第一个答案。

【参考方案5】：

你可以这样做：

Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');

当然，您可以将getRow() 调用替换为另一个单元格，或者您可以遍历所有行并适当地添加它。

然后，除了默认 CSS 之外，您还可以通过以下方式设置样式：

.x-grid3-row-selected .myClass 
   background-color: blue !important;

还有一个私有方法GridView，称为addRowClass。您也可以使用它来为您的行添加一个类：

grid.getView().addRowClass(rowId, 'myClass');

// private - use getRowClass to apply custom row classes
addRowClass : function(rowId, cls) 
    var row = this.getRow(rowId);
    if (row) 
        this.fly(row).addClass(cls);
    
,