使用布局的優勢
相對於為控件設置固定的寬度和高度，布局的重要意義在於子控件可以根據父控件的尺寸自動設置自己的尺寸，在頁面尺寸改變時同樣有效。如果你在項目中遇到類似如下的需求，就需要考慮布局了：
- 面板填充整個頁面，並根據頁面尺寸自動改變大小；
- 將整個頁面划分為上下左右中四塊；
- 一個子面板寬度固定，另一個子面板占據剩余的全部寬度；
- 一個子面板高度固定，另一個子面板占據剩余的全部高度；
- 將一個面板浮動到頁面的固定地方；
- ....
FineUI中哪些控件可以參與布局?
凡是容器控件都可以參與布局，FineUI中很多控件都是從Container中繼承下來的。這個從官方文檔中可以明顯看得出來。
FineUI中有哪些布局?
FineUI中有很多布局，通過Layout枚舉類型我們可以清楚的看到這些布局類型。
從上圖可以看出，很多布局類型以控件的形式表現出來，比如RegionPanel、Accordion、Form和SimpleForm以及TabStrip控件，這些控件會有單獨的篇幅介紹，這里只介紹可以用於所有容器控件的布局類型。
布局之填充整個頁面
讓整個容器填充整個頁面是一個常見需求，實現起來也很方便。設置PageManager的AutoSizePanelID為需要填充整個頁面的容器控件ID。
布局之填充整個容器（Fit）
讓一個控件充滿另一個容器控件也是一個常見的需求，此時只需要為父容器控件設置Layout屬性為Fit即可。
分析示例首頁所使用的布局
從上圖可以看出，這個首頁分別使用了如下布局相關知識：
- 通過PageManager的AutoSizePanelID屬性將RegionPanel控件充滿整個頁面空間；
- RegionPanel控件用來提供“上-左-中”的布局；
- RegionPanel中的三個Region控件分別應用Layout=Fit，來使其內部的控件（分別為ContentPanel，Tree，TabStrip）填充整個Region。
下面來看下簡化后的代碼結構：
1: <ext:PageManager AutoSizePanelID="RegionPanel1" >
2: </ext:PageManager>
3: <ext:RegionPanel ID="RegionPanel1">
4: <ext:Region Position="Top" Layout="Fit">
5: <Toolbars>
6: <ext:Toolbar Position="Bottom"></ext:Toolbar>
7: </Toolbars>
8: <Items>
9: <ext:ContentPanel></ext:ContentPanel>
10: </Items>
11: </ext:Region>
12: <ext:Region Position="Left" Layout="Fit">
13: <Items>
14: <ext:Tree></ext:Tree>
15: </Items>
16: </ext:Region>
17: <ext:Region Position="Center" Layout="Fit">
18: <Items>
19: <ext:TabStrip>
20: <Tabs>
21: <ext:Tab></ext:Tab>
22: <ext:Tab></ext:Tab>
23: <ext:Tab></ext:Tab>
24: </Tabs>
25: </ext:TabStrip>
26: </Items>
27: </ext:Region>
28: </ext:RegionPanel>
錨點布局的結構
錨點布局是ExtJS最早推出的幾個布局之一，功能強大但相對復雜。本篇文章會詳細分析錨點布局。
一個典型的錨點布局的結構如下：
1: <ext:Panel Layout="Anchor">
2: <Items>
3: <ext:Panel AnchorValue="100% 30%"></ext:Panel>
4: <ext:Panel AnchorValue="100% 70%"></ext:Panel>
5: </Items>
6: </ext:Panel>
有兩個關鍵點：
- 為父容器控件設置Layout屬性為Anchor；
- 為每個子容器控件設置AnchorValue屬性，用來指定子容器控件的錨點布局參數。
AnchorValue的取值
AnchorValue可以由兩個值組成，中間以空格分隔；也可以由一個值組成，此時第二個值就是默認值。
這兩個值分別表示水平的錨點值和垂直的錨點值。AnchorValue可以由百分值或者整型值構成：
- 百分值
- AnchorValue="100% 60%"，表示此控件占據全部的寬度和60%的高度。
- AnchorValue="100%"，此控件占據全部的寬度，高度自動。
- 整型值（可以是正值或者負值）
- AnchorValue="-100 -20"，表示此控件右邊框距離父控件右邊框100px，此控件下邊框距離父控件下邊框20px。
- AnchorValue="100 20"，表示此控件右邊框超出父控件右邊框100px，此控件下邊框超出父控件下邊框20px。
當然可以在一個AnchorValue中混合使用百分值和整型值，比如：
AnchorValue="100% -20"，表示此控件占據父控件全部寬度，此控件下邊框距離父控件下邊框20px。
通過示例認識AnchorValue的整型值
AnchorValue的百分值很容易理解。但是AnchorValue的整型值就有點費解了，下面通過示例來詳細說明AnchorValue的不同取值對界面的影響。
示例一：
1: <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" ShowBorder="True"
2: Layout="Anchor" ShowHeader="True" Title="Panel1">
3: <Items>
4: <ext:Panel ID="Panel2" AnchorValue="100% -100" EnableBackgroundColor="true" runat="server"
5: ShowBorder="True" ShowHeader="true" Title="Panel2">
6: </ext:Panel>
7: </Items>
8: </ext:Panel>
為了清晰的觀察AnchorValue整型值的表現，我們只放置了一個子控件，顯示效果如下：
示例二：
1: <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" ShowBorder="True"
2: Layout="Anchor" ShowHeader="True" Title="Panel1">
3: <Items>
4: <ext:Panel ID="Panel2" AnchorValue="100% 100" EnableBackgroundColor="true" runat="server"
5: ShowBorder="True" ShowHeader="true" Title="Panel2">
6: </ext:Panel>
7: </Items>
8: </ext:Panel>
示例二相對於示例一只是把AnchorValue由 100% –100 改為了 100% 100，來看效果：
看得不是很清楚，按道理Panel2應該超出Panel1的高度，但是這個截圖中超出的部分被截斷了。
沒關系，下面通過FireBug的幫助再來看下：
果然和我們預期的結果一致。
示例三：
1: <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" ShowBorder="True"
2: Layout="Anchor" ShowHeader="True" Title="Panel1">
3: <Items>
4: <ext:Panel ID="Panel2" AnchorValue="100% -100" EnableBackgroundColor="true" runat="server"
5: ShowBorder="True" ShowHeader="true" Title="Panel2">
6: </ext:Panel>
7: <ext:Panel ID="Panel3" AnchorValue="100%" Height="100" EnableBackgroundColor="true" runat="server"
8: ShowBorder="True" ShowHeader="true" Title="Panel3">
9: </ext:Panel>
10: </Items>
11: </ext:Panel>
這次向Panel1中放置了兩個面板，Panel2的AnchorValue保持 100% –100 不變（也就是說Panel2的下邊框距離父容器的下邊框100px），Panel3的AnchorValue設置為100%，同時指定其高度Height屬性為100px。來看效果：
不過這種需求並不多；常見的需求是要求上部面板高度固定，下部面板高度自適應，這該如何實現？
也許你會不假思索的說，把Panel2和Panel3互換下位置不就行了？那就是下吧！
示例四：
如何實現下面這種布局？
正確的實現代碼如下：
1: <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" ShowBorder="True"
2: Layout="Anchor" ShowHeader="True" Title="Panel1">
3: <Items>
4: <ext:Panel ID="Panel2" AnchorValue="100%" Height="100" EnableBackgroundColor="true"
5: runat="server" ShowBorder="True" ShowHeader="true" Title="Panel2">
6: </ext:Panel>
7: <ext:Panel ID="Panel3" AnchorValue="100% -100" EnableBackgroundColor="true" runat="server"
8: ShowBorder="True" ShowHeader="true" Title="Panel3">
9: </ext:Panel>
10: </Items>
11: </ext:Panel>
如果單獨看這段代碼，可能不好理解；但是通過示例一到示例四循序漸進的學習，我們應該可以看出其中的端倪：
雖說Panel3的AnchorValue為100% -100，也即是其下邊框距離父容器的下邊框100px，但是由於上部還有一個100px固定高度的面板，最終導致Panel3下移了100px，正好是我們所期望的結果！
錨點布局的實際應用
實際項目中，錨點布局常用來實現如下效果，一個面板包含上下兩部分，上部分是一個供用戶輸入搜索選項的表單，下部分是一個搜索結果展示的表格，其中表單的高度是固定的，表格的高度要填充剩余的空間。
這里就需要為表單設置AnchorValue=”100%”，為表格設置AnchorValue=”100% -62”。表示表單的寬度100%，高度自動；表格的寬度100%，高度隨父容器的高度自適應，其下邊框距離父容器下邊框62px。
下面來看實現此功能的ASPX標簽：
1: <ext:Panel ID="Panel7" runat="server" EnableBackgroundColor="true" BodyPadding="3px"
2: ShowBorder="True" ShowHeader="True" Width="750px" Height="350px" Title="面板四（Width=750px Height=350px Layout=Anchor）"
3: Layout="Anchor">
4: <Items>
5: <ext:Form ID="Form5" ShowBorder="False" BodyPadding="5px" AnchorValue="100%" EnableBackgroundColor="true"
6: ShowHeader="False" runat="server">
7: <Rows>
8: <ext:FormRow>
9: <Items>
10: <ext:TextBox ID="TextBox5" Label="用戶名" runat="server">
11: </ext:TextBox>
12: <ext:TextBox ID="TextBox8" Label="所在班級" runat="server">
13: </ext:TextBox>
14: </Items>
15: </ext:FormRow>
16: <ext:FormRow>
17: <Items>
18: <ext:TextBox ID="TextBox6" Label="所在年級" runat="server">
19: </ext:TextBox>
20: <ext:Button ID="Button11" Text="搜索" runat="server">
21: </ext:Button>
22: </Items>
23: </ext:FormRow>
24: </Rows>
25: </ext:Form>
26: <ext:Panel ID="Panel8" ShowBorder="True" ShowHeader="false" AnchorValue="100% -62"
27: Layout="Fit" runat="server">
28: <Toolbars>
29: <ext:Toolbar ID="Toolbar2" runat="server">
30: <Items>
31: <ext:Button ID="Button8" Text="按鈕一" runat="server">
32: </ext:Button>
33: <ext:Button ID="Button9" Text="按鈕二" runat="server">
34: </ext:Button>
35: </Items>
36: </ext:Toolbar>
37: </Toolbars>
38: <Items>
39: <ext:Grid ID="Grid2" Title="Grid2" PageSize="3" ShowBorder="false" ShowHeader="False"
40: runat="server" EnableCheckBoxSelect="True" DataKeyNames="Id,Name" EnableRowNumber="True">
41: <Columns>
42:
//
此處省略...
60: </Columns>
61: </ext:Grid>
62: </Items>
63: </ext:Panel>
64: </Items>
65: </ext:Panel>
你可能會問：這里的62px是怎么算出來的？
這個值還真不是算出來的，而是通過Firebug查看無邊框兩行的Form控件渲染后的實際高度，當然你也可以明確指定此Form控件的Height為62px。
