would_like_to_be_anon
would_like_to_be_anon

Reputation: 1727

Multi grouping in extjs 5

One way of doing the multi column grouping is to override the Grouper function to provide the necessary functionality..

Ext.util.Grouper.override({

    getGroupString: function (item) {
        return item.get('account') + ', Currency: ' + item.get('currCd');
    }

});

// Define summary store
Ext.define('xxx.store.Summaries', {
    extend: 'Ext.data.JsonStore',
    alias: 'store.summaries',
    requires: ['xxx.view.summary.SummaryGrouper'],
    model: 'xxx.model.Summary',
    storeId: 'summaryStore',

    grouper: {
        property: 'account'
    },

The other way of doing this grouping is by grouper property in store.

    grouper: {
        property: 'account',
         groupFn: function (item) {
             return item.get('account') + ', Currency: ' + item.get('currCd');
         }
    },

This one works the first time, but, when I refresh, it doesn't take the groupFn that I give it just groups by account. I am guessing this has something to do with the configuration. Could you suggest why?

Another way of doing this is by extending Grouper, but, I think I am doing something wrong. this is not getting called or maybe I am doing something wrong.

// Define summary grouper

Ext.define('Banking.view.summary.SummaryGrouper', {
    extend: 'Ext.util.Grouper',
    alias: 'widget.summaryGrouper',
    isGrouper: true,
    initComponent: function () {
        this.callParent(arguments);
    },
    config: {
        groupFn: function(record) {
             return record.get('account') + ', Currency:' + record.get('currCd');
        },
        sortProperty: 'account'
    },
    constructor:function(cfg){
        this.callParent(arguments);//Calling the parent class constructor
        this.initConfig(cfg);//Initializing the component
    }
});

Could you suggest what am I doing wrong here when I am extending the Grouper class?

Upvotes: 2

Views: 3374

Answers (1)

stoeffel
stoeffel

Reputation: 238

Try to remove the 'property' property from the grouper object.

grouper: {
         groupFn: function (item) {
             return item.get('account') + ', Currency: ' + item.get('currCd');
         }
    }

Upvotes: 3

Related Questions