ExtJS 6网格按关联模型分组

ExtJS 6 grid group by associated models

本文关键字：模型 关联 网格 ExtJS      更新时间：2023-09-26

上下文

不久前，我使用这个答案来实现远程排序和筛选。使用格式"associatedModel.associatedModelField"，我可以很容易地解析服务器端代码中的表达式，以便查询数据库。

问题

在完成这项工作的同时，我遇到了分组的另一个问题，我已将其配置为本地的关联模型。如果对显示关联字段的列进行分组，则无法在没有错误的情况下折叠或展开。对网格的根模型执行同样的操作不会引发任何错误。

这个问题可以在这把小提琴上重现。

控制台日志中的错误跟踪如下：

ext-all-debug.js:19813未捕获类型错误：无法读取未定义的属性"isModel"getMetaGroup@ext all debug.js:198133doCollapseExpand@ext all debug.js:198284collapse@ext-all-debug.js:198207onGroupClick@ext all debug.js:198380fire@ext-all-debug.js:20223doFireEvent@ext all debug.js:2130doFireEvent@ext all debug.js:64732prototype.doFireEvent@ext all debug.js:54757fireEventArgs@ext all debug.js:20983fireEvent@ext all debug.js:20942processSpecialEvent@ext all debug.js:184549processItemEvent@ext all debug.js:188499processUIEvent@ext all debug.js:168108handleEvent@ext all debug.js:1168061fire@ext-all-debug.js:20223fire@ext-all-debug.js:32463publish@ext-all-debug.js:32439doDelegatedEvent@ext all debug.js:32489onDelegatedEvent@ext all debug.js:32476(匿名函数(@ext all debug.js:6662

在代码中，我使用了上面提供的解决方案，还应用了分组功能。它不是完全干净的代码，但只要我尊重修复的限制，它就可以工作。

我应该如何解决这个问题？根据问题的类型，我想这意味着重写整个分组机制，但我不喜欢！

我偶然找到了问题的答案。在官方文档网站上，这行告诉你该怎么做：

但是，如果要按复杂数据的数据字段进行分组类型，如Object或Array，则需要定义一个或多个Ext.util.Grouper关于可以用来查找的功能按不同字段分组时的内部组信息。

因此，您需要在分组功能的"groupers"配置中定义一个数组：

 features: [{
            ftype: 'grouping',
            remoteRoot: 'Summary',
            groupHeaderTpl: '{name}',
            collapsible: true,
            groupers:  [{
                          property: 'Customer.Address',
                          groupFn: function (val) {
                             return val.data.Job ? val.data.Customer.Address: '';
                        }
               }]
            }]

如果在此列上分组，则将使用groupFn进行实际分组。

相关文章：