List not displaying

Question

I am unable to display list in my view. It seems I am getting data back from my ajax call. I am definitely missing something here. Please help. Thanks

Below are details: data:

Stations.json

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

]

model:

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

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

     ]
}

});

Store:

       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'

     }
     });

View:

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

I put it in a TabPanel. Will this help? It looks like this:

Here's my view:

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}'

            }

        ]
    }

});

Here's a version that puts the list in a regular panel:

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}'

            }
        ]
    }
});