Extjs 6 Grid Group By Associated Models

Context 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

Solution 1:

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

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.

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) {
                             returnval.data.Job ? val.data.Customer.Address: '';
                        }
               }]
            }]

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