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

最新推荐文章于 2024-05-14 21:43:31 发布

alisa525

最新推荐文章于 2024-05-14 21:43:31 发布

阅读量4.1k

点赞数

分类专栏： Ext.Net 文章标签： asp.net server extjs layout webform ext

Ext.Net 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

示例一：

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

示例二：

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

示例三：

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

示例四：

如何实现下面这种布局？

正确代码是：

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

http://www.cnblogs.com/sanshi/archive/2012/09/10/2678270.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的项目。

alisa525

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ext.Net 控件Anchor布局-锚点布局

1、锚点布局有两个关键点：为父容器控件设置Layout属性为Anchor；为每个子容器控件设置AnchorValue属性，用来指定子容器控件的锚点布局参数。 2、Anchor的取值Anchor可以由两个值组成，中间以空格分隔；也可以由一个值组成，此时第二个值就是默认值。这两个值分别表示水平的锚点值和垂直的锚点值。Anchor可以
复制链接

扫一扫