PDA

View Full Version : Carousel doesnt populate when rendered to a hidden div



nos482
28 Jan 2012, 5:22 AM
Hi,

I am trying to use a carousel on a page and i am building its items dynamically.
The problem that I am having is that I render to control to a div that is currently hidden.
Because of that I cant get the control to show. In the debugger I see Sencha adding its placeholders etc, but the span's where the items are supposed to be are empty. If I do the exact same code and the div isnt hidden, everything works fine. Below is some basic sample code that shows the problem. As this is for a page and i want to show other elements at the same time I thus have to not use "fullscreen: true". Any help or suggestions? (also please ignore the jquery part, its a web page thats being moved over)


<script>
var carouselSevenDay;
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {
carouselSevenDay = new Ext.Carousel({
renderTo: 'div1',
layout: 'fit',
height: 500,
width: 500

});
}
});
$(document).ready(function () {
var t = setTimeout(function () {
carouselSevenDay.add([{ title: 'Tab 1', html: 'TEST TEST TEST 1'}]);
carouselSevenDay.add([{ title: 'Tab 1', html: 'TEST TEST TEST 2'}]);
carouselSevenDay.add([{ title: 'Tab 1', html: 'TEST TEST TEST 3'}]);
carouselSevenDay.doLayout();
carouselSevenDay.show();
$("#div1").show();
}, 5000);
});
</script>
</head>
<body>
<div id='div1' style="display: none; width: 500px; height: 500px;">
</div>
</body>