<!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>