使用布局的优势

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

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

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. Action<T> 和 Func<T> 委托
			
    概述: 除了为每个参数和返回类型定义一个新委托类型之外,可以使用Action<T> 和 Func<T> 委托. Action<T> Action<T>委 ...
    
			
    2. 
						
  2. struts2 JS获取上传文件的绝对路径，兼容IE和FF
			
    因为file控件上传失败后会自动清空,所以使用文本框来保存上传路径,而且在不同的浏览器下,控件的样式也需要兼容.下面是自己用到的实例 // 初始化判断浏览器的版本,根据版本的不同使用不同的样式func ...
    
			
    3. 
						
  3. 高放的c++学习笔记之lambda表达式
			
    lambda表达式:可以让代码看起来更整洁,有些结构简单且用的次数少的函数可以用lambda表达式替代, 通常结构是这样的[捕获列表](参数列表){函数部分} 捕获列表: lambda表达式如果在一个 ...
    
			
    4. 
						
  4. 多维背包  hrbudt 1335 算法与追MM
			
    hrbust #include<string.h> //多进制储存数,第i位进制维back[i]+1,可以避免重复 #include<stdio.h> using namesp ...
    
			
    5. 
						
  5. CSS实现三角形效果
			
    类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果.这里讲一下是讲自己使用HTML+CSS实现三角形的方式. 为了能够熟悉的使用HTML+CSS构建三角形,我们首 ...
    
			
    6. 
						
  6. ios NSKeyedArchiver 保存对象与对象数组
			
    废话不说,直接上代码 // // CommunityTool.h // SmartCommunity // // Created by chenhuan on 15/9/2. // Copyright ...
    
			
    7. 
						
  7. CREATE DATABASE
			
    CREATE DATABASE IF NOT EXISTS `focusdata` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;USE `fo ...
    
			
    8. 
						
  8. 使用laravel的任务调度（定时执行任务）
			
    laravel中有一个很强大上的功能,只需要在服务器上添加一个cron条目,就可以定时执行所有的laravel任务. 现在有如下数据表: 我想让cron表中的cron字段的值每分钟增加1,那么我需要如 ...
    
			
    9. 
						
  9. maven POM.xml 标签详解
			
    pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url,项目的依赖性,以 ...
    
			
    10. 
						
  10. Cmake调用NSIS（一个可执行文件，其实就是一个编译器）编译NSIS脚本问题研究
			
    技术经理说,可以用Cmake当中的add_custom_command,add_custom_target命令来使用. 我初次研究了下,add_custom_command应该用官方文档中说明的第二种 ...
    
			
    11.