extjs4 with memoryproxy and pagination - extjs

Question

I have this very basic example where I use a memoryproxy and pagingmemory toolbar to paginate through data (ideally).
This is extjs working with meteor which sends data directly without the need of a res/ajax/jsonp proxy so I must use memory since the data is already in the client long before extjs has even managed to render it's views.
My problem is that I cannot make the pagination to show a real overview of what's in the store. The refresh is not working and the paginate icons are dead since the pagination sees no items in the store after I load them.
I have a working code example up on jsfiddle: http://jsfiddle.net/rXsVG/5/
Full code example:
Ext.onReady(function(){
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});
var store = new Ext.data.Store({
model: 'User',
autoLoad: true,
proxy: {
type: 'pagingmemory',
reader: {
type: 'json'
}
}
});
Ext.create('Ext.grid.Panel', {
height: 500,
width: '100%',
renderTo: 'example-grid',
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1
}],
bbar: {
xtype: 'pagingtoolbar',
pageSize: 10,
store: store,
displayInfo: true
},
listeners: {
afterrender: function(grid, evt) {
console.log('Loading data');
var data = [];
for(var i = 1; i < 20; i++) {
data.push({
id: i,
name: 'Ed Spencer '+i
});
}
// Simulate a really busy server call
setTimeout(function(){
grid.getStore().loadData(data);
}, 500);
}
}
});
});
Also if you hit refresh on the paging toolbar all data will be gone. Any ideas?