ExtJS 6网格组由相关模型 [英] ExtJS 6 grid group by associated models

问题描述

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

A while ago I used this answer to implement remote sorting and filtering. Using the format 'associatedModel.associatedModelField', I could easily resolve the expression in my server side code in order to query the database.

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

While this does the job, I encountered another problem with grouping - which I have configured to be local - the associated models. If I group a column which displays an associated field, I cannot collapse or expand without errors. Doing the same thing for the root model of the grid doesn't throw any errors.

该问题可以在这个小提琴。

控制台日志中的错误跟踪如下所示： / p>

The error trace in the console log goes like this:

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

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

In the code I have used the solution as provided above and I also applied for the the grouping feature. It isn't exactly clean code but it works as long as I respect the limits of the fix.

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

How should I tackle this problem? Based on the type of problem I suppose that means rewriting the whole grouping mechanism but I don't fancy that!

推荐答案

我发现我的问题的答案是偶然的。在官方文档网站上，这行告诉你该做什么：

I found the answer to my question by accident. On the official docs website, this line tells you what to do:

但是，如果您打算按一个复杂数据的数据字段进行分组
类型如对象或数组，有必要在功能上定义一个或多个
Ext.util.Grouper，然后可以使用它在不同字段进行分组时查找
内部组信息。 p>

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'配置中定义一个数组：

So you need to define an array in the 'groupers' config of the grouping feature:

 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将用于进行实际分组。

If you group on on this column, the groupFn will be used to do the actual grouping.

这篇关于ExtJS 6网格组由相关模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！