Reconfigure GridPanel with grouping on GroupingStore

Question

I have a problem with a GridPanel that uses a GroupingView:

var grid1 = new Ext.grid.GridPanel({
    store: new Ext.data.GroupingStore({
        fields: [ ]
    }),
    cm: new Ext.grid.ColumnModel([  ]),
    selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }),
    view: new Ext.grid.GroupingView({
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "' + BPS.Resource.items + '" : "' + BPS.Resource.item + '"]})'
    })
});

I an event I call reconfigure that sets a new store and columnmodel. The store is a GroupingStore and I set what groupField i want to use:

// define the store
var store1 = new Ext.data.GroupingStore({
    proxy: new Ext.data.HttpProxy({
        url: listConfig.dataURL + '?sort=' + listConfig.defaultSortField + '&dir=' + listConfig.defaultSortDirection,
        method: 'POST'
    }),
    autoLoad: false,
    remoteSort: true,
    remoteGroup: true,
    groupOnSort: false,
    groupField: listConfig.groupingColumn,
    sortInfo: {
        field: listConfig.defaultSortField,
        direction: listConfig.defaultSortDirection
    },
    paramNames: {
        start: 'skip',
        limit: 'take',
        sort: 'sort',
        dir: 'dir'
    },
    reader: new Ext.data.JsonReader()
});

// reconfigure the grid
grid1.reconfigure(store1, new Ext.grid.ColumnModel(listConfig.columnDefinitions));

However, this seem to work the first time it's loaded. It sets grouping on a column, or no grouping at all if I haven't configured it. But after the user turn off grouping in the gridpanel and the same code runs in order to load the configuration it doesn't change it to be grouped.

What can I do to reconfigure the grid to use, or not use, grouping?

Answer 1

I think you attach a listener to the GroupingStore's groupchange event and record the field that was chosen as the grouping field. Then when reconfiguring, you tell the store to group by that field with the groupBy() function or use the ungroup() function to remove the grouping. Then call the grid's view refresh() method.

Note that I haven't tested this so it may be complete rubbish! :-)

Answer 2

I was having issues with a groupingstore. When I modified a field of a record and the grouping was on that column where I modified the field from, the grid did not automatically regroup the records. Also when adding a new row, the grouping was not correct, the record that was added did not get added in the correct group.

I solved this problem by keeping the current groupBy field in a global var and each time on update or afteredit and added events from the grid I unGrouped and then used groupBy() with the var that contains the current column where the store was grouped on.

Using only grid.getView().refresh(); didn't do the trick.

Question of course is, is this user friendly? Because each time that a field from a row is modified and the grouping is set on the column of that field that was modified, the record will get regrouped and the user might have problems finding the row he was modifying.

Better solution: Only unGroup and then use groupBy() with the var that stored the current groupBy column when the focus on the record that is being edited is lost. SO on the blur event.