Hi
I'm new with sencha and don't know how to solve my problem. I am trying to implement multiple carousels in site and I have to control them with divs. When I put carousel in div it stops working it only works fullscreen. Any help appreciated.
I put current code down.
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel</title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">
<script src="3rd_party/sencha-touch-all-debug.js"></script>
</head>
<body>
<div id="sencha4"></div>
<script type="text/javascript">
Ext.setup({
requires: [
'Ext.carousel.Carousel',
'Ext.Img'
],
onReady: function () {
var carusel = new Ext.Carousel({
title: 'Message Title',
//IN DIV
renderTo: 'sencha4',
width: 150,
height: 100,
//IN FULLSCREEN
//fullscreen: true,
defaults: {
// applied to each contained item
cls: 'card'
},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
},
{
html : 'Item 4',
style: 'background-color: #759E60'
},
{
html : 'Item 5',
style: 'background-color: #5E99CC'
},
{
html : 'Item 6',
style: 'background-color: #759E60'
},
{
html : 'Item 7'
}
]
});
}
});
</script>
</body>
</html>