Sencha Touch 2 - Мой Ext.List не отображается

Question

Вот мой код приложения:

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;   
    }
});

Просмотр кода «Inside_spotlist»:

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");
    }
});

Код модели «Spot»:

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

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

Инаконец, хранилище Spots:

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'
            }
        ]
    }
});

Загружается нормально (появляются консольные сообщения, сообщений об ошибках или предупреждений нет), но список с моими тестовыми данными не появляется.Если я попытаюсь «захватить» сайт вверх и вниз, появится правая полоса прокрутки в стиле iOS, но в списке нет данных.

В чем проблема с этим кодом?

Answer 1

вы можете попробовать это:

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

вместо этого:

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

дополнительно ....

вы можете попробовать это:

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

вместо этого:

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

Answer 2

Я бы порекомендовал вам соблюдать соглашение, описанное здесь: Загрузка данных в список с помощью магазина sencha touch 2

Хотя комментарии в этом ответе, кажется, указывают на то, что человек, который задал вопрос, делал это по-вашему, я не уверен, как это работает. Попробуйте сделать это так, как описано в ответе, то есть создайте экземпляр магазина, используя Ext.create, а затем используйте Ext.data.StoreManager.lookup, чтобы найти и использовать этот экземпляр там, где он вам нужен. Ваша проблема здесь в том, что у свойства store в вашем списке нет экземпляра вашего магазина.