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（锚垂直）

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