ExtJs4 筆記（10） Ext.tab.Panel 選項卡

《回到系列目錄

本篇講解索引標籤控制項。

一、基本選項卡

首先我們來定義一個基本的索引標籤控制項，其中每個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事件觸發。');    }

我們查看一下產生的選項卡效果：

二、操作選項卡

選項卡產生後，我們可以通過js去操作它，比如動態新增、刪除、插入選項卡，設定活動選項卡等，我們看看具體實現方法：

[html]

    <h1>操作選項卡</h1>    <div class="content" id="content2"></div>

[Js]

    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);        }    });

效果：

三、選項卡按鈕在下方

預設的選項卡按鈕在上方，我們可以隨意定義選項卡按鈕的位置，下面代碼示範了具體的用法：

[html]

    <h1>選項卡按鈕在下方</h1>    <div class="content" id="content3"></div>

[Js]

    //選項卡按鈕在下方    var tabs3 = Ext.createWidget('tabpanel', {        renderTo: "content3",        activeTab: 0,        width: 600,        height: 150,        tabPosition: 'bottom'           //指定了選項卡的位置，left,right    });    for (var i = 0; i < 3; i++)        tabs3.add({            title: 'Tab ' + i,            id: "Tabs3_" + i,            html: '選項卡文本部分 ' + (index) + '<br/><br/>',            closable: true        });

效果：

四、可拖動的選項卡

通過官方擴充包我們可以增強索引標籤控制項的易用性，比如現在我們可以實現一個可以拖動選項卡按鈕的功能：

[html]

    <h1>可拖動的選項卡</h1>    <div class="content" id="content4"></div>

[Js]

//首先要動態載入ux擴充的jsExt.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');Ext.require([    'Ext.tip.QuickTipManager',    'Ext.tab.Panel',    'Ext.ux.TabScrollerMenu',    'Ext.ux.TabReorderer',    'Ext.ux.TabCloseMenu',    'Ext.ux.GroupTabPanel']);//以下是功能代碼    //可拖動的選項卡    var tabs4 = Ext.createWidget('tabpanel', {        renderTo: "content4",        activeTab: 0,        width: 600,        height: 150,        plugins: Ext.create('Ext.ux.TabReorderer'),        items: [{            xtype: 'panel',            title: 'tab不可拖',            html: "這個選項卡不可被拖動",            reorderable: false,            closable: true        }]    });    for (var i = 0; i < 3; i++)        tabs4.add({            title: 'Tab ' + i,            id: "Tabs4_" + i,            html: '選項卡文本部分 ' + (index) + '<br/><br/>'        });

效果如下，可見一個tab已經被移動：

五、過多選項卡的菜單式展示

如果面板上的選項卡開啟的過多而顯示不下，那麼需要對溢出的選項卡用菜單的方式展示出來，實現方式如下，注意要引入擴充的css樣式：

[html]

    <h1>過多選項卡的菜單式展示</h1>    <div class="content" id="content5"></div>

[Js]

    //選項卡過多溢出時菜單顯示    var tabs5 = Ext.createWidget('tabpanel', {        renderTo: "content5",        activeTab: 0,        width: 600,        height: 150,        plugins: Ext.create('Ext.ux.TabScrollerMenu', {            maxText: 15,            pageSize: 5        }),        items: [{            title: 'tab0',            html: '第一個tab'        }]    });    Ext.defer(function () {        var myTabs = [];        for (var i = 0; i < 15; i++) {            myTabs.push({                title: 'Tab ' + i,                id: "Tabs5_" + i,                html: '選項卡文本部分 ' + (index) + '<br/><br/>'            });        }        tabs5.add(myTabs);    }, 1000);

效果：

六、選項卡的右鍵菜單

一般的應用程式都支援在選項卡按鈕上面通過右鍵的方式去關閉多餘的選項卡，在ext中也可以做到，實現方法如下：

[html]

    <h1>選項卡的右鍵菜單</h1>    <div class="content" id="content6"></div>

[Js]

    //選項卡的右鍵菜單    var currentItem;    var tabs6 = Ext.createWidget('tabpanel', {        renderTo: "content6",        activeTab: 0,        width: 600,        height: 150,        plugins: Ext.create('Ext.ux.TabCloseMenu', {            closeTabText: '關閉當前',            closeOthersTabsText: '關閉其他',            closeAllTabsText: '關閉所有',            extraItemsTail: [                        '-',                        {                            text: '可關閉',                            checked: true,                            hideOnClick: true,                            handler: function (item) {                                currentItem.tab.setClosable(item.checked);                            }                        }                    ],            listeners: {                aftermenu: function () {                    currentItem = null;                },                beforemenu: function (menu, item) {                    var menuitem = menu.child('*[text="可關閉"]');                    currentItem = item;                    menuitem.setChecked(item.closable);                }            }        }),        items: [{            title: 'tab1',            html: '第一個tab'        }, {            title: 'tab2',            closable: true,            html: '第二個tab'        }, {            title: 'tab3',            closable: true,            html: '第三個tab'        }]    });

效果：

七、分組式選項卡

我們還可以對選項卡進行分組，具體實現如下：

[html]

    <h1>分組式選項卡</h1>    <div class="content" id="content7"></div>

[Js]

    //分組式選項卡    var tabs7 = Ext.create('Ext.ux.GroupTabPanel', {        activeGroup: 0,             //設定當前活動的分組        items: [{            expanded: false,            mainItem: 1,            //設定主要的item，這個tab會在最上面，以檔案夾方式展示出來。            items: [{                title: '項目1',                html: "<b>第一組第一項本文。</b>"            }, {                title: '項目2',                border: false,                html: "<b>第一組第二項本文。</b>"            }, {                title: '項目3',                border: false,                html: "<b>第一組第三項本文。</b>"            }]        }, {            expanded: true,            items: [{                title: '項目1',                html: "<b>第二組第一項本文。</b>"            }, {                title: '項目2',                html: "<b>第二組第二項本文。</b>"            }]        }]    });    Ext.create('Ext.Panel', {        renderTo: "content7",        width: 600,        height: 250,        collapsible: true,        layout: 'fit',        title: '分組tab示範',        items: tabs7    });

效果：

作者：李盼（Lipan）
出處：[Lipan] （http://www.cnblogs.com/lipan/）
著作權聲明：本文的著作權歸作者與部落格園共有。轉載時須註明本文的詳細連結，否則作者將保留追究其法律責任。