Sencha list to display store - list

Question

First off: There are a bunch of questions about this exact thing all over the place. I have spent the better part of a day reading through them all and clearly I am still failing to understand this.
I am getting my store data from a httprequest (rather than standard ajax call) and this is working and adding my data to the store. But whatever I try, this data will not populate the list. Currently my code looks like:
Model:
Ext.define('estarCamera.model.Event', {
extend: 'Ext.data.Model',
config: {
fields: [
'Id',
'Title',
'Content',
'Image',
'Location',
'Latitude',
'Longitude',
'Radius',
'Starts',
'Expires',
'Prestart'
]
}
});
Store:
Ext.define('estarCamera.store.Events', {
extend: 'Ext.data.Store',
config: {
model: 'estarCamera.model.Event',
storeId: 'EventStore'
}
});
Data is populating the store:
var jsonResponse = JSON.parse(xhr.responseText);
if(jsonResponse.status == "Success"){
//Success
var eventsJsn = JSON.parse(jsonResponse.message);
$.each(eventsJsn, function(){
$.each(this, function(k,v){
//Events root element
$.each(this, function(k,v){
//Each 'Event' element
var eStore = Ext.getStore('EventStore');
eStore.add({
Id: this.ID,
Title: decodeURIComponent(this.Title),
Content: decodeURIComponent(this.Content),
Image: this.Image,
Location: this.Location,
Latitude: this.Latitude,
Longitude: this.Longitude,
Radius: this.Radius,
Starts: this.Starts,
Expires: this.Expires,
Prestart: this.Prestart
});
eStore.sync();
})
});
});
Ideally this will then populate:
Ext.define('estarCamera.view.Events', {
extend: 'Ext.Panel',
xtype: 'events',
requires: [
'estarCamera.store.Events',
'Ext.form.FieldSet',
'Ext.List'
],
config: {
title:'Events',
iconCls: 'star',
layout: 'vbox',
items:[
{
docked: 'top',
xtype: 'toolbar',
title: 'Active Events'
},
{
xtype: 'container',
layout: 'fit',
flex: 10,
items:[{
xtype:'list',
title: 'Events',
width: '100%',
height: '100%',
store: 'Events',
styleHtmlContent: true,
itemTpl: new Ext.XTemplate(
'<div class="outerEvent">',
'<h1>title{Title}</h1>',
'<p>{Content}</p>',
'</div>'
)
}]
}]
}
});
Does anyone know why this is happening?

Answer 1

OK, feeling a bit fooling now .. eventually (after an embarrassingly long time) found that this was because my list was trying to reference 'Events' which is the name of my store and how I thought it was supposed to work. Changed this to 'EventStore' (the storeid of my store) and it worked perfectly.