ExtJs4.2学习--Ext.tab.Panel 选项卡

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代码：

<h1>基本选项卡</h1> 
<div class="content" style="height: 150px">
    <div id="tabPanel">
        <div style="display: none">
            <div id="oneTab">
                <p>这个tab所展示的内容是读取至其他HTML标签</p>
            </div>
        </div>
    </div>
</div>

js代码为：

//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代码：

<h1>基本选项卡</h1> 
<div class="content" style="height: 150px">
    <div id="tabPanel">
        <div style="display: none">
            <div id="oneTab">
                <p>这个tab所展示的内容是读取至其他HTML标签</p>
            </div>
        </div>
    </div>
</div> 
<h1>操作选项卡</h1>
<div class="content" id="content2"></div>

js全代码：

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) + '<br/><br/>',
    	            closable: true
    	        });
    	    }
    	});

    	//插入一个Tab
    	Ext.createWidget("button", {
    	    text: "在2号位置插入新Tab",
    	    renderTo: 'content2',
    	    handler: function () {
    	        tabs1.insert(2, {
    	            title: '新Tab ' + (++index),
    	            id: "newTab" + index,
    	            html: '选项卡文本部分 ' + (index) + '<br/><br/>',
    	            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);
    	    }
    	});
	});

最后的效果为：