ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- Tabs ( 頁籤 )

頁籤 ( Tabs ) 在許多網頁中都可以看到它的使用，通常使用時機就是這個頁面資訊太多，但又必須讓使用者不需要做太多的動作而得知資訊，如果一次將資訊顯示出來，那使用者必須滾動滑鼠滾輪才能看到資訊，通常最主要的資訊是不會讓使用者做這個動作才能看到，所以頁籤的使用時機就是在此，例如： yahoo 首頁的新聞，我最常使用的就是這一塊，我只需要幾個點擊就可以觀看到主要的新聞，算是一個很方便且實用的控制項。

基本

先來 View 端如何建置 Tabs，以下為最基本的程式碼，item 內為頁籤與其內容或方法：

var tp = new Ext.TabPanel({
    renderTo: Ext.getBody(),
    width: 600,
    height: 200,
    items: [
        
    ]
});

預設頁面載入時停留在某一個 tab，與陣列索引值相同，第一個為 0：

activeTab: 0

頁籤顯示位置，可以設置 left、top、right、bottom

tabPosition: 'left'

一般頁籤

先加入一個頁籤：

{
    title: '一般頁籤',
    html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. ' +
          'Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.'
},

一般內容設置

上面的頁籤內容相當的不好看，且內容好像無法顯示完全，我們要調整一下內容的顯示：

bodyPadding: 15 // 內縮 15 單位
autoScroll: true // 內容超過高度，則顯示滾輪軸

autoHeight: true // 自動調整高度，前提是不能設置 Ext.TabPanel 的高度

closable: true // 顯示關閉按鈕

Ajax 頁籤

使用 API 讀取頁籤內容，首先先準備 API 回傳內容：

public ContentResult AjaxContent()
{
    return Content("從 api 來的資料。");
}

而在 View 端則需要這樣寫：

{
    title: 'ajax 頁籤',
    loader: {
        url: 'http://localhost:8090/Ext/AjaxContent'
    },
    listeners: {
        activate: function (tab) {
            tab.loader.load();
        }
    }
},

activate 事件代表點擊到此頁籤時執行。

上述使用 listeners 的這個方法也可以在 loader 內使用 autoLoad: true 有相同效果，差別就在於一個是點擊後才會載入，一個是在頁面載入時就會一同載入。

執行後畫面如下：

設置在資料未從 API 載入前先顯示 Loading 圖示：

loadMask: true
contentType: 'html' // 格式

事件頁籤

其實上面已經提過了，這裡就只顯示程式碼：

{
    title: '事件頁籤',
    listeners: {
        activate: function (tab) {
            setTimeout(function () {
                alert(tab.title + ' 已使用.');
            }, 1);
        },
        deactivate: function (tab) {
            setTimeout(function () {
                alert(tab.title + ' 已離開e.');
            }, 1);
        }
    },
    html: "不管此頁籤使用或離開，都會觸發事件"
},

失效頁籤

使頁籤不能點擊與使用

{
    title: '失效頁籤',
    disabled: true,
    html: "Can't see me cause I'm disabled"
}