Sencha Touch: How to display images in Carousel full screen

As requested by one of my readers, today we are going to see how to display images in the carousel full screen on Sencha Touch 2.  Here is the code followed by explanation

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',

    config: {
        height: 'Ext.getBody().getSize().height+\'px\'',
        width: 'Ext.getBody().getSize().width+\'px\'',

        layout: {
            type: 'fit'
        },

        items: [{

            xtype: 'carousel',
            items: [{
                xtype: 'image',
                src: 'resources/post1.png'
            }, {
                xtype: 'image',
                src: 'resources/post.png'
            }]
        }]
    }
});

Explanation:
                           
 First, we are going to create a container class with width and height configuration set to the screen width and height using Ext.getBody().getSize() method. This method will return the object contains width and height property. Then we are adding carousel item as the child to the container with images using Ext.Img Component.

Here is the output, when i run the above code in Google Chrome.

Hope, you enjoyed this Post.