当前位置 > 首页 > Asp.net

[原创]ExtAspNet秘密花园(十二) — 布局之锚点布局

2012-9-10 9:47:00来源:Asp.net

锚点布局是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整型值的表现,我们只放置了一个子控件,显示效果如下:

image