使用布局的优势

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

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

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. android 自定义view之 TypeArray
			
    在定义view的时候,我们可以使用系统提供的属性,也可以自定义些额外的属性来设置自定义view的样式,这个时候,我们就需要TypeArray,字面意思就是Type 数组. 今天我们就讲讲如何自定义Vi ...
    
			
    2. 
						
  2. xcode下载方式
			
    1.去AppStore下载 对于Xcode老是在AppStore升级失败,而且下载慢,可取找到了这个--> 官方 Xcode .dmg 文件下载链接:超级传送门 2.开发者中心官网下载 可参考这 ...
    
			
    3. 
						
  3. mysql 存储过程与函数
			
    即事先经过编译并存储在数据库中的一段sql语言. 一.创建函数 创建格式: CREATE FUNCTION sp_name ([func_parameter[,...]]) RETURNS type  ...
    
			
    4. 
						
  4. jQuery对下拉框、单选框、多选框的处理
			
    下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] option[@selected]&quo ...
    
			
    5. 
						
  5. Flask Jinjia2 与 react
			
    Jinjia2 这是flask使用的模板工具,利用render_template方法可以方便的将后端的数据传给前端. 但是如果要使用react呢. 我如果在jsx中直接使用{{}}是不能输出变量的.  ...
    
			
    6. 
						
  6. 窗口过程 - Windows程序设计（SDK）006
			
    窗口过程 让编程改变世界 Change the world by program 内容节选: Windows 把这样一个窗口分为了客户区和非客户区,这里边白色的这一大片就是客户区,而这些标题栏.菜单栏 ...
    
			
    7. 
						
  7. 向asp.net项目中添加控件AspNetPager
			
    1.打开项目,把.dll文件放入项目中: 2.在工具栏中添加一个自定义选项卡
    
			
    8. 
						
  8. iOS学习之数据请求
			
    GET请求----同步连接 //GET请求 同步连接 - (void)handleSynchronize:(UIBarButtonItem *)item { //GET请求 //1.创建网址字符串;  ...
    
			
    9. 
						
  9. android Canvas drawText 文字居中
			
    1首先利用canvas获取画布的宽高, //获取屏幕的宽和高int width = canvas.getWidth();int height = canvas.getHeight(); 2获取文字的宽 ...
    
			
    10. 
						
  10. 【Beta】Phylab2.0: Postmortem
			
    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 主要解决同学们写物理实验报告时,处理数据的困难--巨大的计算量和不规范的物理报告数据处理格式.典型 ...
    
			
    11.