按关联模型的 ExtJS 6 网格组

Question

上下文

前段时间我用这个answer实现了远程排序过滤。使用 'associatedModel.associatedModelField' 格式，我可以轻松解析服务器端代码中的表达式以查询数据库。

问题

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

这个问题可以重现fiddle。

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

ext-all-debug.js:198133 Uncaught TypeError: Cannot read property 'isModel' of undefined

getMetaGroup            @   ext-all-debug.js:198133
doCollapseExpand        @   ext-all-debug.js:198284
collapse                @   ext-all-debug.js:198207
onGroupClick            @   ext-all-debug.js:198380
fire                    @   ext-all-debug.js:20223
doFireEvent             @   ext-all-debug.js:21130
doFireEvent             @   ext-all-debug.js:64732
prototype.doFireEvent   @   ext-all-debug.js:54757
fireEventArgs           @   ext-all-debug.js:20983
fireEvent               @   ext-all-debug.js:20942
processSpecialEvent     @   ext-all-debug.js:188549
processItemEvent        @   ext-all-debug.js:188499
processUIEvent          @   ext-all-debug.js:168108
handleEvent             @   ext-all-debug.js:168061
fire                    @   ext-all-debug.js:20223
fire                    @   ext-all-debug.js:32463
publish                 @   ext-all-debug.js:32439
doDelegatedEvent        @   ext-all-debug.js:32489
onDelegatedEvent        @   ext-all-debug.js:32476
(anonymous function)    @   ext-all-debug.js:6662

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

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

Answer 1

我偶然找到了问题的答案。在 official docs website 上，这一行告诉您要做什么：

However, if you intend to group by a data field that is a complex data type such as an Object or Array, it is necessary to define one or more Ext.util.Grouper on the feature that it can then use to lookup internal group information when grouping by different fields.

所以你需要在分组功能的'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 进行实际分组。

按关联模型的 ExtJS 6 网格组

ExtJS 6 grid group by associated models

javascript

grid

grouping

extjs

extjs6

上下文

问题