Ext JS 4: Putting a record into multiple groups

Question

Is it possible to group a single record into multiple groups? Let's say I have the following code:

Ext.onReady(function() {
  var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'profession'],
    groupField: 'profession',
    data: [
      {name: 'jack johnson', profession: 'surfer'},
      {name: 'dan aykroyd', profession: 'ghostbuster'},
      {name: 'dwayne johnson', profession: 'actor'},
      {name: 'chino moreno', profession: 'musician'}
    ]
  });
  var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
      text: 'Name',
      dataIndex: 'name',
      flex: 1
    }, {
      text: 'Profession',
      dataIndex: 'profession',
      flex: 2
    }],
    features: [{ftype: 'grouping'}],
    height: 400,
    width: 400,
    renderTo: Ext.getBody()
  });
});

Don't read too much into the professions because this is a toy example, but let's say I want to group Dan Aykroyd into two groups... "ghostbuster" and "musician." However, I don't see any examples of this online, so I'm wondering if it can be done. It seems like it can be done because I'm under the assumption that a filter is applied to the store, so it should be possible, but I have been known to be wrong.

If anyone has any insight, that'd be awesome! Thanks.

**Cross posted from Sencha forums.

Answer 1

The easiest way is to "fake it" by cloning certain records on load, changing the value of the group property field, and inserting them into the store. So in your example, you'd have two records where name === "Dan Aykroyd" but one would have profession === "ghostbuster" and the other would have profession === "musician". You would need to manually synchronize all changes among duplicated records. Slightly cumbersome, but it would get the job done.

Actually modifying how grid grouping works to support multiple values? That's another story. On the store side, groupers work pretty much like sorters. To change how grouping works, you would have to extend between 2-5 classes. Possible, but probably more effort than it's worth.

You'd need a way to represent multiple values in a record. I'd recommend a delimited string, as using an array would require much more work to implement. Comparisons to a record value would become calls to Ext.Array.contains(record.get(group.property).split(","), group.name) or the like. If you want your grid to be ungroupable as well, you'd probably want a custom renderer on the grid column. If that column is editable, you may need special logic there was well.

Hope that helps you find a solution.