Building a Simple 2 Card Carousel with SenchaTouch 2

It was surprisingly difficult for me to build a very simple Carousel application with SenchaTouch 2.0 so I thought I’d make a short blog post with the example code in the hopes it saves someone else some time. Basically, since this runs from the Sencha CDN, you should be able to paste this code directly into your web site as an html page and it should run directly.

The fact that you have to have an items array inside an items array is a little confusing as well as having to specify the height or nothing comes out. I’m used to using flex: 1 to get the width right, but I had forgotten about height.

Here is what is created and the html and JavaScript code.

and the html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SenchaTouch 2.0 Carousel Example From PeterKellner.net</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/touch/sencha-touch-designer-edition/resources/css/sencha-touch.css" />
    <script type="text/javascript" src="http://extjs.cachefly.net/touch/sencha-touch-designer-edition/sencha-touch-all-debug.js"></script>
    <script type="text/javascript">
    Ext.setup({
        fullscreen: <span class="kwrd">true</span>,
        onReady: <span class="kwrd">function</span> () {
            Ext.create(<span class="str">'Ext.Panel'</span>, {
                fullscreen: <span class="kwrd">true</span>,
                height: 200,
                items: [{
                    xtype: <span class="str">'carousel'</span>,
                    height: 200,
                    items: [
                            {
                                title: <span class="str">'title card 1'</span>,
                                html: <span class="str">'card1'</span>,
                                cls: <span class="str">'card1'</span>
                            },
                            {
                                title: <span class="str">'title card 2'</span>,
                                html: <span class="str">'card2'</span>,
                                cls: <span class="str">'card2'</span>
                            }
                        ]
                }]
            });
        }
    });
<span class="kwrd">&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>
</head>
<body>
</body>
</html>

HTH’s