使用布局的优势

相对于为控件设置固定的宽度和高度，布局的重要意义在于子控件可以根据父控件的尺寸自动设置自己的尺寸，在页面尺寸改变时同样有效。如果你在项目中遇到类似如下的需求，就需要考虑布局了：

  • 面板填充整个页面，并根据页面尺寸自动改变大小；
  • 将整个页面划分为上下左右中四块；
  • 一个子面板宽度固定，另一个子面板占据剩余的全部宽度；
  • 一个子面板高度固定，另一个子面板占据剩余的全部高度；
  • 将一个面板浮动到页面的固定地方；
  • ....

FineUI中哪些控件可以参与布局?

凡是容器控件都可以参与布局，FineUI中很多控件都是从Container中继承下来的。这个从官方文档中可以明显看得出来。

FineUI中有哪些布局?

FineUI中有很多布局，通过Layout枚举类型我们可以清楚的看到这些布局类型。

从上图可以看出，很多布局类型以控件的形式表现出来，比如RegionPanel、Accordion、Form和SimpleForm以及TabStrip控件，这些控件会有单独的篇幅介绍，这里只介绍可以用于所有容器控件的布局类型。

布局之填充整个页面

让整个容器填充整个页面是一个常见需求，实现起来也很方便。设置PageManager的AutoSizePanelID为需要填充整个页面的容器控件ID。

布局之填充整个容器（Fit）

让一个控件充满另一个容器控件也是一个常见的需求，此时只需要为父容器控件设置Layout属性为Fit即可。

分析示例首页所使用的布局

从上图可以看出，这个首页分别使用了如下布局相关知识：

  • 通过PageManager的AutoSizePanelID属性将RegionPanel控件充满整个页面空间；
  • RegionPanel控件用来提供“上-左-中”的布局；
  • RegionPanel中的三个Region控件分别应用Layout=Fit，来使其内部的控件（分别为ContentPanel，Tree，TabStrip）填充整个Region。

下面来看下简化后的代码结构：

   1:  <ext:PageManager AutoSizePanelID="RegionPanel1" >
   2:  </ext:PageManager>
   3:  <ext:RegionPanel ID="RegionPanel1">
   4:      <ext:Region Position="Top" Layout="Fit">
   5:          <Toolbars>
   6:              <ext:Toolbar Position="Bottom"></ext:Toolbar>
   7:          </Toolbars>
   8:          <Items>
   9:              <ext:ContentPanel></ext:ContentPanel>
  10:          </Items>
  11:      </ext:Region>
  12:      <ext:Region Position="Left" Layout="Fit">
  13:          <Items>
  14:              <ext:Tree></ext:Tree>
  15:          </Items>
  16:      </ext:Region>
  17:      <ext:Region Position="Center" Layout="Fit">
  18:          <Items>
  19:              <ext:TabStrip>
  20:                  <Tabs>
  21:                      <ext:Tab></ext:Tab>
  22:                      <ext:Tab></ext:Tab>
  23:                      <ext:Tab></ext:Tab>
  24:                  </Tabs>
  25:              </ext:TabStrip>
  26:          </Items>
  27:       </ext:Region>
  28:  </ext:RegionPanel>

锚点布局的结构

锚点布局是ExtJS最早推出的几个布局之一，功能强大但相对复杂。本篇文章会详细分析锚点布局。

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

   1:  <ext:Panel Layout="Anchor">
   2:     <Items>
   3:        <ext:Panel AnchorValue="100% 30%"></ext:Panel>
   4:        <ext:Panel AnchorValue="100% 70%"></ext:Panel>
   5:     </Items>
   6:  </ext:Panel>

 

 

有两个关键点：

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

AnchorValue的取值

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

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

  • 百分值

    • AnchorValue="100% 60%"，表示此控件占据全部的宽度和60%的高度。
    • AnchorValue="100%"，此控件占据全部的宽度，高度自动。
  • 整型值（可以是正值或者负值）
    • AnchorValue="-100 -20"，表示此控件右边框距离父控件右边框100px，此控件下边框距离父控件下边框20px。
    • AnchorValue="100 20"，表示此控件右边框超出父控件右边框100px，此控件下边框超出父控件下边框20px。

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

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

通过示例认识AnchorValue的整型值

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

示例一：

   1:  <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" ShowBorder="True"
   2:      Layout="Anchor" ShowHeader="True" Title="Panel1">
   3:      <Items>
   4:          <ext:Panel ID="Panel2" AnchorValue="100% -100" EnableBackgroundColor="true" runat="server"
   5:              ShowBorder="True" ShowHeader="true" Title="Panel2">
   6:          </ext:Panel>
   7:      </Items>
   8:  </ext:Panel>




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
















示例二：




   1:  <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" ShowBorder="True"


   2:      Layout="Anchor" ShowHeader="True" Title="Panel1">


   3:      <Items>


   4:          <ext:Panel ID="Panel2" AnchorValue="100% 100" EnableBackgroundColor="true" runat="server"


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


   6:          </ext:Panel>


   7:      </Items>


   8:  </ext:Panel>
















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




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


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




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


示例三：




   1:  <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" ShowBorder="True"


   2:      Layout="Anchor" ShowHeader="True" Title="Panel1">


   3:      <Items>


   4:          <ext:Panel ID="Panel2" AnchorValue="100% -100" EnableBackgroundColor="true" runat="server"


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


   6:          </ext:Panel>


   7:          <ext:Panel ID="Panel3" AnchorValue="100%" Height="100" EnableBackgroundColor="true" runat="server"


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


   9:          </ext:Panel>


  10:      </Items>


  11:  </ext:Panel>
















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




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


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




示例四：


如何实现下面这种布局？




正确的实现代码如下：




   1:  <ext:Panel ID="Panel1" runat="server" Height="300px" Width="400px" ShowBorder="True"


   2:      Layout="Anchor" ShowHeader="True" Title="Panel1">


   3:      <Items>


   4:          <ext:Panel ID="Panel2" AnchorValue="100%" Height="100" EnableBackgroundColor="true"


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


   6:          </ext:Panel>


   7:          <ext:Panel ID="Panel3" AnchorValue="100% -100" EnableBackgroundColor="true" runat="server"


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


   9:          </ext:Panel>


  10:      </Items>


  11:  </ext:Panel>


 
















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


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


锚点布局的实际应用


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




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


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




   1:  <ext:Panel ID="Panel7" runat="server" EnableBackgroundColor="true" BodyPadding="3px"


   2:      ShowBorder="True" ShowHeader="True" Width="750px" Height="350px" Title="面板四（Width=750px Height=350px Layout=Anchor）"


   3:      Layout="Anchor">


   4:      <Items>


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


   6:              ShowHeader="False" runat="server">


   7:              <Rows>


   8:                  <ext:FormRow>


   9:                      <Items>


  10:                          <ext:TextBox ID="TextBox5" Label="用户名" runat="server">


  11:                          </ext:TextBox>


  12:                          <ext:TextBox ID="TextBox8" Label="所在班级" runat="server">


  13:                          </ext:TextBox>


  14:                      </Items>


  15:                  </ext:FormRow>


  16:                  <ext:FormRow>


  17:                      <Items>


  18:                          <ext:TextBox ID="TextBox6" Label="所在年级" runat="server">


  19:                          </ext:TextBox>


  20:                          <ext:Button ID="Button11" Text="搜索" runat="server">


  21:                          </ext:Button>


  22:                      </Items>


  23:                  </ext:FormRow>


  24:              </Rows>


  25:          </ext:Form>


  26:          <ext:Panel ID="Panel8" ShowBorder="True" ShowHeader="false" AnchorValue="100% -62"


  27:              Layout="Fit" runat="server">


  28:              <Toolbars>


  29:                  <ext:Toolbar ID="Toolbar2" runat="server">


  30:                      <Items>


  31:                          <ext:Button ID="Button8" Text="按钮一" runat="server">


  32:                          </ext:Button>


  33:                          <ext:Button ID="Button9" Text="按钮二" runat="server">


  34:                          </ext:Button>


  35:                      </Items>


  36:                  </ext:Toolbar>


  37:              </Toolbars>


  38:              <Items>


  39:                  <ext:Grid ID="Grid2" Title="Grid2" PageSize="3" ShowBorder="false" ShowHeader="False"


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


  41:                      <Columns>


  42:                          


//


此处省略...


  60:                      </Columns>


  61:                  </ext:Grid>


  62:              </Items>


  63:          </ext:Panel>


  64:      </Items>


  65:  </ext:Panel>














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


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




												


											
FineUI页面布局的更多相关文章
	

    
								
  1. 前端框架 EasyUI （2）页面布局 Layout
		
    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
    
		
    2. 
						
  2. Xamarin+Prism开发详解五：页面布局基础知识
		
    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
    
		
    3. 
						
  3. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
		
    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
    
		
    4. 
						
  4. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
		
    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
    
		
    5. 
						
  5. CSS3与页面布局学习总结（四）——页面布局大全
		
    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
    
		
    6. 
						
  6. 【Android】纯代码创建页面布局（含异步加载图片）
		
    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
    
		
    7. 
						
  7. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
		
    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
    
		
    8. 
						
  8. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
		
    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
    
		
    9. 
						
  9. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
		
    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. （转）ASP.NET 伪静态
			
    1.伪静态:http://www.cnblogs.com/Default.html 目的就是为了赢得更多的收入,至于真否,待SEOer 解答,正如文字所说,伪静态就是假的静态. 2.准备工作:下载Ur ...
    
			
    2. 
						
  2. arcmap从excel坐标数据生成点shp文件
			
    概述 今天试图在ArcMap中将excel数据转成点文件,在"Display XY Data"的时候,无法选择X,Y字段,很是纳闷,原来Excel中列的格式是文本,导致无法选择.有 ...
    
			
    3. 
						
  3. shell中命令的执行流程
			
    在shell中,一个命令有3中写法: 1 可以直接写(Normal Command) 2 可以放在双引号中("Command") 3 可以放在单引号中('Comand') 这3中写 ...
    
			
    4. 
						
  4. uva 688 - Mobile Phone Coverage
			
    经典问题,矩形面积并. 解法:一.矩形分割,每个矩形的两个横坐标和两个纵坐标排序,这样得到2n*2n个区间,对这些区间依次判断是否包含在n个矩形中间即可.      二.扫描线.具体还没实现过. 详见 ...
    
			
    5. 
						
  5. 【Oracle】-【权限-ORA-04043】- ORA-04043: object "SYS"."V_$DATABASE" does not exist
			
    用非dba账号(但赋予了DBA角色)登录一个新的10g数据库想看下版本号, SQL> desc v$instance; ERROR: ORA-04043: object "SYS&qu ...
    
			
    6. 
						
  6. 直播 linux上的第一个c++程序
			
    这里用crt来直播吧: 登录到服务器上之后: 1.mkdir -p 建一个文件夹 2.ll 查看一下这个文件夹 3.cd 进入这个文件夹 4.vim 进行文本编辑 写完之后,按下esc中止输入模式,用 ...
    
			
    7. 
						
  7. SDWebImage 官方文档
			
    API documentation is available at CocoaDocs - SDWebImage Using UIImageView+WebCache category with UI ...
    
			
    8. 
						
  8. GCD 深入理解
			
    GCD 深入理解(一) 虽然 GCD 已经出现过一段时间了,但不是每个人都明了其主要内容.这是可以理解的:并发一直很棘手,而 GCD 是基于 C 的 API ,它们就像一组尖锐的棱角戳进 Object ...
    
			
    9. 
						
  9. mongoDB初探
			
    最近在努力学习node方面的东西,看别人的资料里提到最多用到的数据库还是mongoDB,早打算下载下来试一下,由于电脑新配置,网络也由于住的地方现在上不了网暂时用的手机4G网络在凑合,这里面也踩到了不 ...
    
			
    10. 
						
  10. FeatureClass Copy
			
    http://edndoc.esri.com/arcobjects/9.2/NET/c45379b5-fbf2-405c-9a36-ea6690f295b2.htm Method What is tr ...
    
			
    11.