本篇講解選項卡控件。
一、基本選項卡
首先我們來定義一個基本的選項卡控件，其中每個Tab各有不同，Tab的正文內容可以有三種方式獲取：
1.基本方式:通過定義html和items的方式。
2.讀取其他html的信息:通過設置contentEl就可以獲取其他html的信息為當前tab正文。
3.讀取服務端數據:通過定義autoLoad異步方式獲取服務端數據。
另外，每個tab都可以設置是否可關閉，進入tab時的事件，以及tab是否可用，具體情況請看代碼：
[html]
| 1 2 3 4 5 6 7 8 9 10 | <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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | //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]
| 1 2 | <h1>操作選項卡</h1><div class="content" id="content2"></div> |
[Js]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | var index = 0;//新增一個TabExt.createWidget("button", {????text: "新增一個Tab",????renderTo: 'content2',????handler: function () {????????tabs1.add({????????????title: '新Tab ' + (++index),????????????id: "newTab" + index,????????????html: '選項卡文本部分 ' + (index) + '<br/><br/>',????????????closable: true????????});????}});//插入一個TabExt.createWidget("button", {????text: "在2號位置插入新Tab",????renderTo: 'content2',????handler: function () {????????tabs1.insert(2, {????????????title: '新Tab ' + (++index),????????????id: "newTab" + index,????????????html: '選項卡文本部分 ' + (index) + '<br/><br/>',????????????closable: true????????});????}});//刪除一個TabExt.createWidget("button", {????text: "刪除2號位置的Tab",????renderTo: 'content2',????handler: function () {????????tabs1.remove(2);????}});//刪除id為“tab1”的TabExt.createWidget("button", {????text: "刪除id為“tab1”的Tab",????renderTo: 'content2',????handler: function () {????????tabs1.remove("tab1");????}});//刪除id為“tab1”的TabExt.createWidget("button", {????text: "設置第三個Tab為活動tab",????renderTo: 'content2',????handler: function () {????????tabs1.setActiveTab(2);????}}); |
?
效果：
三、選項卡按鈕在下方
默認的選項卡按鈕在上方，我們可以隨意定義選項卡按鈕的位置，下面代碼演示了具體的用法：
[html]
| 1 2 | <h1>選項卡按鈕在下方</h1><div class="content" id="content3"></div> |
[Js]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //選項卡按鈕在下方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]
| 1 2 | <h1>可拖動的選項卡</h1><div class="content" id="content4"></div> |
[Js]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | //首先要動態加載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]
| 1 2 | <h1>過多選項卡的菜單式展示</h1><div class="content" id="content5"></div> |
[Js]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //選項卡過多溢出時菜單顯示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]
| 1 2 | <h1>選項卡的右鍵菜單</h1><div class="content" id="content6"></div> |
[Js]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | //選項卡的右鍵菜單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]
| 1 2 | <h1>分組式選項卡</h1><div class="content" id="content7"></div> |
[Js]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | //分組式選項卡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}); |
?
效果：
