sencha touch盒布局

Ext.require('Ext.TabPanel');  
Ext.application({  
name: 'MyApp',  
icon: 'images/icon.png',  
glossOnIcon: false,  
phoneStartupScreen: 'images/phone_startup.png',  
tabletStartupScreen: 'images/tablet_startup.png',  
launch: function() {  
		var Panel = Ext.create('Ext.Panel',{
			id:'tabPanel',
			layout:{
					type:'box',//指定容器（在本例中为面板）组件的布局方式,这是水平，vbox为垂直布局
					align:'stretch'//指定容器（在本例中为面板）中子组件（在本例中为容器组件）的垂直对齐方式,默认值为center，表示子组件的纵向对齐方式为中央对齐
				},
			items:[
			{
				flex:1,//整数值表示每一个子组件宽度占容器总宽度的百分比值,本例中为1/3
				html:'子组件1',
				style:'background-color:#5E99CC;'  //iconCls,定义当Tab面板的标签栏停靠在面板底部时，该面板在标签栏中显示的图标样式名称
			},
			{
				flex:2,//本例中为2/3
				html:'子组件2',
				style:'background-color:#759E60;'
			}],
		
			});
	Ext.Viewport.add(Panel); 
}  
});