谈谈Ext JS的组件——容器与布局

概述

在页面中，比较棘手的地方就是布局。而要实现布局，就得有能维护布局的容器。可以说，在我试过和使用过的Javascript框架中，Ext JS的布局是做得最棒的一个，而这得益于它强大的容器类和丰富的布局类。在本文将介绍Ext JS的容器组合和布局类。

容器：Ext.container.Container

容器的主要功能是管理其内部的组件，因而在继承Ext.Component的全部功能的基础上，添加了对应的用来处理内部组件的方法add、insert、remove和removeAll。在配置项方法，则添加了items配置项用来添加内部组件，添加了layout配置项用来定义布局。

由于容器没有更改Ext.Component的渲染标记，因而，容器还是一个DIV而已，是一个轻量容器。

现在考虑这样一个问题，如果我要在容器中定义10个按钮，这样就要在容器的items里定义10个按钮的配置对象。在定义这些按钮的配置对象的时候，有些代码是相同，如“xtype:’button’”，那我就不得不复制粘贴9次，是不是觉得很烦？为了解决这个问题，在容器中特意添加了defaultType配置项，用来指定容器内默认组件的类型，如果没有特别设置，默认会使用面板（Ext.panel.Panel）作为默认组件。现在，默认组件解决了，但是如果有相同的配置项怎么办？这个可通过defaults配置项来实现。

组件查询

由于容器要管理它内部的组件，因而如何查找组件就成了所需的功能。在容器中，通过混入Ext.mixin.Queryable为容器添加了组件查询的功能。

在Ext JS 3，引入了Ext.getCmp方法，根据组件的id来查询组件，但对重复使用的视图以及大项目开发中，通常都会造成id冲突，因而，在Ext JS 4中引入了itemdId和组件查询类（Ext.ComponentQuery）。要根据itemId来查找组件，就必须先找到它的父容器，因为itemId的作用范围是它的直接父组件内的，也就是说，在别的容器，你可以定义相同的itemId，这样也不会造成id冲突，但在查询的时候要注意了，如果不是在直接父组件内查询itemId，可能找到的并不是你所需容器的组件，很可能是另外一个容器的组件，因而，要使用itemId查询组件，最好还是通过直接父组件进行查询。

组件查询类就有点类似于DOM查询，可以通过组件的id、itemId、类型、属性搭配通配符来查找组件。在Ext.mixin.Queryable类中，为容器添加了7个组件查询的方法，而我们开发中最常有的应该就是down方法，该方法的作用是用来查找符合传递给方法的选择符的第一个子组件。

组件查询虽然很方便很灵活，但是如果内部组件很多的时候，就可能存在性能问题，因而，在Ext JS 5，与视图控制器相匹配，引入了reference配置项，可在视图控制器使用lookupReference来查找组件，由于在视图控制器中，会为定义了reference配置项的组件建立缓存，因而查询起来相当快捷，建议多使用reference。具体有关reference的信息，可参阅《【翻译】在Ext JS 5种使用ViewControllers》一文。

布局

布局是与容器紧密相连的，就算在容器内没有定义配置项layout，容器也会使用默认的布局来渲染布局，例如，在一个空页面运行以下Ext JS代码创建一个800×800的空的容器：

Ext.create('Ext.container.Container',{
    renderTo: Ext.getBody(),
    width:800,
    height:800
});

会在firebug的HTML面板内看到以下THML代码：

<div id="container-1009" role="presentation" style="width:800px;height:800px;" class="x-container x-container-default x-border-box">
    <div role="presentation" class="x-autocontainer-outerCt" data-ref="outerCt" id="container-1009-outerCt" style="width: 100%; table-layout: fixed; height: 100%;">
        <div class="x-autocontainer-innerCt" role="presentation" style="" data-ref="innerCt" id="container-1009-innerCt">

        </div>
    </div>
</div>

在HTML代码中，最外一层的代码就是容器的DIV标记，而里面两层的DIV是布局的DIV标记。如果对以上代码有所怀疑，可以查看一下容器默认布局——自动布局（Ext.layout.container.Auto）的类定义文件，在文件内查找renderTpl属性，就可以看到自动布局的渲染模板了，对比一下模板的HTML代码就知道是否是布局的HTML代码了。

要注意的是，类似自适应布局或卡片布局这样的布局，是没有布局代码的，因为这些布局直接把容器内组件的顶层DIV的尺寸调整为容器的尺寸就行了，不需要辅助HTML标记来计算布局，而该内部组件的内部组件的布局是通过他的内部布局去计算的，不涉及它的父容器。

以上是了解和熟悉布局的一种很好的方法。大家可以更改容器的布局，然后在firebug中查看这些布局生成的HTML代码从而了解他们与容器之间的关系以及布局实现的方式，这样可加深布局的了解，在使用布局的时候，也就可以知道他们会生成什么样的HTML代码，会产生什么样的效果。例如，使用水平盒子布局和列布局都可以将容器划分为几列，如果了解了他们的实现方式，就会发现列布局是通过”float:left”来实现列的划分的，也就是子组件是先堆满一行，再堆砌第二行的方式来实现；而水平盒子则是使用绝对定位（position: absolute !important;）来实现列的划分的，也就是每列的子组件都是固定在他们列的DIV元素内的。这两种不同的实现方式也就决定了子组件的行为方式是不同，列布局中的子组件由于使用“float:left”，就会很容易受子组件的尺寸影响，极度容易在容器的右边出现空白，要花费很多功夫去调整容器或者子组件的尺寸才能获得好的效果，这对于会自动根据浏览器调整尺寸的容器来说，绝对算不上是好的选择。使用水平盒子布局就不存在这样的问题，因为位置是固定的，而且布局会自动调整。水平盒子布局唯一不好的地方是，在布局内放置的是输入字段，而又希望字段能通过TAB键来导航的时候，会发现字段的切换是先切换完第一列才跳到第二列。造成这样的原因是因为浏览器中焦点的切换是先切换完一个顶层元素内的子元素，再切换到另一个顶层元素的子组件，这个解决的办法也很简单，为字段定义tabIndex就行了。

小结

容器其实是一个很简单的组件，但与其绑定的布局则是一个比较复杂的东西，尤其是在配置布局的时候，有些布局，只需要在容器内简单做些定义就行了，如自适应布局和卡片布局，而有些布局则需要在子组件内也有相应的定义，如边框布局，因而会造成一些混乱，但如果熟悉了各种布局的实现方式和具体特点，就可以很轻松自如的应付各类型的页面布局了。在下一篇文章，将具体介绍各种布局的使用方法。

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