錨點布局是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。
小結
錨點布局是ExtAspNet布局中相對復雜，不易掌握的一類布局，不過在實際項目中，我們通常會使用相對簡單的垂直盒子布局或水平盒子布局來取代錨點布局，只有在必須使用錨點布局的時候才會考慮錨點布局。下面的幾篇文章，我們會接着學習列布局、行布局、垂直盒子布局、水平盒子布局、絕對定位布局和表格布局，請繼續關注。