Ext.Net 控制元件Anchor佈局-錨點佈局
1、錨點佈局
有兩個關鍵點：
為父容器控制元件設定Layout屬性為Anchor；
為每個子容器控制元件設定AnchorValue屬性，用來指定子容器控制元件的錨點佈局引數。
2、Anchor的取值
Anchor可以由兩個值組成，中間以空格分隔；也可以由一個值組成，此時第二個值就是預設值。
這兩個值分別表示水平的錨點值和垂直的錨點值。Anchor可以由百分值或者整型值構成：
- 百分值
- Anchor="100% 60%"，表示此控制元件佔據全部的寬度和60%的高度。
- Anchor="100%"，此控制元件佔據全部的寬度，高度自動。
- 整型值（可以是正值或者負值）
- AnchorValue="-100 -20"，表示此控制元件右邊框距離父控制元件右邊框100px，此控制元件下邊框距離父控制元件下邊框20px。
- AnchorValue="100 20"，表示此控制元件右邊框超出父控制元件右邊框100px，此控制元件下邊框超出父控制元件下邊框20px。
當然可以在一個Anchor中混合使用百分值和整型值，比如：
AnchorValue="100% -20"，表示此控制元件佔據父控制元件全部寬度，此控制元件下邊框距離父控制元件下邊框20px。
3、通過示例認識AnchorValue的整型值
示例一：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Layout_Anchor.WebForm1" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <ext:ResourceManager runat="server" /> <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" Layout="AnchorLayout" Title="panel1"> <Items> <ext:Panel ID="Panel2" runat="server" Anchor="100% -100" Title="Panel2"> </ext:Panel> </Items> </ext:Panel> </form> </body> </html>
示例二：
<ext:ResourceManager runat="server" /> <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" Layout="AnchorLayout" Title="panel1"> <Items> <ext:Panel ID="Panel2" runat="server" Anchor="100% 100" Title="panel2"> </ext:Panel> </Items> </ext:Panel>
示例二相對於示例一隻是把AnchorValue由 100% –100 改為了 100% 100，來看效果：
看得不是很清楚，按道理Panel2應該超出Panel1的高度，但是這個截圖中超出的部分被截斷了。
沒關係，下面通過FireBug的幫助再來看下：
示例三：
<ext:ResourceManager runat="server" />
<ext:Panel
ID="Panel1"
runat="server"
Height="300px"
Width="400px"
Layout="AnchorLayout"
Title="panel1">
<Items>
<ext:Panel
ID="Panel2"
runat="server"
Anchor="100% -100"
Title="panel2">
</ext:Panel>
<ext:Panel
ID="Panel3"
runat="server"
Anchor="100%"
Height="100"
Title="panel3">
</ext:Panel>
</Items>
</ext:Panel>這次向Panel1中放置了兩個面板，Panel2的AnchorValue保持 100% –100 不變（也就是說Panel2的下邊框距離父容器的下邊框100px），Panel3的AnchorValue設定為100%，同時指定其高度Height屬性為100px。來看效果：
不過這種需求並不多；常見的需求是要求上部面板高度固定，下部面板高度自適應，這該如何實現？
也許你會不假思索的說，把Panel2和Panel3互換下位置不就行了？那就是下吧！
示例四：
如何實現下面這種佈局？
正確程式碼是：
<ext:ResourceManager runat="server" />
<ext:Panel
ID="Panel1"
runat="server"
Height="300px"
Width="400px"
Layout="AnchorLayout"
Title="panel1">
<Items>
<ext:Panel
ID="Panel2"
runat="server"
Anchor="100%"
Height="100"
Title="panel2">
</ext:Panel>
<ext:Panel
ID="Panel3"
runat="server"
Anchor="100% 100"
Title="panel3">
</ext:Panel>
</Items>
</ext:Panel>如果單獨看這段程式碼，可能不好理解；但是通過示例一到示例四循序漸進的學習，我們應該可以看出其中的端倪：
雖說Panel3的AnchorValue為100% -100，也即是其下邊框距離父容器的下邊框100px，但是由於上部還有一個100px固定高度的面板，最終導致Panel3下移了100px，正好是我們所期望的結果！
注：原文講的是ExtAspNet，此處講的是ExtNet
ExtAspNet與ExtJS，ExtNet，ExtJsExtender的區別？
ExtJS是純JavaScript的控制元件庫，所以適用於後臺為PHP，ASP.NET或者JSP的專案，並且是ExtAspNet和其他庫的基礎。
ExtNet是國外一家公司開發的基於ExtJS的ASP.NET控制元件庫，從功能上講比較完善，不過開發模型相對複雜，如果你喜歡ExtNet的開發風格或者需要使用ASP.NET MVC，可以嘗試這
個控制元件庫。
ExtJsExtender是一個比較早的基於ExtJS的ASP.NET控制元件庫，但是功能過於簡陋，長期沒有更新，並且對ASP.NET AJAX有依賴。
ExtAspNet是一組基於ExtJS的ASP.NET控制元件庫，也是本系列文章的主角。最大的優點就是簡單實用。基於ASP.NET2.0，專案中只需要引用一個ExtAspNet的DLL，沒有其他依賴。
還要注意ExtAspNet只適合WebForm的專案，不適合ASP.NET MVC的專案。