您的位置：首页 > 其它

Ext.Net 控件Anchor布局-锚点布局

2013-08-28 23:05 281 查看


Ext.Net 控件Anchor布局-锚点布局

分类： Ext.Net2012-09-12
17:25 223人阅读 评论(0) 收藏 举报
asp.netserverextjslayoutwebformext

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的整型值

示例一：

[html] view
plaincopy

<%@ 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>



示例二：

[html] view
plaincopy

<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的帮助再来看下：



示例三：

[html] view
plaincopy

<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互换下位置不就行了？那就是下吧！

示例四：

如何实现下面这种布局？



正确代码是：

[html] view
plaincopy

<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，正好是我们所期望的结果！

/article/4676740.html

注：原文讲的是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的项目。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航