StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSencha Touch 2 - Can't get list to display // or load a store? [UPDATED X2]
text
Body
copied!<p>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.</p> <p>Station.js</p> <pre><code>Ext.define('Syl.model.Station', { extend: 'Ext.data.Model', config: { fields: [ { name: 'id', type: 'string' }, { name: 'stop', type: 'string' } ] } }); </code></pre> <p>Stations.js</p> <pre><code>Ext.define('Syl.store.Stations', { extend : 'Ext.data.Store', requires: ['Syl.model.Station'], id: 'stations', xtype: 'stations', config : { model : 'Syl.model.Station', autoLoad : true, data: [ { "id": "129", "stop": "NY Station" }, { "id": "13", "stop": "Newark Station" } ] } }); </code></pre> <p>MyService.js</p> <pre><code>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', 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] }, ] } }); </code></pre> <p>app.js (edited down to the basics)</p> <pre><code>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')); }, }); </code></pre> <p>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.</p> <p>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.</p> <p>Any help would be greatly appreciated. Thanks.</p> <p>[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? </p> <p>[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? </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload