Extjs4-tab选项卡-根本选项卡 _JavaScript

Extjs4---tab选项卡--基本选项卡

完整代码下载地址：http://download.csdn.net/detail/lc448986375/4582794

1、基本的选项卡

tabPanel.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Form</title>
    
    <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
	<script type="text/javascript" src="ext4/ext-all.js"></script>
    <script type="text/javascript" src="js/tabPanel.js"></script>

  </head>
  
  <body>
  	<div style="display: none;">
  		<div id="tab2">
  			从页面的div中传入的数据
  		</div>
  	</div>
  </body>
</html>

tabPanel.js

Ext.require(
		'Ext.tab.*'
);
Ext.onReady(
		
		
		
		function(){
			Ext.create(
					'Ext.tab.Panel',
					{
						renderTo:Ext.getBody(),
						activeTab:0,
						width:600,
						height:300,
						plain:true,
						defaults:{
							autoScoll:true
						},
						items:[
						       {
						    	   //id:'tab1',
						    	   title:'Tabs-1',
						    	   html:'这是一个普通的tab'
						       },{
						    	   title:'tab-2',
						    	   contentEl:'tab2'
						       },{
						    	   //id:'tab2',
						    	   title:'ajax Tab',
						    	   autoLoad:{
						    		   url:'tabAction',
						    		   params:{
						    			   data:'从客户端传入的参数'
						    		   },
						    		   method:'GET'
						    	   }
						       
						       },{
						    	   title:'事件tab',
						    	   listeners:{
						    		   activate:function(tab){
						    			   alert(tab.title + ': activate事件触发。');
						    		   }
						    	   },
						    	   html:'带事件的tab',
						    	   autoLoad:false
						       },{
						    	   title:'不可用的tab',
						    	   disabled: true
						       }
						]
					}
			);
		}
);

效果图：