Question

I am working on an MVC app in Sencha Touch 2 and am having trouble getting a list to display in a nested panel.

The structure of the app has a main view which is a tab panel. One of the items in the tab panel is a defined panel, xtype: 'homepanel'.

An item in this panel is the list xtype: 'newslist' that is linked to the appropriate store and model files.

The list does not display unless I change its parent homepanel to a type, Ext.navigation.View.

What am I missing in the definition of homepanel‘ as a panel that prevents the display of the list?

Ext.define('ACSO.view.Home', {
    extend: 'Ext.Panel', //<--works if Ext.navigation.View
    xtype: 'homepanel',
    requires: [
        'Ext.TitleBar',
        'ACSO.view.NewsList'
    ],

    config: {
        title: 'Home',
        iconCls: 'home',
        cls: 'home',

        scrollable: true,
        styleHtmlContent: true,

        items: [{
            xtype: 'newslist'
        }]
    }
});

Answer 1

Your Panel has no layout.

I suggest you try to add the following in your panel config:

layout:'fit'

Hope this helps