Extjs4---tab選項卡-操作選項卡，增刪插入

歡迎光臨我的小站，共同學習交流技術：http://www.luchg.com

完整代碼下載地址：http://www.luchg.com/resource/showResource_3.html

tabPanel.js:

Ext.require(
		'Ext.tab.*'
);
Ext.onReady(
		
		function(){
			//添加一個Tab，在最後面添加
			Ext.create(
					'Ext.Button',
					{
						text:'添加一個Tab',
						renderTo:Ext.getBody(),
						handler:function(){
							tabs.add(
									{
										title:'新添加的tab',
										html:'這個tab是通過add添加的',
										closable:true
									}
							);
						}
					}
			);
			//插入一個tab,可以指定插入的位置
			Ext.create(
					'Ext.Button',
					{
						text:'插入一個Tab',
						renderTo:Ext.getBody(),
						handler:function(){
							tabs.add(3, //第一個參數是用來指定插入的位置
									{
										title:'新插入的tab',
										html:'這個tab是通過insert插入來的',
										closable:true
									}
							);
						}
					}
			);
			//刪除tab---指定刪除的位置
			Ext.create(
					'Ext.Button',
					{
						text:'根據位置刪除tab',
						renderTo:Ext.getBody(),
						handler:function(){
							//刪除第四位置上的tab
							tabs.remove(4);
						}
					}
			);
			//刪除tab---刪除指定id的tab
			Ext.create(
					'Ext.Button',
					{
						text:'根據id刪除tab',
						renderTo:Ext.getBody(),
						handler:function(){
							//刪除id爲tab3的tab
							tabs.remove('tab3');
						}
					}
			);
			//設置活動窗口：
			Ext.create(
					'Ext.Button',
					{
						text:'設置活動窗口',
						renderTo:Ext.getBody(),
						handler:function(){
							//設置2爲活動窗口
							tabs.setActiveTab(2);
						}
					}
			);
			
			
			var tabs = 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'
						       },{
						    	   id:'tab2',
						    	   title:'tab-2',
						    	   contentEl:'tab2'
						       },{
						    	   id:'tab3',
						    	   title:'ajax Tab',
						    	   autoLoad:{
						    		   url:'tabAction',
						    		   params:{
						    			   data:'從客戶端傳入的參數'
						    		   },
						    		   method:'GET'
						    	   }
						       
						       },{
						    	   id:'4',
						    	   title:'事件tab',
						    	   listeners:{
						    		   activate:function(tab){
						    			   alert(tab.title + ': activate事件觸發。');
						    		   }
						    	   },
						    	   html:'帶事件的tab',
						    	   autoLoad:false
						       },{
						    	   id:'tab5',
						    	   title:'不可用的tab',
						    	   disabled: true
						       }
						]
					}
			);
		}
);

其他代碼參考上一篇文章

效果圖：