Список, не отображающий

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', { 
     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.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', { 
    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', { 
    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}' 

      } 
     ] 
    } 
});