Sencha Touch - Can't load a local json file - html

Question

I'm trying to use Sencha Touch 2 to load a local json file into a dataview.
When checking with Firebug - the file is being loaded by Sencha, but it is not being shown for some reason.
any ideas why?
Here is my code (the HTML is the basic Sencha html):
Ext.require([
'Ext.Panel',
'Ext.tab.Panel',
'Ext.Ajax'
]);
new Ext.application({
name: 'MyApp',
useLoadMask: true,
launch: function () {
Ext.regModel('City', {
fields: [
{name:'ID', type:'string'},
{name:'Name', type:'string'}
]
});
var CitiesStore = new Ext.create('Ext.data.Store',{
autoLoad: true,
storeId: 'CitiesStore',
model: 'City',
proxy: {
type: 'ajax', // ajax is for same domain, jsonp for cross-domain
url: 'cities.json',
reader: {
type: 'json',
root: 'cities'
}
}
});
Ext.create('Ext.TabPanel',{
fullscreen: true,
tabBarPosition: 'bottom',
scrollable: true,
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Welcome to my app',
style: 'text-align: center;'
},
{
title: 'Search',
iconCls: 'search',
items: [
Ext.create('Ext.DataView', {
store: 'CitiesStore',
itemConfig: {
tpl: '<h2>{Name}</h2>'
}
})
]
},
{
xtype: 'toolbar',
title: 'My App',
dock: 'top'
}
]
}).setActiveItem(1); // this is set for debugging only
}
});
any the json is dead simple
{"cities":[{"ID":1,"Name":"new york"},{"ID":2,"Name":"las vegas"},{"ID":3,"Name":"los angeles"}]}
Many thanks!

Answer 1

I have had issues with lists or dataviews not showing unless the parent container had a width set to a value or a layout set to 'fit'. In case it makes any difference, try:
title: 'Search',
iconCls: 'search',
layout: 'fit',

Answer 2

Having had a very quick glance... Few things - but firstly your reference to the store is incorrect.
In your DataView you should don't need the quotes:
store: CitiesStore,
Also you don't need the new keyword on the store as you're using Ext.Create.
This should get you a bit further at least.

Answer 3

are you using Firefox? Firefox and IE sometimes make problems when viewing
ply use Chrome or Safari.