View Full Version : Create a carousel inside div

6 Oct 2010, 9:43 AM
Hi, i new with sencha.

Could i create a carousel inside div? Because i have a div called "carrousel" and i need the carrousel inside that div But the div is already created the carousel is cretead after. with a click in a button.

Sorry for my english........

6 Oct 2010, 1:19 PM
Use the renderTo option to specify the element:

new Ext.Carousel({
renderTo: 'myDiv'

15 Dec 2010, 9:44 AM
Please help me evant

where i put this code for put the carousel in my <div class="test"> Here my carousel </div> ?


18 Dec 2011, 1:44 PM
diggin up a bit here..

@pedrolacueva did you finally found (after a year..) or anyone else, a way to attach a carousel to a div?

I've try to apply sizing with a 'renderTo' pointing to a .css div (like evant mentionned) it didn't worked.
I've try to apply sizing with a 'renderTo' with height:300 and width:400 attributes attached to the carousel itself, it didn't worked.

I've dig into sencha forum archives too and found this > " Carousel inside a div (http://www.sencha.com/forum/showthread.php?110535-Carousel-inside-a-div&) " http://www.sencha.com/forum/archive/index.php/t-110535.html
the guy who asked the question seemed to solve his problem with :

tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
renderTo: 'carousel',
width: '400px',
height: '300px',
defaults: {
cls: 'card'
items: [{
html: '<h1>Carousel</h1>'
title: 'Tab 2',
html: '2'
title: 'Tab 3',
html: '3'

I've copy past this code, it didn't worked too.

29 Dec 2011, 6:19 AM
New issue with this, the last code aolczak posted up DID work BUT the page is unusable because it scrolls the iphone to the very bottom of the page, and does not let you do any scrolling. How do we enable scrolling and keep it from jumping down to the bottom?

29 Dec 2011, 11:27 AM
I did make a carrousel to work with a fixed size without the renderTo parameter. The page is scrollable too and don't start at bottom of the page. (note: I have a vbox below).

var moneyRaised = new Ext.Panel({
style: 'background: url(/background.jpg);',
xtype: 'panel',
html: 'Money raised',

var ImagePanel = new Ext.Carousel({
height: 245,
width: 320,
items: [moneyRaised, topDonator, topInfluencer]