谈谈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'}
]
});12345678910111213
容器渲染后可在页面看到下图所示的效果：
从代码中可以看到，要使用边框布局，要将容器的layout配置项定义为border，也可以使用以下定义方式：
layout:{ type: 'border'}123
各区域的设置，则需要在容器的子组件中通过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
}
},1234567
如果在一个区域有多个子组件，而且希望一个组件不在其他组件之间，而其中一个组件在其他组件之间，就不能使用这种方式定义，就必须在子组件中使用weight配置项来定义了，例如在上面示例的items中添加以下代码：
{region:'north',html:'north2', weight: -30},1
代码中，内容为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;' }123
具体有哪些可用的拆分条的配置项，可以参阅Ext.resizer.BorderSplitter的API文档，因为这个拆分条就是该类的实例。如 果清楚知道Ext.resizer.BorderSplitter是一个组件类，哪该类有什么配置项可以用，心里也就大概有数了，除了哪些私有的配置项需 要查阅API外，其余的基本就是Ext.Component的配置项了。
未完待续……
请大家尊重作者的辛勤劳动，未经允许，请不要转载本文，毕竟读者的支持是作者撰写文章的动力。