How to group EXTJS 4.2.1 grid rows by a has many relationship?

Question

I want to know if it is possible to group an extjs grid by a column set in a hasMany element of a store. My example isn't thorough enough to re-create anything, but I'm only looking for a yes, here is an example, or a no. Thanks!

I have an extjs store set up that populates a UI for a library book. There is a hasMany relationship in the bookStore that points to a model representing each time the book was checked out. This hasMany model is bound to a gridpanel in the Book's UI showing a list of checkouts.

I want to group the gridpanel rows by which library member checked out the book (say 3 users checked it out twice each, currently I have 6 rows with memberName and checkoutDate. I want to group those rows by memberName showing three headers each with two rows below them showing checkoutDate).

I can't make it work no matter which configurations I try, even custom groupFields, and different ways of referencing 'child' objects from a store (eg ExtJS 6 grid group by associated models )

This is roughly what the model's look like just to help clarify my explanation. I know this might not be exactly syntactically correct, but I'm just trying to find out if my goal is possible and what approaches I could take.

Ext.define('Book.model.BookModel', {
    extend : 'Ext.data.Model',
    alias  : 'model.BookModel',
    fields : [{
        name: 'Title',
        type: 'String'
    }],
    hasMany:[{
        name: 'checkouts',
        model: 'Book.model.Checkouts'
    }]
});

Ext.define('Book.model.Checkouts', {
    extend : 'Ext.data.Model',
    alias  : 'model.Checkouts',
    fields: [{
        name: 'Name',
        type: 'string'
    },{
        name: 'checkoutDate',
        type: 'date'
    }],
    associations : [{
        model: 'Book.store.BookStore',
        type : 'belongsTo', 
        name: 'bookStore'
    }]
});

Ext.define('Book.store.BookStore', {
extend: 'Ext.data.Store',
model : 'Book.model.BookModel',
groupField: '????',
//etc.
});

Config I've attempted:

--in the store:

groupField: 'Checkouts.Name',

groupField: 'checkouts.Name',

--in the grid config:

groupers: [{ftype:'grouping'}],
groupers:  [{
                      property: 'Checkouts.name',//and with checkouts.name
                      root: 'data',
                      groupFn: function (val) {
                         return val === val ? val : '';
                    }
           }]

Answer 1

So far it seems that doing this with grouping is impossible, but there are several other potential grid solutions/plugins that may work, like one of the types of Summary Grid, or Tree Grid. Another option besides two separate stores might be something like what is in the Data Binding examples.