[OPEN-752] Sencha and Phonegap: Carousel in Panel works on iPad 4.2 but not on 3.2

[Ayame]

When placing my carousel in a panel, the iPad simulator running iOS 3.2 has very peculiar behaviour: it shows a fraction of the panel (without the carousel component) atop the screen, which slides down when double-tapping.
If I run the exact same code on the simulator running 4.2 (or my device, also 4.2) the code works fine.

I have tried various approaches, but I cannot seem to get the carousel component working in a panel on iOS 3.2
Is this a bug or am I missing something?

My code (properly initialised etc.) is as follows:

this.mainContainer = new Ext.Panel({
                fullscreen: true,
                html: 'panel 1',
                layout: 'fit',
                items : [{
                    xtype: 'carousel',
                    items:[{
                                html: '<p>Slide 1</p>',
                                cls: 'card1'
                            },
                            {
                                html: '<p>Slide 2</p>',
                                cls: 'card2'
                            },
                             {
                                html: '<p>Slide 3</p>',
                                cls: 'card3'
                            }]

                }]
            });

I have tried adding this.mainContainer.render(document.body); and this.mainContainer.doLayout(); however it makes no difference.

I am compiling this to an app using phonegap.

Any help would be greatly appreciated