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