javascript – 关联模型的ExtJS 6网格组

2023年3月12日 273次阅读

上下文

前段时间我用这个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

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

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

最佳答案 我意外地找到了我的问题的答案.在
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将用于执行实际分组.

点赞