Grid grouping collapse not working after grid reconfigure

/**

* Ext Version tested: Ext JS 4.2.1 Classic

* Browser versions tested against: Chrome 35.0.1916.153, FireFox 30.0

* DOCTYPE tested against: Strict

* Description: The grid grouping expand/collapse works fine when

* store/columns/features are used in initComponent to configure the grid,

* but collapse does not work after calling reconfigure with the same

* store/columns/features.

* Steps to reproduce the problem: Launch the application and

* exercise the grouping expand/collapse in the first column, then press

* the reconfigure button and exercise the collapse again - the collapse

* will not work.

* The result that was expected: The collapse would work after reconfigure.

* The result that occurs instead: The collapse does not work after reconfigure.

*

* Thanks for a correction to my understanding and code,

* or a workaround.

*/

Ext.application({

name: 'Grid1',

autoCreateViewport: false,

launch: function() {

Ext.create('GridTestPanel');

}

});

Ext.define('GridTestPanel', {

extend: 'Ext.panel.Panel',

renderTo: "appContent",

initComponent: function() {

Ext.apply(this, {

items: [{

id: 'theGrid',

xtype: 'thegrid'

}, {

xtype: 'button',

text: 'reconfigure',

handler: function(btn) {

var comps = Ext.ComponentQuery.query('thegrid');

comps[0].doReconfigure();

}

}]

});

this.callParent(arguments);

}

});

Ext.define('TheGrid', {

extend: 'Ext.grid.Panel',

alias: 'widget.thegrid',

uses: ['Ext.data.ArrayStore'],

initComponent: function() {

Ext.apply(this, {

store: this.getTheStore(),

columns: this.getTheColumns(),

features: this.getTheFeatures()

});

this.callParent(arguments);

},

doReconfigure: function() {

var newStore = this.getTheStore();

var newColumns = this.getTheColumns();

this.reconfigure(newStore, newColumns);

this.show();

},

getTheStore: function() {

var store = new Ext.data.ArrayStore({

fields: [{

name: 'company',

type: 'string'

}, {

name: 'price',

type: 'string'

}],

data: this.getTheData()

});

return store;

},

getTheColumns: function() {

var columns = [{

text: 'Company',

dataIndex: 'company'

}, {

text: 'Price',

dataIndex: 'price'

}];

return columns;

},

getTheFeatures: function() {

var features = [{

ftype: 'grouping',

startCollapsed: false

}];

return features;

},

getTheData: function() {

var data = [

['abc1', 'def'],

['abc2', 'def'],

['abc3', 'def'],

['abc4', 'def']

];

return data;

}

});