谈谈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配置项就能够了，只是。拆分条不能应用于中间区域。个中原因非常easy。在中间区域有4条与其它区域相连的边。假设在中间区域定义拆分条。那究竟是4条边都渲染拆分条，还是仅仅渲染当中一条？假设仅仅渲染当中一条，应当渲染哪一条呢？在其它区域就没这个问题，仅仅需渲染与中间区域相邻的那条边即可了。对于同区域有多个子组件的情况，该法则也是适用的。

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

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

具体有哪些可用的拆分条的配置项，能够參阅Ext.resizer.BorderSplitter的API文档。由于这个拆分条就是该类的实例。假设清楚知道Ext.resizer.BorderSplitter是一个组件类，哪该类有什么配置项能够用。心里也就大概有数了，除了哪些私有的配置项须要查阅API外。其余的基本就是Ext.Component的配置项了。

未完待续……

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