Question

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',
    autoLoad : true,
    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',
    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?

Answer 1

Okay, I got my list displaying now. I figured the best thing to do was to let anyone else know what I had done wrong, in case they were having the same problem. First, some of the issues I was having you can find in the updates to my question. Second, I finally figured out why my list wasn’t displaying after reading this bug report: http://www.sencha.com/forum/showthread.php?186957-List-%E2%80%9C-WARN-Ext.dataview.List-applyStore-The-specified-Store-cannot-be-found.

There are some key differences to what I was doing and what is described here. The major problem seems to be that I hadn’t registered the store with the StoreManager. It seems that adding an id to the Store accomplished this fact. Actually, that was already done, so I changed the reference in my list to that id instead of to the variable I had an instance of the store in. In doing this, I assume that the list is obtaining the store from the store manager then. Then it magically worked.

Here are the differences in my code from the code in my question:

MyService.js

store: stationStore, [OLD]
store: 'stations',   [NEW]

app.js

stationStore = Ext.create('Syl.store.Stations'); [OLD]
Ext.create('Syl.store.Stations');                [NEW]

It seems that since the storeManager takes care of the store, I don’t need to keep the instance in a variable, which seems better to me than having a global variable.

So the things I have learned about lists (which are a pain) are. They like to be in containers. It seems just having one on a Panel doesn’t seem to work. I have heard they can be added directly to a tab Panel though I haven’t tested that yet. That was probably my first problem, which I then compounded with the store issues. Secondly, lists like to get their stores from the StoreManager. So define your store with an id and create an instance of it. Then have the list reference the store using its id.

I hope this might help other noobs to not waste as many hours as I have to get a list working.