Sencha touch 2 列表未显示

我无法在视图中显示列表。似乎我正在从ajax调用中获取数据。 我肯定错过了一些东西。请帮忙。谢谢

详情如下: 数据：

Stations.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', { extend : 'Ext.data.Store', requires: ['MyApp.model.Station'], id: 'stations', xtype: 'stations', config : { model : 'MyApp.model.Station', storeId: 'stationsStore', autoLoad : true, //sorters: 'stop', proxy: { type: 'ajax', url: 'Stations.json' } }); Ext.define（'MyApp.store.Stations'{ 扩展：“Ext.data.Store”， 需要：['MyApp.model.Station']， id:'车站'， xtype:'站'， 配置：{ 模型：“MyApp.model.Station”， storeId:“StationStore”， 自动加载：对， //分拣员：“停止”， 代理：{ 键入：“ajax”， url:'Stations.json' } }); 视图：

Ext.define（'MyApp.view.MyService'{
扩展：“Ext.Panel”，
xtype:'StationFormPage'，
全屏：对，
布局：“vbox”，
要求：[
“MyApp.store.Stations”，
“Ext.form.FieldSet”，
“Ext.field.Password”，
“Ext.SegmentedButton”，
“外部列表”
],
配置：{
iconCls:“设置”，
标题：“我的服务”，
项目：[
{
停靠：“顶部”，
xtype:'工具栏'，
标题：“我的服务”
},
{
xtype:'列表'，
标题:"电台",，
商店：“StationStore”，
styleHtmlContent:对，
itemTpl:“{stop}{id}”
},
]
},
初始化：函数（）{
/*
Ext.Ajax.request({
范围:本,，
url:'StationLocator.json'，
回调：函数（选项、成功、响应）{
var json=Ext.decode（response.responseText）；
警报（response.responseText）；//这是有效的
警报（json[0].stop）；//这有效
}
});
*/
}//初始化
});

我把它放在一个选项卡面板中。这会有帮助吗？它看起来像这样：

以下是我的看法：

Ext.define('MyApp.view.MyService', { extend: 'Ext.tab.Panel', xtype: 'stationsformPage', fullscreen: true, layout: { pack: 'center' }, requires: [ 'MyApp.store.Stations', 'Ext.form.FieldSet', 'Ext.field.Password', 'Ext.SegmentedButton', 'Ext.List' ], config: { tabBarPosition:'bottom', layout: { type: 'card', animation: { duration: 300, easing: 'ease-in-out', type: 'slide', direction: 'left' } }, fullscreen: true, title: 'My Service', items: [ { docked: 'top', xtype: 'toolbar', title: 'My Service' }, { xtype: 'list', title: 'Stations', store: 'stationsStore', // height: 600, // width: 400, // style: 'background-color: #c9c9c9;', styleHtmlContent: true, itemTpl: '{stop} {id}' } ] } }); Ext.define（'MyApp.view.MyService'{ 扩展：“Ext.tab.Panel”， xtype:'StationFormPage'， 全屏：对， 布局：{ 包装：'中心' }, 要求：[ “MyApp.store.Stations”， “Ext.form.FieldSet”， “Ext.field.Password”， “Ext.SegmentedButton”， “外部列表” ], 配置：{ tabbar位置：'bottom'， 布局：{ 键入：“卡”， 动画：{ 持续时间：300， 放松：“放松进入”， 键入：“幻灯片”， 方向：“左” } }, 全屏：对， 标题：“我的服务”， 项目：[ { 停靠：“顶部”， xtype:'工具栏'， 标题：“我的服务” }, { xtype:'列表'， 标题:"电台",， 商店：“StationStore”， //身高：600， //宽度：400， //样式：“背景色：#c9c9c9；”， styleHtmlContent:对， itemTpl:“{stop}{id}” } ] } });


以下是将列表放入常规面板的版本：

Ext.define('MyApp.view.MyService', { extend: 'Ext.Panel', xtype: 'stationsformPage', fullscreen: true, layout: { pack: 'center' }, requires: [ 'MyApp.store.Stations', 'Ext.form.FieldSet', 'Ext.field.Password', 'Ext.SegmentedButton', 'Ext.List' ], config: { fullscreen: true, layout: 'fit', // Specifying fit is important. Won't see list without it title: 'My Service', items: [ { docked: 'top', xtype: 'toolbar', title: 'My Service' }, { xtype: 'list', store: 'stationsStore', styleHtmlContent: true, itemTpl: '{stop} {id}' } ] } });

Ext.define（'MyApp.view.MyService'{ 扩展：“Ext.Panel”， xtype:'StationFormPage'， 全屏：对， 布局：{ 包装：'中心' }, 要求：[ “MyApp.store.Stations”， “Ext.form.FieldSet”， “Ext.field.Password”， “Ext.SegmentedButton”， “外部列表” ], 配置：{ 全屏：对， 布局：'fit'，//指定fit很重要。如果没有它，将看不到列表 标题：“我的服务”， 项目：[ { 停靠：“顶部”， xtype:'工具栏'， 标题：“我的服务” }, { xtype:'列表'， 商店：“StationStore”， styleHtmlContent:对， itemTpl:“{stop}{id}” } ] } });

---

非常感谢它能工作。但是为什么不能在面板或窗体面板中工作呢？我添加了一个面板解决方案。如果你看不到任何东西，有时可以提供一个高度来帮助调试。有时视图会崩溃，而你看不到它们。@user568866非常感谢！我也有同样的问题，而“布局：'fit'”部分就是问题所在！ Ext.define('MyApp.view.MyService', { extend: 'Ext.Panel', xtype: 'stationsformPage', fullscreen: true, layout: { pack: 'center' }, requires: [ 'MyApp.store.Stations', 'Ext.form.FieldSet', 'Ext.field.Password', 'Ext.SegmentedButton', 'Ext.List' ], config: { fullscreen: true, layout: 'fit', // Specifying fit is important. Won't see list without it title: 'My Service', items: [ { docked: 'top', xtype: 'toolbar', title: 'My Service' }, { xtype: 'list', store: 'stationsStore', styleHtmlContent: true, itemTpl: '{stop} {id}' } ] } });