CODEWITHSUNDEEP
extjsgrouping
Alexander
Alexander

Reputation: 20244

Adding a dynamic grouping to a store

Considering a store with records grouped by a numeric value, with occurrences being like

0: 40 times
1: 20 times
2: 15 times
3: 3 times
4: once
5: once
7: once

I would like to automatically aggregate into the groups

0, 1, 2, >=3

Once the numeric values in the records change, the store should change its grouping to accomodate for the changes, for instance

0: 2 times
1: 3 times
2: 15 times
3 40 times
4: 65 times,
5: 14 times,
6: 6 times,
7: 3 times
9: once
12: once

should automatically aggregate into

>=1, 2, 3, 4, 5, >=6

Does ExtJS store support a dynamic grouping with such groups, and if not, how could I add this feature?

Upvotes: 1

Views: 1655

Answers (1)

Trevor Karjanis
Trevor Karjanis

Reputation: 1724

Ext JS does not support aggregating groups as you describe. However, it is possible to change the groups by reconfiguring the store, so re-organizing the groups based on the initial group sizes is possible. An implementation would need to be provided for determining what the final groups are and which records are in each.

The implementation requires knowing the size of the groups first. If the size of the groups can be provided by server so that the client does not have to group twice (first to determine the sizes and second to determine the aggregated groups) then a grouper can be used to determine the aggregated groups and which records are in each. Provide the group sizes to the grouper.

Ext.define('Fiddle.util.Grouper', {
   extend: 'Ext.util.Grouper',
   config: {
      aggregateGroups: null,
      groupSizes: null
   },
   groupFn: function(record) {
      return this.getAggregateGroups()[record.get('groupId')];
   },

   constructor: function(config) {
      this.initConfig(config);
      this.callParent(arguments);

      var aggregateGroups = {};
      var groupSizes = this.getGroupSize();
      // Given the group sizes, determine what aggregated group each
      // initial group is in.
      ...
      this.setAggregateGroups(aggregateGroups /* e.g. {
            0: 0,
            1: 1,
            2: 2,
            3: 3,
            4: 3,
            5: 3,
            7: 3
         } */);
   }
});

If the server cannot provide the group sizes, then the records must be grouped twice. Initially, the store can be configured with a groupField, and records will be grouped by the value of that field when they are added. Then the group sizes can be determined using Ext.data.Store.getGroups and used by a grouper that is then set on the store.

store.add(records);
var groups = Ext.Array.toValueMap(store.getGroups(), 'name');
// Group sizes are accessible with groups[<name>].children.length. Given
// the group sizes, assign an aggregated group to each initial group, and
// then configure a grouper.
...
store.setConfig({
   groupField: null,
   grouper: {
      groupFn: function(record) {
         return groups[record.get('groupId')].aggregatedGroupId;
      }
   }
});

Upvotes: 2

Related Questions