sencha-touch-2 - 列表不显示

Question

我无法在我的视图中显示列表。看来我正在从我的 ajax 调用中取回数据。我肯定在这里遗漏了一些东西。请帮忙。谢谢

以下是详细信息： 数据：

站.json

[
{
    "id": "129",
    "stop": "NY Station",
},
{
    "id": "13",
    "stop": "Newark Station",
}

]

模型：

Ext.define('MyApp.model.Station', {
extend: 'Ext.data.Model',

config: {
    fields: [
         {name: 'id',  type: 'string'},
     {name: 'stop',  type: 'string'}

     ]
}

});

店铺：

       Ext.define('MyApp.store.Stations', {
       扩展：'Ext.data.Store'，
       需要：['MyApp.model.Station']，
    id: '车站',
    xtype: '车站',
    配置：{
        模型：'MyApp.model.Station',
        storeId: 'stationsStore',
        自动加载：真，
        //分拣机：'停止'，
        代理人： {
                类型：'ajax'，
                网址：'Stations.json'

     }
     });

看法：

Ext.define('MyApp.view.MyService', {
extend: 'Ext.Panel',
xtype: 'stationsformPage',
fullscreen: true,
layout: 'vbox',
requires: [
    'MyApp.store.Stations',    
    'Ext.form.FieldSet',
    'Ext.field.Password',
    'Ext.SegmentedButton',
    'Ext.List'
  ],

config: {
    iconCls: 'settings',
    title: 'My Service',
   items: [
        {
            docked: 'top',
            xtype: 'toolbar',
            title: 'My Service'
        },

        {
            xtype: 'list',
            title: 'Stations',
            store: 'stationsStore',
            styleHtmlContent: true,
            itemTpl: '<div><strong>{stop}</strong> {id}</div>'

        },

    ]
   },
   initialize: function() {

        /*
        Ext.Ajax.request({
            scope : this,
            url: 'StationLocator.json',
            callback : function(options, success, response){
                    var json =   Ext.decode(response.responseText);
                    alert(response.responseText); //this works
                    alert(json[0].stop); //this works
            }
        });
        */

  }//initialize

  });

Answer 1

我把它放在一个 TabPanel 中。这会有帮助吗？它看起来像这样：

这是我的看法：

Ext.define('MyApp.view.MyService', {
    扩展：'Ext.tab.Panel'，
    xtype: 'stationsformPage',
    全屏：是的，
    布局： {
        包：'中心'
    },
    要求：[
        'MyApp.store.Stations',
        'Ext.form.FieldSet',
        'Ext.field.Password',
        'Ext.SegmentedButton',
        '分机列表'
    ],
    配置：{
      tabBarPosition:'底部',
        布局： {
            类型：'卡'，
            动画： {
                持续时间：300，
                easing: '缓入出',
                类型：'幻灯片'，
                方向：“左”
            }
        },
        全屏：是的，
        标题：“我的服务”，
        项目： [
            {
                停靠：'顶部'，
                xtype: '工具栏',
                标题：“我的服务”
            },

            {
                xtype：'列表'，
                标题：“站”，
                商店：'stationsStore'，
// 高度：600，
// 宽度：400，
// 样式：'背景颜色：#c9c9c9;',
                styleHtmlContent: true,
                itemTpl: ' {stop} {id}'

            }

        ]
    }

});

这是一个将列表放在常规面板中的版本：

Ext.define('MyApp.view.MyService', {
    扩展：'Ext.Panel'，
    xtype: 'stationsformPage',
    全屏：是的，
    布局： {
        包：'中心'
    },
    要求：[
        'MyApp.store.Stations',
        'Ext.form.FieldSet',
        'Ext.field.Password',
        'Ext.SegmentedButton',
        '分机列表'
    ],
    配置：{

        全屏：是的，
    layout: 'fit', // 指定 fit 很重要。没有它就看不到列表
        标题：“我的服务”，
        项目： [
            {
                停靠：'顶部'，
                xtype: '工具栏',
                标题：“我的服务”
            },

            {
                xtype：'列表'，
                商店：'stationsStore'，

                styleHtmlContent: true,
                itemTpl: ' {stop} {id}'

            }
        ]
    }
});