Ext.Panel элементы не отображается правильно

Question

я объявил вид навигации:

Ext.define('MyApp.view.Main', { 
extend: 'Ext.navigation.View', 
alias: 'widget.mainNavigationView', 

requires: [ 
    'Ext.TitleBar', 
    'MyApp.view.Home' 
], 
config: { 
    tabBarPosition: 'top', 
    navigationBar: { 
     id: 'mainNavBar', 
     ui: 'dark', 
     items: [{ 
      xtype: 'button', 
      id: 'logoutUser', 
      text: 'Logout', 
      align: 'right', 
      hideAnimation: Ext.os.is.Android ? false : { 
       type: 'fadeOut', 
       duration: 200 
      }, 
      showAnimation: Ext.os.is.Android ? false : { 
       type: 'fadeIn', 
       duration: 200 
      } 
     }] 
    }, 

    items: [ 
     { 
      xtype: 'homePage' 
     }, 

    ] 
    } 
}); 

и панель домашней страницы:

Ext.define('MyApp.view.Home', { 
extend: 'Ext.Panel', 
alias: 'widget.homePage', 

config: { 
    title: 'Menu Principal', 
}, 

items: [ 
    { 
     store: { 
      fields: ['listItem'], 
      data: [ 
       {listItem: 'Item 1'}, 
       {listItem: 'Item 2'}, 
       {listItem: 'Item 3'}, 
       {listItem: 'Item 4'} 
      ] 
     }, 

     itemTpl: '{listItem}' 
    } 
    ], 
}); 

Моя проблема заключается в том, что в списке (на домашней странице Ext.Panel «s пункт) это не рендеринг, я точно не знаю почему. Любые мысли от гуру? Я только начинаю с sencha-touch и Ext.

Answer 1

У вас есть несколько проблем с домашней страницы панели:

• В разделе «пункты» находится за пределами «конфигурации»
• xtype из списка не установлен в «список»

• панель отсутствует макет

  Ext.define('MyApp.view.Home', { 
  extend: 'Ext.Panel', 
  alias: 'widget.homePage', 
  
  config: { 
      title: 'Menu Principal', 
      layout: 'fit', 
      items: [ 
      { 
       xtype: 'list', 
       store: { 
        fields: ['listItem'], 
        data: [ 
         {listItem: 'Item 1'}, 
         {listItem: 'Item 2'}, 
         {listItem: 'Item 3'}, 
         {listItem: 'Item 4'} 
        ] 
       }, 
  
       itemTpl: '{listItem}' 
      } 
      ] 
  } 
  });