json - Sencha touch でストアからリストビューにデータをロードできない

Question

私は、リモート サーバーからデータを取得し、それをアプリ内のリストとして表示するアプリを構築しようとしている、煎茶プログラミングの初心者です。JSON ストアからリストビューにデータを読み込もうとしています。私の店舗コードは:

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

autoLoadstoreの構成オプションですが、プロキシに入れました。