如何在渲染后动态更改 ExtJS GridPanel 视图配置上的 getRowClass 函数



我有一个带有函数的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.getView().getRowClass = function(record, rowIndex, rowParams, store){ 
return record.get('status').toLowerCase(); 
}

请参阅JSFiddle

根据 Ext.grid.View 的 ExtJs 文档(我刚才测试成功了!),您可以在初始viewConfig内为getRowClass提供一个回调函数,没问题!

我意识到这是一个较旧的帖子,但您可能需要考虑在上面的代码中插入一个debugger语句并逐步完成回调。您可能会发现其他问题,例如您可能拼错了模型字段名称,或者在调用此属性时具有null值。

同样从上面的代码来看,您似乎正在将分组功能与网格一起使用,这将更改此功能的 HTML 标记。因此,行类可能位于比您预期的更深的巢穴<tr>元素上!您可以通过更改getRowClass回调函数来返回易于搜索的唯一类名(如"this-is-a-test")来测试这一点。

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

更新:哈,哈,打完这个后,我意识到我完全读了这个问题太快了,你确实说"渲染后"。让我恼火的部分是,公认的答案说你"做错了">,这不一定是真的。对于在视图呈现后更改整个回调函数,接受的答案仍然是正确的。

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

最新更新