<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/sencha-touch.css"> <script type="text/javascript" src="lib/sencha-touch-all-debug.js"></script> </head> <body> <script type="text/javascript"> Ext.require("Ext.Carousel"); Ext.application({ name:"myApp", launch:function(){ var panel=Ext.create("Ext.Panel",{ defaults:{ ui:"dark", flex:1, xtype:"carousel", defaults:{ xtype:"panel" } }, layout:{ type:"vbox", align:"stretch" }, items:[ { id:"carousel1", direction:"horizontal", items:[ { html:"Left panel", style:"background-color:pink" }, { html:"Middle panel", style:"background-color:red" }, { html:"Right panel", style:"background-color:yellow" } ] }, { id:"carousel2", direction:"vertical", items:[ { html:"Top panel", style:"background-color:pink" }, { html:"Middle panel", style:"background-color:red" }, { html:"Bottom panel", style:"background-color:yellow" } ] } ] }); Ext.Viewport.add(panel); panel.getComponent("carousel1").setActiveItem(1); } }) </script> </body> </html>