Sencha Touch 2 - Can't get list to display // or load a store? [UPDATED X2]
- by Jordan
I have been trying to get a list to display for quite a while now. I have tried all sorts of tips from various people without success. Now I am running into a new problem. I have taken the exact code from an example and I can't seem to get it to work either. First of all, here is the code.
Station.js
Ext.define('Syl.model.Station', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'string' },
{ name: 'stop', type: 'string' }
]
}
});
Stations.js
Ext.define('Syl.store.Stations', {
extend : 'Ext.data.Store',
requires: ['Syl.model.Station'],
id: 'stations',
xtype: 'stations',
config : {
model : 'Syl.model.Station',
//storeId: 'stationsStore',
autoLoad : true,
//sorters: 'stop',
/* proxy: {
type: 'ajax',
url: 'stations.json'
}*/
data: [
{ "id": "129", "stop": "NY Station" },
{ "id": "13", "stop": "Newark Station" }
]
}
});
MyService.js
Ext.define('Syl.view.MyService', {
extend: 'Ext.Panel',
xtype: 'stationsformPage',
requires: [
'Syl.store.Stations',
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.SegmentedButton',
'Ext.List'
],
config: {
fullscreen: true,
layout: 'vbox',
//iconCls: 'settings',
//title: 'My Service',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'My Service'
},
{
[OLDER CODE BEGIN]
xtype: 'list',
title: 'Stations',
//store: 'Stations',
store: stationStore, //UPDATED
styleHtmlContent: true,
itemTpl: '<div><strong>{stop}</strong> {id}</div>'
[OLDER CODE END]
[UPDATE X2 CODE BEGIN]
xtype: 'container',
layout: 'fit',
flex: 10,
items: [{
xtype: 'list',
title: 'Stations',
width: '100%',
height: '100%',
store: stationStore,
styleHtmlContent: true,
itemTpl: '<div><strong>{stop}</strong> {id}</div>'
}]
[UPDATE X2 CODE END]
},
]
}
});
app.js (edited down to the basics)
var stationStore; //UPDATED
Ext.application({
name: 'Syl',
views: ['MyService'],
store: ['Stations'],
model: ['Station'],
launch: function() {
stationStore = Ext.create('Syl.store.Stations');//UPDATED
var mainPanel = Ext.Viewport.add(Ext.create('Syl.view.MyService'));
},
});
Okay, now when I run this in the browser, I get this error: "[WARN][Ext.dataview.List#applyStore] The specified Store cannot be found". The app runs but there is no list. I can't understand how this code could work for the people who gave the example and not me. Could it be a difference in the Sencha Touch version? I am using 2.0.1.1.
To add to this, I have been having problems in general with lists not displaying. I had originally tried a stripped down list without even having a store. I tried to just set the data property in the list's config. I didn't get this error, but I also didn't get a list to display. That is why I thought I would try someone else's code. I figured if I could at least get a working list up and running, I could manipulate it into doing what I want.
Any help would be greatly appreciated. Thanks.
[UPDATED]
Okay, so I did some more hunting and someone told me I needed to have an instance of my store to load into the list, not the store definition. So I updated the code as you can see and the error went away. The problem is that I still don't get a list. I have no errors at all, but I can't see a list. Am I not loading the data correctly? Or am I not putting the list in the view correctly?
[UPDATED X2]
Okay, so I learned that the list should be in a container and that I should give it a width and a height. I'm not totally sure on this being correct, but I do now have a list that I can drag up and down. The problem is there is still nothing in it. Anyone have a clue why?
