您的位置：首页 > 编程语言 > ASP

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

2012-09-10 09:36 441 查看
锚点布局是ExtJS最早推出的几个布局之一，功能强大但相对复杂。本篇文章会详细分析锚点布局。

锚点布局的结构

一个典型的锚点布局的结构如下：

<ext:PanelLayout="Anchor">

[code]<Items>
<ext:PanelAnchorValue="100%30%"></ext:Panel>

<ext:PanelAnchorValue="100%70%"></ext:Panel>

</Items>

</ext:Panel>

[/code]

有两个关键点：

为父容器控件设置Layout属性为Anchor；

为每个子容器控件设置AnchorValue属性，用来指定子容器控件的锚点布局参数。

AnchorValue的取值

AnchorValue可以由两个值组成，中间以空格分隔；也可以由一个值组成，此时第二个值就是默认值。

这两个值分别表示水平的锚点值和垂直的锚点值。AnchorValue可以由百分值或者整型值构成：

百分值

AnchorValue="100%60%"，表示此控件占据全部的宽度和60%的高度。

AnchorValue="100%"，此控件占据全部的宽度，高度自动。

整型值（可以是正值或者负值）

AnchorValue="-100-20"，表示此控件右边框距离父控件右边框100px，此控件下边框距离父控件下边框20px。

AnchorValue="10020"，表示此控件右边框超出父控件右边框100px，此控件下边框超出父控件下边框20px。

当然可以在一个AnchorValue中混合使用百分值和整型值，比如：

AnchorValue="100%-20"，表示此控件占据父控件全部宽度，此控件下边框距离父控件下边框20px。

通过示例认识AnchorValue的整型值

AnchorValue的百分值很容易理解。但是AnchorValue的整型值就有点费解了，下面通过示例来详细说明AnchorValue的不同取值对界面的影响。

示例一：

<ext:PanelID="Panel1"runat="server"Height="300px"Width="400px"ShowBorder="True"

[code]Layout="Anchor"ShowHeader="True"Title="Panel1">
<Items>

<ext:PanelID="Panel2"AnchorValue="100%-100"EnableBackgroundColor="true"runat="server"

ShowBorder="True"ShowHeader="true"Title="Panel2">

</ext:Panel>

</Items>

</ext:Panel>


[/code]
为了清晰的观察AnchorValue整型值的表现，我们只放置了一个子控件，显示效果如下：





示例二：

<ext:PanelID="Panel1"runat="server"Height="300px"Width="400px"ShowBorder="True"

[code]Layout="Anchor"ShowHeader="True"Title="Panel1">
<Items>

<ext:PanelID="Panel2"AnchorValue="100%100"EnableBackgroundColor="true"runat="server"

ShowBorder="True"ShowHeader="true"Title="Panel2">

</ext:Panel>

</Items>

</ext:Panel>

[/code]

示例二相对于示例一只是把AnchorValue由100%–100改为了100%100，来看效果：





看得不是很清楚，按道理Panel2应该超出Panel1的高度，但是这个截图中超出的部分被截断了。

没关系，下面通过FireBug的帮助再来看下：





果然和我们预期的结果一致。

示例三：

<ext:PanelID="Panel1"runat="server"Height="300px"Width="400px"ShowBorder="True"

[code]Layout="Anchor"ShowHeader="True"Title="Panel1">
<Items>

<ext:PanelID="Panel2"AnchorValue="100%-100"EnableBackgroundColor="true"runat="server"

ShowBorder="True"ShowHeader="true"Title="Panel2">

</ext:Panel>

<ext:PanelID="Panel3"AnchorValue="100%"Height="100"EnableBackgroundColor="true"runat="server"

ShowBorder="True"ShowHeader="true"Title="Panel3">

</ext:Panel>

</Items>

</ext:Panel>

[/code]

这次向Panel1中放置了两个面板，Panel2的AnchorValue保持100%–100不变（也就是说Panel2的下边框距离父容器的下边框100px），Panel3的AnchorValue设置为100%，同时指定其高度Height属性为100px。来看效果：





不过这种需求并不多；常见的需求是要求上部面板高度固定，下部面板高度自适应，这该如何实现？

也许你会不假思索的说，把Panel2和Panel3互换下位置不就行了？那就是下吧！



[b]



[/b]

示例四：

如何实现下面这种布局？





正确的实现代码如下：

<ext:PanelID="Panel1"runat="server"Height="300px"Width="400px"ShowBorder="True"

[code]Layout="Anchor"ShowHeader="True"Title="Panel1">
<Items>

<ext:PanelID="Panel2"AnchorValue="100%"Height="100"EnableBackgroundColor="true"

runat="server"ShowBorder="True"ShowHeader="true"Title="Panel2">

</ext:Panel>

<ext:PanelID="Panel3"AnchorValue="100%-100"EnableBackgroundColor="true"runat="server"

ShowBorder="True"ShowHeader="true"Title="Panel3">

</ext:Panel>

</Items>

</ext:Panel>


[/code]

如果单独看这段代码，可能不好理解；但是通过示例一到示例四循序渐进的学习，我们应该可以看出其中的端倪：

虽说Panel3的AnchorValue为100%-100，也即是其下边框距离父容器的下边框100px，但是由于上部还有一个100px固定高度的面板，最终导致Panel3下移了100px，正好是我们所期望的结果！

锚点布局的实际应用
实际项目中，锚点布局常用来实现如下效果，一个面板包含上下两部分，上部分是一个供用户输入搜索选项的表单，下部分是一个搜索结果展示的表格，其中表单的高度是固定的，表格的高度要填充剩余的空间。





这里就需要为表单设置AnchorValue=”100%”，为表格设置AnchorValue=”100%-62”。表示表单的宽度100%，高度自动；表格的宽度100%，高度随父容器的高度自适应，其下边框距离父容器下边框62px。

下面来看实现此功能的ASPX标签：


<ext:PanelID="Panel7"runat="server"EnableBackgroundColor="true"BodyPadding="3px"

[code]ShowBorder="True"ShowHeader="True"Width="750px"Height="350px"Title="面板四（Width=750pxHeight=350pxLayout=Anchor）"
Layout="Anchor">

<Items>

<ext:FormID="Form5"ShowBorder="False"BodyPadding="5px"AnchorValue="100%"EnableBackgroundColor="true"

ShowHeader="False"runat="server">

<Rows>

<ext:FormRow>

<Items>

<ext:TextBoxID="TextBox5"Label="用户名"runat="server">

</ext:TextBox>

<ext:TextBoxID="TextBox8"Label="所在班级"runat="server">

</ext:TextBox>

</Items>

</ext:FormRow>

<ext:FormRow>

<Items>

<ext:TextBoxID="TextBox6"Label="所在年级"runat="server">

</ext:TextBox>

<ext:ButtonID="Button11"Text="搜索"runat="server">

</ext:Button>

</Items>

</ext:FormRow>

</Rows>

</ext:Form>

<ext:PanelID="Panel8"ShowBorder="True"ShowHeader="false"AnchorValue="100%-62"

Layout="Fit"runat="server">

<Toolbars>

<ext:ToolbarID="Toolbar2"runat="server">

<Items>

<ext:ButtonID="Button8"Text="按钮一"runat="server">

</ext:Button>

<ext:ButtonID="Button9"Text="按钮二"runat="server">

</ext:Button>

</Items>

</ext:Toolbar>

</Toolbars>

<Items>

<ext:GridID="Grid2"Title="Grid2"PageSize="3"ShowBorder="false"ShowHeader="False"

runat="server"EnableCheckBoxSelect="True"DataKeyNames="Id,Name"EnableRowNumber="True">

<Columns>


//
此处省略...

</Columns>

</ext:Grid>

</Items>

</ext:Panel>

</Items>

</ext:Panel>

[/code]

你可能会问：这里的62px是怎么算出来的？

这个值还真不是算出来的，而是通过Firebug查看无边框两行的Form控件渲染后的实际高度，当然你也可以明确指定此Form控件的Height为62px。





小结
锚点布局是ExtAspNet布局中相对复杂，不易掌握的一类布局，不过在实际项目中，我们通常会使用相对简单的垂直盒子布局或水平盒子布局来取代锚点布局，只有在必须使用锚点布局的时候才会考虑锚点布局。下面的几篇文章，我们会接着学习列布局、行布局、垂直盒子布局、水平盒子布局、绝对定位布局和表格布局，请继续关注。

注：《ExtAspNet秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录官方论坛
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航