Dynamically add and remove store grouper

Question

I am using store to show some data in a list.The store has a grouper in one screen and no grouper in another screen.Can I dynamically add and remove a grouper in strore. Thanks for all kinds of support.

This is the code:

Ext.define('MyApp.store.mystore', {

extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.LocalStorage'],
config: {
    identifier: {
        type: 'uuid',
    },
    fields: [
        {name: 'Fname', type: 'string'},
        {name: 'Lname', type: 'string'}

    ],
    remoteSort: true,
    /* grouper: {
     groupFn: function(record) {
     if(localStorage.getItem('mainCategory')=='CONSOLIDATE REPORT')
     return record.get('mainCategory');
     else
     return record.get('category_name');
     }
     },*/
    // groupField: ['Fname'],
    proxy: {
        type: 'localstorage',
        id: 'myyystore'
    }
}

});

My list has no grouper property now.

My requirement is to display the list with grouper (Fname) in one screen and without grouper in another screen.

Answer 1

You can have two different Ext.List and control the grouped config.

Or you can just pass it when instantiating:

var list = Ext.create('Myapp.view.MyList');
list.setGrouper(true);

or

myMainNavigation().push({
    xtype: 'my-list',
    grouped: true
});

Hope it helps-

Answer 2

Inside the view where you add the list, which you want to group and
inside the initialize method of the view add:

var store = this.down('.list').getStore();

store.sort({
    groupFn: function(record) {
        var isReport = (localStorage.['mainCategory'] === 'CONSOLIDATE REPORT');

        return record.get(isReport ? 'mainCategory' : 'category_name');
    }
});