无法在Sencha touch中将数据加载到商店的列表视图中

Question

我是sencha编程的初学者，试图构建一个从远程服务器接收数据并在我的应用程序中将其显示为列表的应用程序。我正在尝试将数据从JSON存储加载到listview中。我的商店代码是：

Ext.define('RestaurantGlobal.store.CategoryColumnsStore', {
extend: 'Ext.data.Store',

requires: [
    'RestaurantGlobal.model.CategoryColumns'
],

config: {
    model: 'RestaurantGlobal.model.CategoryColumns',
    storeId: 'CategoryColumnsStore',
    proxy: {
        type: 'ajax',
        url: 'http://eatpunjab.gramapp.in/Data/?Model=Category&All=True',
        reader: {
            type: 'json',
            rootProperty: 'fields'
        },
    autoLoad: true
    }
  }
});

我的型号代码是：

Ext.define('RestaurantGlobal.model.CategoryColumns', {
extend: 'Ext.data.Model',

uses: [
    'RestaurantGlobal.model.BaseModelColumns'
],

config: {
    fields: [
        {
            name: 'Name',
            type: 'string'
        },
        {
            name: 'Image',
            type: 'string'
        }
    ],
  }
}); 

我的观看代码是：

var categorystore = Ext.create("RestaurantGlobal.store.CategoryColumnsStore");
Ext.define('RestaurantGlobal.view.CategoriesPage', {
    extend: 'Ext.Panel',

config: {
    styleHtmlCls: 'maincontainer',
    styleHtmlContent: true,
    layout: {
        type: 'vbox'
    },
    items: [
        {
            xtype: 'titlebar',
            flex: 0.5,
            docked: 'top',
            title: 'Menu'
        },
        {
            xtype: 'list',
            flex: 4,
            cls:'customcontainer',
            margin: '0 10 0 10',
            itemTpl: [
             '<img src="http://eatpunjab.gramapp.in/media/{Image}" width="40" height="40"/><h2>{Name}</h2>'
            ],
            scrollToTopOnRefresh: false,
            store: categorystore
        },
     ]
   }
});

当我在浏览器中打开应用程序时，我得到一个空白列表视图。

我的代码中缺少什么导致数据无法加载到列表视图中？

Answer 1

autoLoad是商店的配置选项，但您已将其放入代理商中。