Question

Here’s my App code:

Ext.application({
    name: 'ProjectName',
    appFolder: APP_URL + "app",

    // phoneStartupScreen: 'LOGO.png',

    controllers: ['Site_inside'],
    views: ['Inside_spotlist'],
    models: ['Spot'],
    stores: ['Spots'],

    launch: function() {
        //bootstrap
        console.log("inner site bootstrap");

        //var spotlist = Ext.create("ProjectName.view.Inside_spotlist");

        Ext.Viewport.add({
            xclass: 'ProjectName.view.Inside_spotlist'
        });

        return true;   
    }
});

View ‘Inside_spotlist’ code:

Ext.define('ProjectName.view.Inside_spotlist', {
    extend: 'Ext.List',
    alias: 'spotlist',
    xtype: 'spotlist',

    requires: [
        'ProjectName.store.Spots'
    ],

    config: {
        store: 'Spots',
        itemTpl: '{first_name} {last_name}'
    },

    initialize: function() {
        console.log("spolist loaded");
    }
});

The code of ‘Spot’ model:

Ext.define("ProjectName.model.Spot", {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {
                name: 'firstName',
                type: 'string'
            },
            {
                name: 'lastName',
                type:'string'
            }
        ]
    }
});

And finally, the Spots store:

Ext.define("ProjectName.store.Spots", {
    extend: 'Ext.data.Store',

    config: {
        listeners: {
            load: function() {
                console.log("loaded store");
            }
        },

        autoLoad: true,
        autoSync: true,

        model: 'ProjectName.model.Spot',
        data:[
            {
                firstName: 'test',
                lastName:  'test2'
            }
        ]
    }
});

It loads fine (console messages appears, no error or warning messages), but the list with my test data does not appear. If I try to “grab” the site up and down, the right side iOS-style scrollbar shows, but there are no data in the list.

What’s the problem with this code?

Answer 1

you can try this :

Ext.Viewport.add(
    Ext.create('ProjectName.view.Inside_spotlist')
);

instead of this :

Ext.Viewport.add({
    xclass: 'ProjectName.view.Inside_spotlist'
});

additionally….

you can try this :

config: {
    store: 'ProjectName.store.Spots',
    itemTpl: '{first_name} {last_name}'
}

instead of this :

config: {
    store: 'Spots',
    itemTpl: '{first_name} {last_name}'
}