本文共 5116 字，大约阅读时间需要 17 分钟。

1、基本标签的容器中。 TabPanels可以使用完全一样的标准Ext.panel.Panel布局的目的，但也有包含正在使用CardLayout布局管理器管理的子组件（项目）的特殊支持，并显示为单独的标签。先看看看官方的文档：

先看看一个简单的实例：

var tabs = Ext.create('Ext.tab.Panel', {    	    width: 400,    	    height: 400,    	    renderTo: document.body,    	    items: [{    	        title: 'Home',    	        html: 'Home',    	        itemId: 'home'    	    }, {    	        title: 'Users',    	        html: 'Users',    	        itemId: 'users',    	        hidden: true    	    }, {    	        title: 'Tickets',    	        html: 'Tickets',    	        itemId: 'tickets'    	    }]    	});    	setTimeout(function(){    	    tabs.child('#home').tab.hide();    	    var users = tabs.child('#users');    	    users.tab.show();    	    tabs.setActiveTab(users);    	}, 1000);

2、基本选项卡：

首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取：

1.基本方式:通过定义html和items的方式。

2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。

3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。

另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：

页面html代码：

基本选项卡
 
   
    
    
        
     
            
      
                
       
这个tab所展示的内容是读取至其他HTML标签
            
      
        
     
    
    
   

//1.基本的选项卡var tabs1 = Ext.createWidget('tabpanel', {    renderTo: "tabPanel",    activeTab: 1,                       //指定默认的活动tab    width: 600,    height: 120,    plain: true,                        //True表示tab候选栏上没有背景图片（默认为false）    enableTabScroll: true,              //选项卡过多时，允许滚动    defaults: { autoScroll: true },    items: [{        id: "tab1",        title: '普通Tab',        html: "这只是一个非常普通的Tab。",        items: [{ xtype: 'button', text: '按钮'}],        closable: true                  //这个tab可以被关闭    }, {        id: "tab2",        title: '内容来至div',        contentEl: 'oneTab'             //指定了当前tab正文部分从哪个html元素读取    }, {        id: "tab3",        title: 'Ajax Tab',        autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' }    }, {        id: "tab4",        title: '事件Tab',        listeners: { activate: handleActivate },        html: "带事件的Tab。"    }, {        id: "tab5",        title: '不可用Tab',        disabled: true,        html: "不可用的Tab，你是看不到我的。"    }]});//单击tab4后触发的事件function handleActivate(tab) {    alert(tab.title + ': activated事件触发。');}

3、操作选项卡：

选项卡生成后，我们可以通过js去操作它，比如动态新增、删除、插入选项卡，设置活动选项卡等，我们看看具体实现方法：

html代码：

基本选项卡
 
   
    
    
        
     
            
      
                
       
这个tab所展示的内容是读取至其他HTML标签
            
      
        
     
    
    
   
 
操作选项卡
   

Ext.onReady(function () {    	//1.基本的选项卡    	var tabs1 = Ext.createWidget('tabpanel', {    	    renderTo: "tabPanel",    	    activeTab: 1,                       //指定默认的活动tab    	    width: 600,    	    height: 120,    	    plain: true,                        //True表示tab候选栏上没有背景图片（默认为false）    	    enableTabScroll: true,              //选项卡过多时，允许滚动    	    defaults: { autoScroll: true },    	    items: [{    	        id: "tab1",    	        title: '普通Tab',    	        html: "这只是一个非常普通的Tab。",    	        items: [{ xtype: 'button', text: '按钮'}],    	        closable: true                  //这个tab可以被关闭    	    }, {    	        id: "tab2",    	        title: '内容来至div',    	        contentEl: 'oneTab'             //指定了当前tab正文部分从哪个html元素读取    	    }, {    	        id: "tab3",    	        title: 'Ajax Tab',    	        autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' }    	    }, {    	        id: "tab4",    	        title: '事件Tab',    	        listeners: { activate: handleActivate },    	        html: "带事件的Tab。"    	    }, {    	        id: "tab5",    	        title: '不可用Tab',    	        disabled: true,    	        html: "不可用的Tab，你是看不到我的。"    	    }]    	});    	//单击tab4后触发的事件    	function handleActivate(tab) {    	    alert(tab.title + ': activated事件触发。');    	}     	    	var index = 0;    	//新增一个Tab    	Ext.createWidget("button", {    	    text: "新增一个Tab",    	    renderTo: 'content2',    	    handler: function () {    	        tabs1.add({    	            title: '新Tab ' + (++index),    	            id: "newTab" + index,    	            html: '选项卡文本部分 ' + (index) + '
',    	            closable: true    	        });    	    }    	});    	//插入一个Tab    	Ext.createWidget("button", {    	    text: "在2号位置插入新Tab",    	    renderTo: 'content2',    	    handler: function () {    	        tabs1.insert(2, {    	            title: '新Tab ' + (++index),    	            id: "newTab" + index,    	            html: '选项卡文本部分 ' + (index) + '
',    	            closable: true    	        });    	    }    	});    	//删除一个Tab    	Ext.createWidget("button", {    	    text: "删除2号位置的Tab",    	    renderTo: 'content2',    	    handler: function () {    	        tabs1.remove(2);    	    }    	});    	//删除id为“tab1”的Tab    	Ext.createWidget("button", {    	    text: "删除id为“tab1”的Tab",    	    renderTo: 'content2',    	    handler: function () {    	        tabs1.remove("tab1");    	    }    	});    	//删除id为“tab1”的Tab    	Ext.createWidget("button", {    	    text: "设置第三个Tab为活动tab",    	    renderTo: 'content2',    	    handler: function () {    	        tabs1.setActiveTab(2);    	    }    	});	});