Ext.Net中，第一种：AbsoluteLayout布局方式

（近期会连续更新有关Ext.Net 控件的一些资料，与大家分享，有兴趣或者最近也在研究这方面知识的朋友可以加关注！！！）

在Ext.Net中一共有14种布局方式，下面我会一一介绍。

第一种：AbsoluteLayout布局方式。

AbsoluteLayout布局方式也称为：绝对布局方式。

它主要采用X,Y坐标进行布局，同时也支持AnchorHorizontal（锚水平）和AnchorVertical（锚垂直）进行布局。

在复杂页面布局中，一般会把这两种方法结合使用。

下面我们看一下代码：

页面源码：

<ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server" Layout="AbsoluteLayout">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Height="300" Title="Panel1">
                <Items>
                </Items>
            </ext:Panel>
            <ext:Panel ID="Panel2" runat="server" Height="300" Title="Panel2" X="50" Y ="50" Layout="AbsoluteLayout" AnchorHorizontal="-50" >
                <Items>
                    <ext:Label ID="Label1" runat="server" Text="这是一个Lable">
                    </ext:Label>
                    <ext:TextField ID="TextField1" runat="server"  Text="这是一个TextField" X="100" AnchorHorizontal="50%">
                    </ext:TextField>
                    <ext:Button ID="Button1" runat="server" Text="这是一个Button"  X="200" Y="25">
                    </ext:Button>
                    <ext:TextArea ID="TextArea1" runat="server" Text="这是一个TextArea"  Y="50" AnchorHorizontal="100%" AnchorVertical="100%">
                    </ext:TextArea>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>

在这里，我们可以看到，Viewport控件采用AbsoluteLayout布局方式，其中有2个项目：一个是Panel1，另一个是Panel2。

Panel1：高度是300，宽度则是铺满Viewport（视图界面）

Panel2：高度是300，同时：X,Y坐标都为50，AnchorHorizontal（锚水平）为-50。

这样会得到什么界面效果呢？

我们明显会看到：Panel2面板浮于Panel1面板之上，并且距离Viewport（视图界面）左边50，上边50，右边50。

这也就告诉我们，如果采用AbsoluteLayout布局方式，但是我们不设置X,Y坐标，或者是AnchorHorizontal（锚水平）和AnchorVertical（锚垂直）

那么我们看到的只能是包含在控件项目中的最后一个控件。除非此控件的高度和宽度小于前一个控件。