sencha toucha中 tab 面板的使用

主要有常用的配置选项

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 tabPanel = Ext.create('Ext.TabPanel',{
			id:'tabPanel',
			ui:'light',  //定义组件所使用的Sencha Touch中预定义的样式
			tabBarPosition:'bottom',  //指定Tab面板中标签栏的停靠位置
			items:[
			{
				title:'主页',
				html:'主页',
				iconCls:'add'  //iconCls,定义当Tab面板的标签栏停靠在面板底部时，该面板在标签栏中显示的图标样式名称
			},
			{
				title:'合同',
				html:'合同',
				iconCls:'info'
			}],
			listeners:{  
 			activeitemchange:function(item,oldValue,newValue)  
 			{  
    			 //事件处理函数代码略  
     			return true;//当返回值为true时本行代码可省略  
 			} , 
			painted:function(item)  
  			{  
      			  item.addCls('bgcolorPink');  
    		}
					} 
			});
	Ext.Viewport.add(tabPanel); 
	tabPanel.setActiveItem(1);//不指定activeItem配置选项值的时候，该值默认为0
}  
});