Why isn't my ajax data being loaded into the panel? - sencha-touch

Question

So I have this handler which puts my 'statistics' card into view and loads the statistics store (I can see in chrome that an ajax request is sent to the server and the statistics are getting sent back in the correct json format - so that isn't the issue)
handler: function(){
myapp.mainPanel.setActiveItem(myapp.cards.statistics, { type: "slide", direction: "left" });
myapp.stores.statistics.load();
}
Here is my statistics card:
myapp.cards.statistics = new Ext.Panel({
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'Statistics',
items: [{
xtype:"button",
text:"Back",
handler:function(){
myapp.mainPanel.setActiveItem(myapp.cards.home, { type: "slide", direction: "right" });
}
}]}],
items: [
],
store: myapp.stores.statistics,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="border-top: 1px solid grey;" >',
'<ul>',
'<tpl if="price">',
'<li>{price}:</li>',
'</tpl>',
'</ul>',
'</div>',
'</tpl>')
});
Here is my model which I define much earlier in the code near the beginning of setup:
Ext.regModel('statistics', {
fields: [
{name: 'price', type: 'string'},
]
});
My aim is for the store to have all the stats loaded into it and the panel to show them all via the populated template. Many thanks.
Edit: the store:
myapp.stores.statistics = new Ext.data.Store({
model: "statistics",
url : "statistics.php",
proxy: {
type: "ajax",
reader: {
type: "json"
}
},
});
Edit2: Here is what happens in my statistics.php file:
<?php
echo '[{"price": "333"}]';
?>