0

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 : '';
                    }
           }]
Community
  • 1
  • 1
Avery Sturzl
  • 82
  • 1
  • 13
  • Do you possibly have a Fiddle that we could tinker around with... maybe with what you've already tried doing? – incutonez Mar 28 '17 at 17:23
  • I've listed what I've tried below in the question. But even more than a solution I also want to know if this is possible at all? – Avery Sturzl Mar 28 '17 at 18:20
  • Well that's the thing... `checkouts` is technically a store, right? So doing `checkouts.name` doesn't really mean anything... you would have to have a singular `Checkouts` model to get the name property. Basically, what I'm getting at is your grid's store should be `checkouts`, and then your grouper's property should be `name`. – incutonez Mar 28 '17 at 18:25
  • Two stores makes, and I know there are easier ways to get the UI to look how I'm describing, but I was hoping someone could definitively say whether or not grouping as I've described is possible. Also Checkouts is Ext.data.model, I've added the store to my question. I was just trying to get a reference to the field hoping that the same object access method would work for this hasMany model. – Avery Sturzl Mar 28 '17 at 19:40
  • 1
    Then the answer is no, it doesn't work how you're expecting it. Right, I was trying to distinguish between the two with casing, as your lower c appears to be the store instance... just from an architectural standpoint, your models shouldn't be plural, as they're singular units. The stores should be the plural version. At least, that's the practice I follow. – incutonez Mar 28 '17 at 23:16
  • IF you want to put that as an asnwer I'd accept it. The lowercase checkouts is the name of the hasMany relationship in the BookModel. – Avery Sturzl Mar 29 '17 at 05:21
  • 1
    Well, the only reason I asked for an example is because there is a [`RowWidget`](http://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.plugin.RowWidget.html) ([example](http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#row-widget-grid)), which might be what you're looking for... that's a 6.2.x+ feature though. – incutonez Mar 29 '17 at 17:16
  • Huzzah that led to the search I've been trying to make. I'll be investigating some of the things that popped up that are still in 4.2. – Avery Sturzl Mar 29 '17 at 18:25

1 Answers1

0

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.

Avery Sturzl
  • 82
  • 1
  • 13