Sencha Touch 2: 'specified Store cannot be found'

nested-lists, sencha-touch-2

Solution

Ok. Turns out I had to declare my store and model in my app.js file. Then refer to my store just by it's name without the rest of the class definition. So, I added the following to my app.js file:

models: ['Exhibit'],
stores: ['Exhibits'],

Then, here's my updated Explore.js view file.

Ext.define('VisitTCMIndy.view.Explore', {
extend: 'Ext.Container',
requires: [
    'Ext.data.TreeStore',
    'Ext.dataview.NestedList',
    'VisitTCMIndy.store.Exhibits',
],
xtype: 'explorecard',
config: {
    iconCls: 'compass1',
    title: 'Explore',
    layout: 'vbox',
    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'Explore'
        },
        {
            xtype: 'nestedlist',
            store: 'Exhibits',
            title: 'Museum Levels',
            displayField: 'title',
            detailCard: {
                html: 'Explore Details'
            },
            listeners: {
                leafitemtap: function(nestedList, list, index, target, record){
                    var detailCard = nestedList.getDetailCard();
                    detailCard.setHtml('<div style="text-align:center;margin:.5em;"><img src="'+record.get('image')+'" alt="'+record.get('title')+'" />'+
                        '<p style="text-align:left;">'+record.get('text')+'</p></div>'
                    );
                }
            },
            flex: 1
        }

    ]
}
});

Also, notice I changed the layout from fit to vbox. I had to do this, and give the list a flex of 1 in order for the list to actually show now that it was loading the data.

Problem

I'm trying to load JSON data into a NestedList. I have the following store file in /app/store/Exhibits.js ``` Ext.define('VisitTCMIndy.store.Exhibits',{ requires: ['VisitTCMIndy.model.Exhibit', 'Ext.data.proxy.JsonP'], extend: 'Ext.data.TreeStore', config: { model: 'VisitTCMIndy.model.Exhibit', proxy: { type: 'jsonp', url: 'http://www.example.com/explore.php', reader: { type: 'json', rootPropery: 'children' } } } }); ``` Then I reference it in the following view in /app/view/Explore.js ``` Ext.define('VisitTCMIndy.view.Explore', { extend: 'Ext.Container', requires: [ 'Ext.data.TreeStore', 'Ext.dataview.NestedList', 'VisitTCMIndy.store.Exhibits', ], xtype: 'explorecard', config: { iconCls: 'compass1', title: 'Explore', layout: 'fit', items: [ { xtype: 'titlebar', docked: 'top', title: 'Explore' }, { xtype: 'nestedlist', fullscreen: true, store: 'VisitTCMIndy.store.Exhibits', detailCard: { html: 'Explore Details' }, listeners: { leafitemtap: function(nestedList, list, index, target, record){ var detailCard = nestedList.getDetailCard(); detailCard.setHtml('Exhibit Title: '+ record.get('title')); } } } ] } }); ``` I get the following warning and an empty list when I go to the page: [WARN][Ext.dataview.NestedList#applyStore] The specified Store cannot be found Fore the life of me, I can't figure out what I'm doing wrong.

Original source