title: How to group EXTJS 4.2.1 grid rows by a has many relationship?
body: <p>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!</p>
  
  <p>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.</p>
  
  <p>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).  </p>
  
  <p>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 
  <a href="https://stackoverflow.com/questions/38914833/extjs-6-grid-group-by-associated-models">ExtJS 6 grid group by associated models</a> )</p>
  
  <p>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.</p>
  
  <pre><code>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.
  });
  </code></pre>
  
  <p>Config I've attempted:</p>
  
  <p>--in the store:</p>
  
  <pre><code>groupField: 'Checkouts.Name',
  
  groupField: 'checkouts.Name',
  </code></pre>
  
  <p>--in the grid config:</p>
  
  <pre><code>groupers: [{ftype:'grouping'}],
  groupers:  [{
                        property: 'Checkouts.name',//and with checkouts.name
                        root: 'data',
                        groupFn: function (val) {
                           return val === val ? val : '';
                      }
             }]
  </code></pre>