javascript - 按关联模型的 ExtJS 6 网格组

Question

上下文

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

问题

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

问题可以在这个fiddle中重现.

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

ext-all-debug.js:198133 Uncaught TypeError: Cannot read property 'isModel' of undefinedgetMetaGroup            @   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:21130doFireEvent             @   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:188549processItemEvent        @   ext-all-debug.js:188499processUIEvent          @   ext-all-debug.js:168108handleEvent             @   ext-all-debug.js:168061fire                    @   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(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 进行实际分组。