Ext.Panel items is not rendering properly

Question

I declared a Navigation view:

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

    ]
  }
});

And the home page panel:

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}'
    }
  ],
});

My problem is that the list (homePage Ext.Panel's item) is not rendering, I don't know exactly why. Any thoughts from guru guys? I'm just starting with sencha-touch and Ext.

Answer 1

You have a few problems with your home page panel:

• The 'items' section is outside the 'config'
• The xtype of the list is not set to 'list'

• The panel is missing a layout

  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}'
      }
    ]
  }
  });