List not displaying - sencha-touch-2

Question

I am unable to display list in my view. It seems I am getting data back from my ajax call.
I am definitely missing something here. Please help. Thanks
Below are details:
data:
Stations.json
[
{
"id": "129",
"stop": "NY Station",
},
{
"id": "13",
"stop": "Newark Station",
}
]
model:
Ext.define('MyApp.model.Station', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'string'},
{name: 'stop', type: 'string'}
]
}
});
Store:
Ext.define('MyApp.store.Stations', {
extend : 'Ext.data.Store',
requires: ['MyApp.model.Station'],
id: 'stations',
xtype: 'stations',
config : {
model : 'MyApp.model.Station',
storeId: 'stationsStore',
autoLoad : true,
//sorters: 'stop',
proxy: {
type: 'ajax',
url: 'Stations.json'
}
});
View:
Ext.define('MyApp.view.MyService', {
extend: 'Ext.Panel',
xtype: 'stationsformPage',
fullscreen: true,
layout: 'vbox',
requires: [
'MyApp.store.Stations',
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.SegmentedButton',
'Ext.List'
],
config: {
iconCls: 'settings',
title: 'My Service',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'My Service'
},
{
xtype: 'list',
title: 'Stations',
store: 'stationsStore',
styleHtmlContent: true,
itemTpl: '<div><strong>{stop}</strong> {id}</div>'
},
]
},
initialize: function() {
/*
Ext.Ajax.request({
scope : this,
url: 'StationLocator.json',
callback : function(options, success, response){
var json = Ext.decode(response.responseText);
alert(response.responseText); //this works
alert(json[0].stop); //this works
}
});
*/
}//initialize
});

Answer 1

I put it in a TabPanel. Will this help? It looks like this:
Here's my view:
Ext.define('MyApp.view.MyService', {
extend: 'Ext.tab.Panel',
xtype: 'stationsformPage',
fullscreen: true,
layout: {
pack: 'center'
},
requires: [
'MyApp.store.Stations',
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.SegmentedButton',
'Ext.List'
],
config: {
tabBarPosition:'bottom',
layout: {
type: 'card',
animation: {
duration: 300,
easing: 'ease-in-out',
type: 'slide',
direction: 'left'
}
},
fullscreen: true,
title: 'My Service',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'My Service'
},
{
xtype: 'list',
title: 'Stations',
store: 'stationsStore',
// height: 600,
// width: 400,
// style: 'background-color: #c9c9c9;',
styleHtmlContent: true,
itemTpl: '{stop} {id}'
}
]
}
});
Here's a version that puts the list in a regular panel:
Ext.define('MyApp.view.MyService', {
extend: 'Ext.Panel',
xtype: 'stationsformPage',
fullscreen: true,
layout: {
pack: 'center'
},
requires: [
'MyApp.store.Stations',
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.SegmentedButton',
'Ext.List'
],
config: {
fullscreen: true,
layout: 'fit', // Specifying fit is important. Won't see list without it
title: 'My Service',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'My Service'
},
{
xtype: 'list',
store: 'stationsStore',
styleHtmlContent: true,
itemTpl: '{stop} {id}'
}
]
}
});