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)

Code:
 <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>