Ext.Net學習筆記04：Ext.Net布局

ExtJS中的布局功能很強大，常用的布局有border、accordion、fit、hbox、vbox等，Ext.Net除了將這些布局進行封裝以外，更是對border進行了一些非常實用的改進，讓我們來看看吧。

Ext.Net布局概述

Ext.Net中的布局是對ExtJS布局的封裝，可以用在panel控件，或者繼承自panel的控件，例如window、form、gridpanel、treepanel等。首先來看一個簡單的例子：

<ext:Window runat="server" ID="win1"
    Title="Layout示例" Width="600" Height="400"
    Layout="BorderLayout">
    <Items>
        <ext:Panel runat="server"
            Region="West" Title="西"
            Width="100" Border="true">
        </ext:Panel>
        <ext:Panel runat="server"
            Region="East" Title="東"
            Width="100" Border="true">
        </ext:Panel>
        <ext:Panel runat="server"
            Region="North" Title="北"
            Height="100" Border="true">
        </ext:Panel>
        <ext:Panel runat="server"
            Region="South" Title="南"
            Height="100" Border="true">
        </ext:Panel>
        <ext:Panel runat="server"
            Region="Center" Title="中"
            Border="true">
        </ext:Panel>
    </Items>
</ext:Window>

在這段代碼中，我們定義了一個window，然后將它的布局設置為border布局，在它內部有五個panel，位置分別是上下左右中，效果如圖：

如果你需要對border布局進行配置，可以在window標簽內添加layout標簽，例如：

<ext:Window runat="server" ID="win1"
    Title="Layout示例" Width="600" Height="400"
    Layout="BorderLayout">
 <LayoutConfig

> <ext:BorderLayoutConfig Padding="10"></ext:BorderLayoutConfig> </LayoutConfig

>
    <Items>……</Items>
</ext:Window>

不光的border布局這樣使用，所有的布局都是這樣使用的。通過上面的例子，我們能夠對Ext.Net的布局有一個整體的認知，然后再去查看ExtJS的文檔，針對不同的布局都有哪些配置項，該如何使用，相信會有很大的提高，我有一篇文章專門介紹ExtJS布局的：ExtJS 4.2 教程-08：布局系統詳解

Ext.Net對border布局的改進

border布局是我們使用最頻繁的布局之一，好處自然不必多少，我們單來扒一扒它的不足，眼下就有兩處：

1. 不支持將多個控件設置為一個區域。例如我們想要在左側停靠兩個panel，那么我們必須要進行嵌套，因為ExtJS本身不支持同時將兩個panel的region設置為west。
2. 當上下兩個區域存在的時候，左右區域不會占滿。這個可以參照上面的例子，上下兩個區域的寬度和window的寬度相同，而左右兩個區域的高度則受到它們的影響。如果要實現左右區域的高度占滿整個window的高度，那么我們必須進行嵌套。

知道了這兩個不足，來讓我們看看Ext.Net對它們的改進吧。

Ext.Net支持多個控件使用相同的region

這個功能可以解決第一個問題。代碼如下：

<ext:Window runat="server" ID="win1"
    Title="Layout示例" Width="600" Height="400"
    Layout="BorderLayout">
    <Items>
        <ext:Panel ID="Panel1" runat="server"
            Region="West" Title="西"
            Width="100" Border="true">
        </ext:Panel>
        <ext:Panel ID="Panel2" runat="server"
            Region="West" Title="西"
            Width="100" Border="true">
        </ext:Panel>
        <ext:Panel ID="Panel5" runat="server"
            Region="Center" Title="中"
            Border="true">
        </ext:Panel>
    </Items>
</ext:Window>

效果如下：

Ext.Net支持weight屬性

weight屬性，我理解為繪制時候的權重。在多個region中，優先繪制權重高的控件，它的高度（或寬度）將占滿整個容器。有了這個屬性，我們可以輕松應對第二個問題。

<ext:Window runat="server" ID="win1"
    Title="Layout示例" Width="600" Height="400"
    Layout="BorderLayout">
    <Items>
        <ext:Panel ID="Panel1" runat="server"
            Region="West" Title="西"Weight="10"
            Width="100" Border="true">
        </ext:Panel>
        <ext:Panel ID="Panel2" runat="server"
            Region="South" Title="南"
            Height="100" Border="true">
        </ext:Panel>
        <ext:Panel ID="Panel5" runat="server"
            Region="Center" Title="中"
            Border="true">
        </ext:Panel>
    </Items>
</ext:Window>

效果如下：