列表不显示

Question

我无法在视图中显示列表。看来我正在从我的 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', { 扩展：'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}' } ] } });