Sencha Touch Carousel Not Visible

Question

I'm attempting to render a simple carousel in Sencha Touch, however, it's not showing up. The only thing I see are the indicator dots for the items. Inspecting in Chrome shows that the tags are being added, but I can't see them.

Carousel View:

Ext.define('Project.view.ChartCarousel', {
    extend : 'Ext.Carousel',
    xtype : 'chartCarousel',
    config : {
        title : 'Title',
        fullscreen: 'true',
        width: '100',
        height: '100',
        jumpToIndex: 0,
        defaults : {
            padding: '10 10 10 10'
        },
        items : [{
            html:'<div style="text-align:center">test 1</div>'
        }, {
            html:'<div style="text-align:center">test 2</div>'
        }, {
            html:'<div style="text-align:center">test 3</div>'
        }]
    }
});

Containing View:

Ext.define('Project.view.SummaryChart',{
        extend: 'Ext.form.Panel',
    xtype: 'summaryChart',
    requires: [
            'Ext.Toolbar'
    ],
    config: {
        items: [

            {
                xtype: 'chartCarousel'
            }

        ]
    },
    initialize: function() {
        this.callParent(arguments);
    }
});

Answer 1

I found the answer. I needed to add flex: '1' to the carousel's config.