谈谈Ext JS的组件——布局的使用方法

概述

在Ext JS中，包含两类布局：组件类布局和容器类布局。由于有些组件是有不同的组件组合而成的，如字段就由标题和输入框构成，他们之间也是存在布局关系的，而这就需要组件类布局来处理组件内自己特有的布局关系。如果我们不定义自己的组件，基本不需要使用到组件布局，知道就行了。本文主要介绍的是容器类布局，因为这个在开发中是必定会使用到的。

注意：在Ext JS中，字段有两层意思。在模型中所说的字段，与数据库中的字段的意义是一样。字段的第二层意思是指表单中的输入组件，这个大家要注意区分。

自动布局：Ext.layout.component.Auto

这个好理解， 就是有一个放东西的盘子，你把东西放进去，东西原来是什么样子就是什么样子。如果盆子可以放大或缩小，盆子里已有的东西也不会随盆子的变化而变化。

这个布局是容器的默认布局。一般情况下，是不建议使用自动布局的，因为这个用户体验性太差了。大家只要知道有这样一种布局就行了。

边框布局

边框布局是一种比较常用的布局，一般应用在界面的整体布局上。它最大的特色就是预设了南（south）、北（north）、东（east）、西（west）和中间（center）这5个区域，除了中间区域必须的外，其他的区域是可选的。在Ext JS 4.1及以后的版本中，除了中间区域是必须唯一的外，还可以放置任意多个（也可以为0个）相同的区域。下面通过一些示例来了解一下边框布局。

下面的代码将在一个400×400的容器内创建一个包含了5个区域、使用了默认配置的边框布局视图：

Ext.create('Ext.container.Container',{
    renderTo: Ext.getBody(),
    width:400,
    height:400,
    layout:'border',
    items:[
        {region:'north',html:'north'},
        {region:'south',html:'south'},
        {region:'center',html:'center'},
        {region:'west',html:'west'},
        {region:'east',html:'east'}
    ]
});

容器渲染后可在页面看到下图所示的效果：

从代码中可以看到，要使用边框布局，要将容器的layout配置项定义为border，也可以使用以下定义方式：

layout:{
    type: 'border'
}

各区域的设置，则需要在容器的子组件中通过region配置项来设置的，而区域的值就是东南西北中所对应的英文单词。

如果一个区域只有一个子组件，那么子组件的区域定义并没有次序要求，如先定义北才能定义西这样，只要定义好region配置项就行了。唯一要掌握的的规则是，中间区域必须有且是唯一的。

如果一个区域有多个子组件，就要注意定义次序了，区域中先定义的子组件会显示在前，后定义的显示在后，如在区域北定义了两个子组件，在items中，定义在前的会显示在最顶部，而定义在后则会显示在下面。

权重

在上面示例的图中，可以看到东西区域是包含在南北区域之间的，如果我想南北区域包含在东西区域之间要怎么处理呢？这可通过设置区域的权重值来实现。各区域的默认权重值如下：

* north: 20,

* south: 10,

* center: 0,

* west: -10,

* east: -20

从默认权重值可以看到，权重大的会优先获取容器空间，而权重小则只能等别的分完后再分。

修改区域的权重有两种方式，一种是在定义layout配置项的时候，在layout的配置对象中使用regionWeights配置项来定义，另一种是在子组件中使用weight配置项来定义。例如，如果希望南北区域放在东西区域之间，可以这样定义：

layout:{
    type:'border',
    regionWeights:{
        west:30,
        east:30
    }
},

如果在一个区域有多个子组件，而且希望一个组件不在其他组件之间，而其中一个组件在其他组件之间，就不能使用这种方式定义，就必须在子组件中使用weight配置项来定义了，例如在上面示例的items中添加以下代码：

{region:'north',html:'north2', weight: -30},

代码中，内容为north2的北区子组件的权重为-30，因而它会在东西区域之间，最终的效果如下图：

权重的设计让边框布局的设计更灵活了，可以说，目前流行的主界面布局，基本都可以使用边框布局设计出来。

拆分条（split bar）

在我们常用的Windows应用程序中，通过拆分条来改变两个区域之间的大小是一种很常见的功能，如资源管理器中的导航区域和文件列表区域，就可通过拆分条来改变两个区域之间的大小。在Ext JS中，这个功能当然是不能少的，而在边框布局中，是通过功能组件Ext.resizer.BorderSplitter来实现，它的父类是Ext.resizer.Splitter，而Ext.resizer.Splitter派生于Ext.Component。Ext.resizer.BorderSplitter的作用是在区域之间渲染一条拆分条，并绑定鼠标拖动事件，在鼠标产生拖动事件的时候重新计算区域的大小并调整拆分条的位置，从而模拟出拖动的效果。

要使用拆分条，只要在子组件的定义中添加split配置项就可以了，不过，拆分条不能应用于中间区域。个中原因很简单，在中间区域有4条与其他区域相连的边，如果在中间区域定义拆分条，那到底是4条边都渲染拆分条，还是只渲染其中一条？如果只渲染其中一条，应当渲染哪一条呢？在其他区域就没这个问题，只需渲染与中间区域相邻的那条边就行了。对于同区域有多个子组件的情况，该法则也是适用的。

一般来说，将split设置为true就可以使用拆分条。如果想更详细的设置拆分条，可以使用配置对象来设置，如拆分条默认的背景颜色太挫了，我要用红色作为它的背景色，可以这样设置：

split: {
    style:'background:red;'
}

具体有哪些可用的拆分条的配置项，可以参阅Ext.resizer.BorderSplitter的API文档，因为这个拆分条就是该类的实例。如果清楚知道Ext.resizer.BorderSplitter是一个组件类，哪该类有什么配置项可以用，心里也就大概有数了，除了哪些私有的配置项需要查阅API外，其余的基本就是Ext.Component的配置项了。

未完待续……

请大家尊重作者的辛勤劳动，未经允许，请不要转载本文，毕竟读者的支持是作者撰写文章的动力。