The html content added in the initCarousel function does not show up in the first place. However, if I manually resized the windows of my browser (tried on safari and chrome), the content showed up (seems like the resize trigger a refresh/reload the web page).

Also, if I changed the rootPanel type to TabPanel, worked fine. Can anyone please help? Thanks in advance.


Here is the simplified version of my code to reproduce the problem I have.

HTML source code
Code:
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Question</title>
	 <!-- Sencha Touch CSS -->
	 <link rel="stylesheet" href="sencha-touch.css" type="text/css">

	 <!-- Sencha Touch JS -->
	 <script type="text/javascript" src="sencha-touch.js"></script>

	<!-- Application JS -->
	<script type="text/javascript" src="question.js"></script>

 </head>
 <body>

 </body>
 </html>


question.js
Code:
var panel1

Ext.setup({
    glossOnIcon: true,

    onReady: function() {
		
		panel1 = new Ext.Panel({
				scroll: 'vertical',
				cls: 'timeline',
				fullscreen: true,
				style: "background-color: #fee;",

				layout: {
					type: "vbox",
					align: "stretch"
				},
			});       
		
		initCarousel();
		
		rootPanel = new Ext.Panel({  //if change to Ext.TabPanel here, works fine
            fullscreen: true,
            items: [ panel1]        
		});	
		
    }//onRdy

});

myTpl = new Ext.XTemplate(
	'<div class="avatarBottom">',
		'<span class="user_name">{from_user}</span>',
		'<span class="user_name">{text}</span>',
	'</div>'
);



function initCarousel (){
	console.log("initCarousel");
	data = {from_user: "user_" + 1, text:"text_" + 1, index:1}; 

	msg =  new Ext.Component({				
		tpl: myTpl
	});    
	
	msg.update(data);		
	msgMenu =  new Ext.Component({				
		html:	'<div>menu_1</div>'
	});    
	
	item = new Ext.Carousel({				
		height: 70,
		items: [
			msg,
			msgMenu	
		],
		indicator: false
	});
	
	panel1.add(item);
}