Sencha Touch 2 carousel orientation change

Question

I am having issues in a Sencha Touch 2 / Phonegap application managing orientation changes in a carousel that shows a list of ImageViewer items.

When I open up carousel everything is all right. If I change orientation of the device (both in Chrome through Ripple plugin or on an iPhone4S) the layout adapt itself correctly.

Problem arises when after changing orientation I swipe to the next image. That has been preloaded and sits in a container dimensioned for the preceding orientation so the layout is messed up.

Note that if I keep swiping to the next image layout is correct again, since my carousel only preload a single image.

I managed to intercept the changeorientation event on Ext.Viewport to take an action on carousel to fix this behaviour, I tried to trigger the resize event both on the carousel and on the ImageViewer but with no success. I also tried to trigger the changeorientation event on the Ext.Viewport each time the activeItem of carousel changes but that didn't work either. Do you have any ideas of what could be done to workaround this issue?

Answer 1

I solved it by iterating through every item in the carousel and calling the resize() method on the ImageViewer items after the orientationchange is fired on the Viewport. My function looks like this:

handleOrientationChange: function(viewport, orientation, width, height){
    var items = this.getItems();
    for (var i=0;i<items.getCount();i++){
        var obj = items.getAt(i);
        if (obj instanceof Ext.view.ux.ImageViewer){
            console.log("Resize");
            obj.resize();
        }
    }
}

You need to verify that the item is an Imageviewer. The carousel indicator also gets returned in the ItemCollection.

I'm not 100% sure this is the most efficient way, but it does work.