如何在渲染后动态更改 ExtJS GridPanel viewconfig 上的 getRowClass 函数答案

【问题标题】：How to Dynamically Change the getRowClass function on an ExtJS GridPanel viewconfig After Render如何在渲染后动态更改 ExtJS GridPanel viewconfig 上的 getRowClass 函数
【发布时间】：2023-03-10 20:40:02
【问题描述】：

我有一个 Ext.grid.Panel 函数，它返回一个自定义类，该类用于通过覆盖 getRowClass 函数来对网格中的行进行颜色编码。这很好用，但我想让用户选择更改网格着色的标准。在下面的示例中，我通过“严重性”属性着色，但例如，我想将其更改为“状态”。有没有办法可以动态更改getRowClass 函数，或者网格上的整个视图配置，并在网格已经渲染后让网格重新着色？

alarmsGrid = Ext.create('Ext.grid.Panel', {
    title: 'Netcool Alarms',
    id: 'Netcool Alarms',
    columnLines: true,
    store: alarms_store,
    loadMask: true,
    stripeRows: true,
    features: [alarmsGroupingFeature],
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store){
          return record.get('severity').toLowerCase();
        }
    },

【问题讨论】：

注意：通过类似...alarmsGrid.viewConfig.getRowClass = function(record, rowIndex, rowParams, store){ return record.get('status').toLowerCase( ); } 没有效果

标签： extjs extjs4

【解决方案1】：

这仅仅是因为你做错了。几乎所有类型的配置对象仅在类的实例化时才相关，之后不会产生任何影响。所以你需要让视图实例本身直接改变那里的属性（方法）。要从评论中举出你的例子，你需要像这样写

alarmsGrid.getView().getRowClass = function(record, rowIndex, rowParams, store){ 
     return record.get('status').toLowerCase(); 
}

见JSFiddle

【讨论】：

从根本上说是完全合理的，知道前进是一件好事。再次感谢。

【解决方案2】：

根据ExtJs Documentation for Ext.grid.View（我刚刚测试成功！）你可以在初始viewConfig内为getRowClass提供回调函数没问题！

我知道这是一篇较旧的帖子，但您可能需要考虑在上述代码中插入 debugger 语句并逐步执行回调。您可能会发现其他问题，例如您拼错了模型字段名称，或者在调用此属性时该属性具有 null 值。

此外，从您上面的代码看来，您在网格中使用了分组功能，这将改变此功能的 HTML 标记。因此，行类可能位于比您预期的更深的嵌套 <tr> 元素上！您可以通过更改 getRowClass 回调函数来测试这一点，以返回一个易于搜索的唯一类名，如“this-is-a-test”。

然后返回并再次测试，使用调试器语句验证正在调用回调。然后使用您最喜欢的浏览器开发工具，在页面源代码中搜索您独特的测试类，以查看它实际应用于哪个 HTML 元素。

更新：哈，哈输入此内容后，我意识到我完全阅读问题太快了，您确实说“渲染后”。让我恼火的部分是接受的答案说你是“做错了”，这不一定是真的。已接受的答案对于在视图已呈现后更改整个回调函数仍然是正确的。

但是，根据每个不同回调的复杂程度，您可能仍然最好不要更改整个回调，而只更改回调中使用的标准。根据您的应用程序，两种方法都不一定比另一种更好。如果它就像用另一个字段名称切换 'status' 字段一样简单，那么您最好删除硬编码的引用并在视图上使用可以更改的变量，而不是重新声明一堆不同的回调并切换它们进进出出。

【讨论】：