Ext.Net學習筆記23：Ext.Net TabPanel用法詳解

上面的圖片中給出了TabPanel的一個效果圖，我們來看一下代碼：

<ext:TabPanel runat="server" ID="tabpanel1">
    <Items>
        <ext:Panel runat="server" ID="tab1" Title="Tab1" Html="第一個Tab">
        </ext:Panel>
        <ext:TreePanel runat="server" ID="tab2" Title="Tab2" Html="第二個Tab">
            <Root>
                <ext:Node Text="根節點" Expanded="true">
                    <Children>
                        <ext:Node Text="節點1" Expanded="true">
                            <Children>
                                <ext:Node Text="節點11" Leaf="true"></ext:Node>
                                <ext:Node Text="節點12" Leaf="true"></ext:Node>
                            </Children>
                        </ext:Node>
                        <ext:Node Text="節點2" Leaf="true"></ext:Node>
                        <ext:Node Text="節點3" Leaf="true"></ext:Node>
                        <ext:Node Text="節點4" Leaf="true"></ext:Node>
                    </Children>
                </ext:Node>
            </Root>
        </ext:TreePanel>
    </Items>
</ext:TabPanel>

這段代碼中，我們在TabPanel中放了兩個子項，一個是Panel，一個是TreePanel，每一個子項作為一個Tab展示在界面中。

我在代碼中放了一個Panel和一個TreePanel的目的是想告訴大家，TabPanel中的子項需要繼承自Panel，而TreePanel是繼承自Panel的，由此可以聯想到GridPanel、FormPanel等都可以作為TabPanel的子項來使用。

【題外話：在ExtJS中，出於效率的考慮，應該盡量減少items的嵌套，如果我們需要TabPanel的子項為TreePanel、GridPanel或FormPanel的時候，就沒必要再將這些控件嵌套在Panel中】

異步加載Tab內容

異步加載仍然是出於性能的考慮，按需加載，當用戶激活一個Tab標簽的時候，我們再將這個標簽的內容加載出來，從而避免加載未用到的數據。

接下來我們演示一下如何加載Tab2中的TreePanel

第一步，定義TabPanel，為Tab2添加Activate事件，用來處理激活操作：

<ext:TabPanel runat="server" ID="tabpanel1">
    <Items>
        <ext:Panel runat="server" ID="tab1" Title="Tab1" Html="第一個Tab">
        </ext:Panel>
        <ext:Panel runat="server" ID="tab2" Title="Tab2" Icon="Application">
            <DirectEvents>
                <Activate OnEvent="tab2_activate" Single="true">
                    <EventMask ShowMask="true" Target="This"></EventMask>
                </Activate>
            </DirectEvents>
        </ext:Panel>
    </Items>
</ext:TabPanel>

第二步，服務器端添加tab2_activate方法，用代碼動態生成樹，並添加到tab2中：

protected void tab2_activate(object sender, DirectEventArgs e)
{
    TreePanel tree = createTree();
    tree.AddTo(tab2);
}

private TreePanel createTree()
{
    TreePanel tree = new TreePanel();
    tree.Root.Add(new Node() { Text = "根節點", Expanded = true });
    tree.Root[0].Children.Add(new Node() { Text = "節點1", Expanded = true });
    tree.Root[0].Children[0].Children.Add(new Node() { Text = "節點11", Leaf = true });
    tree.Root[0].Children[0].Children.Add(new Node() { Text = "節點12", Leaf = true });
    tree.Root[0].Children.Add(new Node() { Text = "節點2", Leaf = true });
    tree.Root[0].Children.Add(new Node() { Text = "節點3", Leaf = true });
    tree.Root[0].Children.Add(new Node() { Text = "節點4", Leaf = true });

    return tree;
}

第三步，哈哈，沒有第三步了，編譯程序，刷新頁面看看效果吧

當點擊Tab2的標簽后，首先看到的是加載提示，如下圖：

加載完成以后才顯示出來樹節點。

將Tab標簽繪制在底部

效果：

代碼：

<ext:TabPanel runat="server" ID="tabpanel1" TabPosition="Bottom">
    <Items>
        ...
    </Items>
</ext:TabPanel>

通過TabPosition控制Tab的位置，默認為Top（頂部），另外還可以是Bottom（底部）、Left（左側）和Right（右側）。

在TabBar上添加自定義按鈕

代碼：

<TabBar>
    <ext:ToolbarFill></ext:ToolbarFill>
    <ext:Button runat="server" Icon="Add"></ext:Button>
    <ext:Button runat="server" Icon="DatabaseSave"></ext:Button>
</TabBar>

TabScrollerMenu 插件

代碼：

<Plugins>
    <ext:TabScrollerMenu></ext:TabScrollerMenu>
</Plugins>

另外，還可以設置PageSize屬性，用來控制每頁顯示的內容條數