Tab Panel Not switching Panel

Question

I'm having difficulties implementing a Tab Panel with Sencha Architect

here is the code

Ext.define('Prototype.view.App', {
    extend: 'Ext.Container',

    requires: [
        'Prototype.view.FoodPanel'
    ],

    config: {
        items: [
            {
                xtype: 'tabpanel',
                docked: 'bottom',
                    tabBar: {
                    docked: 'bottom',
                    layout: {
                        pack: 'center',
                        type: 'hbox'
                    }
                },
                items: [
                    {
                        xtype: 'container',
                        title: 'Test',
                        iconCls: 'info'
                    },
                    {
                        xtype: 'foodpanel',
                        title: 'Home',
                        iconCls: 'home'
                    }
                ]
            }
        ]
    }
});

For some reason, my FOODPANEL which is a custom view (composition of fields,spacers,button) Doesn't appear at all when I click on the HOME icon. Test is there so i could swap to something blanck.. but both are blanck atm. Why?`

Answer 1

Try giving your container layout:fit. Also remove the docked:bottom config. You seem to be having the same issue mentioned here. Hope this helps.