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

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




    


    

     
     
       
           
           
       
     
     
    

 

 示例二：

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

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

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

 

示例三：

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

 

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

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

示例四：

如何实现下面这种布局？

 

正确代码是：

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

虽说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的项目。