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

最新推荐文章于 2023-05-10 16:37:46 发布
最新推荐文章于 2023-05-10 16:37:46 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： ext.net

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

分类： Ext.Net 2012-09-12 17:25   223人阅读   评论(0)   收藏   举报
asp.net server extjs layout webform ext


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 plain copy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Layout_Anchor.WebForm1" %>  
  2. <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.      <ext:ResourceManager runat="server" />  
  12.      <ext:Panel   
  13.           ID="Panel1"   
  14.           runat="server"   
  15.           Height="300px"   
  16.           Width="400px"   
  17.           Layout="AnchorLayout"   
  18.           Title="panel1">  
  19.        <Items>  
  20.            <ext:Panel   
  21.                ID="Panel2"   
  22.                runat="server"   
  23.                Anchor="100% -100"  
  24.                Title="Panel2">  
  25.            </ext:Panel>  
  26.        </Items>  
  27.        
  28.      </ext:Panel>  
  29.     </form>  
  30. </body>  
  31. </html>  


 

 示例二：

[html]   view plain copy
  1. <ext:ResourceManager runat="server" />  
  2.      <ext:Panel   
  3.           ID="Panel1"   
  4.           runat="server"   
  5.           Height="300px"   
  6.           Width="400px"   
  7.           Layout="AnchorLayout"   
  8.           Title="panel1">  
  9.        <Items>  
  10.            <ext:Panel   
  11.                ID="Panel2"   
  12.                runat="server"   
  13.                Anchor="100% 100"  
  14.                Title="panel2">  
  15.            </ext:Panel>  
  16.        </Items>  
  17.        
  18.      </ext:Panel>  

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

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

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

 

示例三：

[html]   view plain copy
  1. <ext:ResourceManager runat="server" />  
  2.     <ext:Panel   
  3.          ID="Panel1"   
  4.          runat="server"   
  5.          Height="300px"   
  6.          Width="400px"   
  7.          Layout="AnchorLayout"   
  8.          Title="panel1">  
  9.       <Items>  
  10.           <ext:Panel   
  11.               ID="Panel2"   
  12.               runat="server"   
  13.               Anchor="100% -100"  
  14.               Title="panel2">  
  15.           </ext:Panel>  
  16.           <ext:Panel   
  17.               ID="Panel3"   
  18.               runat="server"   
  19.               Anchor="100%"  
  20.               Height="100"  
  21.               Title="panel3">  
  22.           </ext:Panel>  
  23.       </Items>     
  24.     </ext:Panel>  

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

 

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

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

示例四：

如何实现下面这种布局？

 

正确代码是：

[html]   view plain copy
  1. <ext:ResourceManager runat="server" />  
  2.      <ext:Panel   
  3.           ID="Panel1"   
  4.           runat="server"   
  5.           Height="300px"   
  6.           Width="400px"   
  7.           Layout="AnchorLayout"   
  8.           Title="panel1">  
  9.        <Items>  
  10.            <ext:Panel   
  11.                ID="Panel2"   
  12.                runat="server"   
  13.                Anchor="100%"  
  14.                Height="100"  
  15.                Title="panel2">  
  16.            </ext:Panel>  
  17.            <ext:Panel   
  18.                ID="Panel3"   
  19.                runat="server"   
  20.                Anchor="100% 100"  
  21.                Title="panel3">  
  22.            </ext:Panel>  
  23.        </Items>     
  24.      </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的项目。

 

liuyibao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ext.Net 控件Anchor布局-锚点布局
快乐人生
09-12 4166
1、锚点布局       有两个关键点：         为父容器控件设置Layout属性为Anchor；         为每个子容器控件设置AnchorValue属性，用来指定子容器控件的锚点布局参数。 2、Anchor的取值 Anchor可以由两个值组成，中间以空格分隔；也可以由一个值组成，此时第二个值就是默认值。 这两个值分别表示水平的锚点值和垂直的锚点值。Anchor可以
Ext.net 控件纠结的布局（一）
dianrem321833的博客
08-16 112
公司需要用Ext.net控件做个bs项目。 于是马上动手研究，刚刚上手打算做个登录页，就遇到问题。 看来效果很牛的控件，用法也需要很独特才是。像我用惯了vs2005自带控件的人，可能需要好好转变下思维才行。 作为第二篇博客，打算就这个项目分享学习一下Ext.net这套控件的使用，和设计经验。 首先从简单的登录开始。 加载类库后发现不少新控件，layout系列，一看就是布局相关的...
ExtJS中的Anchor
evilcry2012的专栏
01-21 576
Anchor   （Anchor布局）  编辑 本词条缺少信息栏、名片图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！ 简介 ExtJS中的Anchor Anchor在ExtJS中用来布局，anchor值通常只能为负值OR非百分比值，正值没有意义。 Anchor布局，提供了一种灵活的布局方式，既可以为items中的每个组件指定与总体布局大小
EXT.NET的布局方式
小K的大师兄
12-08 2317
一、BorderLayout布局方式 BorderLayout布局方式：边框式布局方式，他是通过设置控件的Region属性来确定控件的布局
Ext的Anchor布局
huanyingjung的专栏
03-04 144
Anchor布局的例子： //Anchor Layout要点:"1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值" Ext.onReady(function() { var panel1 = new Ext.Panel({ ...
浅谈vue 锚点指令v-anchor的使用
10-16
今天小编就为大家分享一篇浅谈vue 锚点指令v-anchor的使用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
完整版窗口-控件锚点.rar
04-03
- 在.NET框架下的Windows Forms和WPF（Windows Presentation Foundation）中，控件类提供了Anchor和Dock属性来实现锚点功能。Anchor属性允许你指定控件锚定到哪几个边，而Dock属性则用于将控件固定到容器的某个边缘...
易语言模块窗口-控件锚点.rar
03-30
易语言模块窗口-控件锚点.rar 易语言模块窗口-控件锚点.rar 易语言模块窗口-控件锚点.rar 易语言模块窗口-控件锚点.rar 易语言模块窗口-控件锚点.rar 易语言模块窗口-控件锚点.rar
markdown-it-anchor:markdown-it的页眉锚点
05-03
页眉锚点。 英文| 用法 const md = require ( 'markdown-it' ) ( ) . use ( require ( 'markdown-it-anchor' ) , opts ) 看到一个 。 opts对象可以包含： 名称 描述 默认 level 在所选级别或所选级别数组上...
Ext form中的anchor属性还是别用了
郁也风 - 技术碎片
01-13 182
Ext form的各个field中有个anchor属性，可以用来根据窗口大小自动调整文本框的宽度，挺好的东西——嗯，看上去很美。 可惜丫的textarea的实现在IE 6下面有bug，像下面的代码，如果hideLabel不设置或者设置成了false（width也是没有的），那么这个textarea将显示不出来。 [code="javascript"] { id : 'f-res-...
.net winform中Anchor和Dock的用法
alpha的专栏
05-10 2912
“Anchor”和“Dock”两个属性是用来命令控件在调整大小时的动作。           Dock和Anchor通过将控件连接到它们父窗体的某个位置，而免除了使应用程序具有不可预知界面的麻烦。最好的一点就是设立这些属性不需要任何手写代码。所有事情都可以通过Visual Studio IDE中的点和单击来完成。                    Anchor属性 正如名称暗示的那样
Ext中anchor布局解释
evilcry2012的专栏
09-01 2568
Ext中anchor布局解释 博客分类：  ext extanchor布局  [size=large][size=medium]ext布局中的属性anchor:'100% 100%'貌似可以让面板自适应屏幕的分辨率  要点:  1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽  2.anchor值通常只能为负值(指非百分比值)，正值没有意义
Anchor和RPN的浅薄理解(二)-mmdetection中Anchor参数深层含义及FPN与RPN的联系
认真努力，做一只会飞的毛毛虫。
02-05 9782
看到标题肯定会想到mmdecection配置文件中下面三个参数，在训练时这三个参数是需要根据数据集和不同的网络结构进行调整的，开门见山： anchor_scales=[8] anchor_ratios=[0.5, 1.0, 2.0] anchor_strides=[4, 8, 16, 32, 64] anchor_scales：Anchor的基础尺寸的缩放比例，是控制Anchor大小最重要的参数。Anchor的基础尺寸在代码中与anchor_strides的数值相等，它代表着特征图中每一个点对应原始图
WPF 从0开始写笔记，全属性功能深度剖析 持续更新... 20231225
最新发布
一个编程的同学
05-10 1192
用途不同：DataTemplate主要用于定义数据绑定的模板，它将一个数据对象的属性绑定到UI元素上，并根据该数据对象的不同值来显示不同的UI元素。需要注意的是，Margin属性只会影响UI元素与其周围控件之间的空间，而不会影响UI元素本身的大小或位置。需要注意的是，CornerRadius属性只会影响UI元素的圆角效果，而不会影响UI元素本身的大小或位置。需要注意的是，direction属性只会影响元素周围的模糊效果的方向，并不会改变元素本身的颜色或其他视觉效果。
Extjs4----anchor布局
网站开发初中级代码参考-转载
09-10 136
anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。 用anchor布局时，用anchor属性来配置组件在父容器中的位置 anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开 Ext....
前端重要的H标签详解（干货！）最新版
热门推荐
宝藏女孩的成长日记
09-23 1万+
目录重要的H标签主要标签h系列标签主要用来做标题。h1到h6 依次缩小。p标签：段落。div标签：表示大的容器。span:放一些文本。a标签：超链接。img标签：增加背景图片块级标签和行内标签 重要的H标签 主要标签 h系列标签主要用来做标题。h1到h6 依次缩小。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head&g
目标检测系列一：RetinaNet之anchor
何以解忧 唯有专注
03-22 5337
前言 自进入吉大，开始硕士生活之后，本人便很少有时间写一些blog，毕竟忙起来之后时间真的比较紧，不过细想想感觉自己也没忙出个什么。这次，导师给安排的项目是病变细胞检测的项目（Emmmmm，这是我的第三个项目，我研一），在深度学习领域上，属于目标检测的范畴。我主要采用的是RetinaNet，那么今天简单总结一下anchor的相关知识。 什么是Anchor 为什么会出现anchor、anchor处...
利用Anchor和Dock属性管理WinForm控件
nevn00的专栏
05-31 1011
有一点让许多刚接触WinForms编程的开发者感到很棘手，就是在用户调整各种控件的大小时，怎样使它们的窗体保持同步，并与父窗体相称。这可以成为一种让人非常沮丧的情况，尤其是对于有着Web编程背景，转为WinForms的开发者来说。为了缓解这个问题，.NET框架允许你对子控件设置属性，命令在调整父窗体大小时，它们应该如何运作。用来命令控件在调整大小时动作的两个属性就是“Dock”和“Anch
Ext.Net控件基础教程：布局、事件与数据库交互
本文档主要介绍了EXT.NET框架中的一些基础控件及其使用方法，包括布局管理、事件处理、Grid的绑定与操作以及表单和DatePicker控件的应用。 EXT.NET是一个基于.NET Framework的开源JavaScript库，它扩展了Sencha Ext...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值