Unable to sort data in ExtJS DataGrid when grouped - sorting

Question

I'm using ExtJS 3.3.0 with a datagrid that consumes a JSON data store (Ext.data.GroupingStore).
When I'm not grouping by a column, I can sort just fine, however when grouping by a column, the sort algorithm seems to fall apart.
I have another data grid that does server side sorting (and grouping and paging) and this works just fine. Comparing the the code between the two has left me stumped for the difference that's making one work and the other not work.
Many thanks in advance.
CW.App.FileGrid = {
store : null,
initComponent: function(){
this.store = new Ext.data.GroupingStore({
autoLoad:true,
url:'/sites/files.js',
groupField:'modified',
// Sort by whatever field was just grouped by. This makes the data
// make more sense to the user.
groupOnSort:true,
remoteSort:false,
remoteGroup:false,
sortInfo:{
field:'modified',
direction:'DESC'
},
reader: new Ext.data.JsonReader({
idProperty:'filename',
root:'data',
fields: [
'iconCls',
{
name: 'modified',
type: 'date',
dateFormat:'timestamp'
},
'description', 'folder', 'filename',
'filesize', 'ext', 'dateGroup']
})
});
// this.store.setDefaultSort('modified', 'DESC');
Ext.apply(this, {
store: this.store,
loadMask:true,
columns: [
{
xtype:'actioncolumn',
items:[{
getClass:function(v,meta,rec){
return rec.get('iconCls');
}
}],
width:25
},{
id:'filename',
header: "Filename",
sortable: true,
dataIndex: 'filename'
},{
id:'ibmu',
header: "iBMU",
width:50,
sortable:true,
dataIndex: 'folder'
},{
id:'date',
header: "Date",
width: 65,
sortable: true,
dataIndex: 'modified',
renderer: Ext.util.Format.dateRenderer('Y-m-d h:i'),
groupRenderer:function(v,unused,r,rowIdx,colIdx,ds){
return r.data['dateGroup'];
}
},{
id:'type',
header: "Type",
width: 70,
sortable: true,
dataIndex: 'description'
},{
id:'size',
header: "Size",
width: 50,
sortable: true,
dataIndex: 'filesize',
renderer: Ext.util.Format.fileSize
},{
xtype:'actioncolumn',
items:[{
icon: '/img/fam/drive_disk.png',
tooltip: 'Download file',
handler: function(grid, rowIndex, colIndex){
var rec = store.getAt(rowIndex);
location.href = Ext.urlAppend('/ibmus/download/', Ext.urlEncode({
folder: rec.get('folder'),
filename: rec.get('filename')
}));
}
}]
}
],
autoExpandColumn:'filename',
view: new Ext.grid.GroupingView({
emptyText: 'No files found. Please wait up to 24 hours after activating your account for files to appear.',
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Files" : "File"]})'
}),
frame:false,
width: '100%',
height: 250,
collapsible: false,
animCollapse: false
});
CW.App.AlarmGrid.superclass.initComponent.call(this);
}
};