Question

I am using Sencha Touch in my iPhone app. When I use up to three cards, my carousel works fine. But as soon as I use four cards, there is a bug:

The first and the fourth card are overlapping* until I slide to the second card. After sliding back to the first card again, the fourth card disappeared.

(overlapping = contents of 1st and 4th card are shown. 4th card is in foreground)

What is going on here? I don’t understand. Has anyone else met this kinda of error? Is it a real bug or a mistake in my codes?

This is my js:

Ext.setup({
    onReady: function() {
        // Create a Carousel of Items
        var carousel = new Ext.Carousel({
            defaults: {
                cls: 'card'
            },
            items: [{
                cls: 'tab1',
                html: 'Tab 1'
            },
            {
                cls: 'tab2',
                html: 'Tab 2'
            },
            {
                cls: 'tab3',
                html: 'Tab 3'
            },
            {
                cls: 'tab4',
                html: 'Tab 4'
            }]
        });


        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: [carousel]
        });
    }
});

EDIT: If you can get a working carousel with 4+ tabs, you would already prove that I have done something wrong.

Answer 1

Couple of possibilities here:

1. The use of vbox could be confusing it (though this is unlikely). Consider switching your panel configuration to just say:

   new Ext.Panel({
       layout: 'fit',
       items: carousel
   });
   

2. This could be related to a similar and slightly obscure issue we’d seen in 1.x. Try this:

   • Open resources/scss/application.scss and move line 23 (@include sencha-carousel;) down 4 lines so that it ends up just after the sencha-layout line
   • run compass compile to recompile your SASS

If it’s the same issue as I saw a while back (no guarantee that it is), this will fix it