如何在sencha touch中显示列表中的数据

Question

我在容器中添加了一个列表，并将其与商店和模型相关联。它获取数据并将其显示在列表中，但是当我在设备上测试它时，没有显示任何内容。

它说商店是空的。我没有得到如何在设备列表中显示数据。

请帮忙

我的商店： -

Ext.define('AmericanBBQ.store.Recipe_Store', {
            extend: 'Ext.data.Store',
            requires: [
                'AmericanBBQ.model.recipe',
                'Ext.data.proxy.Ajax',
                'Ext.data.reader.Json'
            ],

            config: {
                autoLoad: true,
                 autoSync: true,
                model: 'AmericanBBQ.model.recipe',
                storeId: 'Recipe_Store',
                proxy: {
                    type: 'ajax',
                    url: 'FetchRecipes?user_id=1',
                    reader: {
                        type: 'json',
                        rootProperty: 'Recipes'
                    }
                }
            }
        });

我的模特： -

Ext.define('AmericanBBQ.model.recipe', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field'
    ],

    config: {
        fields: [
            {
                name: 'course_name'
            },
            {
                name: 'cuisine_name'
            },
            {
                name: 'recipe_name'
            },
            {
                name: 'recipe_make_time'
            },
            {
                name: 'recipe_servings'
            },
            {
                name: 'recipe_tag_list'
            },
            {
                name: 'recipe_rating'
            },
            {
                name: 'recipe_likes'
            },
            {
                name: 'recipe_views'
            },
            {
                name: 'recipe_modification_date'
            },
            {
                name: 'recipe_id'
            },
            {
                name: 'recipes_img'
            }
        ]
    }
});

我的清单： -

Ext.define('AmericanBBQ.view.recipelst', {
    extend: 'Ext.dataview.List',
    alias: 'widget.mylist3',

    requires: [
        'Ext.XTemplate',
        'Ext.TitleBar',
        'Ext.Button'
    ],

    config: {
        height: 500,
        id: 'recipelst',
        itemId: 'recipelst',
        itemTpl: [
            '<div class="list-item">',
            '    <img class="photo" src="http://demo2.ongraph.com/demo/amrican/images/{recipes_img}" />',
            '    <h1>{recipe_name}</h1>',
            '    <span>Rating: {recipe_rating}</span>',
            '</div>'
        ],
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Recipe',
                items: [
                    {
                        xtype: 'button',
                        align: 'right',
                        id: 'add_recipe',
                        itemId: 'add_recipe',
                        text: 'Add'
                    }
                ]
            }
        ]
    }

});

获取我从商店获取数据如下： -

var Recipe_Store = Ext.data.StoreManager.get("Recipe_Store");
var record = Recipe_Store.getAt(0);
      alert('record'+record.get('recipe_name'));

它在警告中给出错误:(无法调用未定义的get）。

这里我如何显示我的列表： -

Ext.Viewport.setActiveItem(Ext.create('AmericanBBQ.view.MainTabPanel'));