谈谈ExtJS的组件——容器与布局

在页面中，比較棘手的地方就是布局。而要实现布局。就得有能维护布局的容器。

能够说，在我试过和使用过的Javascript框架中，Ext JS的布局是做得最优秀的一个，而这得益于它强大的容器类和丰富的布局类。在本文将介绍Ext JS的容器组合和布局类。

容器：Ext.container.Container

容器的主要功能是管理其内部的组件。因而在继承Ext.Component的所有功能的基础上。加入了相应的用来处理内部组件的方法add、insert、remove和removeAll。

在配置项方法，则加入了items配置项用来加入内部组件，加入了layout配置项用来定义布局。

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

如今考虑这样一个问题。假设我要在容器中定义10个button，这样就要在容器的items里定义10个button的配置对象。在定义这些button的配置对象的时候，有些代码是同样，如“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”。就会非常easy受子组件的尺寸影响，极度easy在容器的右边出现空白，要花费非常多功夫去调整容器或者子组件的尺寸才干获得好的效果，这对于会自己主动依据浏览器调整尺寸的容器来说。绝对算不上是好的选择。使用水平盒子布局就不存在这种问题。由于位置是固定的，并且布局会自己主动调整。水平盒子布局唯一不好的地方是，在布局内放置的是输入字段，而又希望字段能通过TAB键来导航的时候。会发现字段的切换是先切换完第一列才跳到第二列。造成这种原因是由于浏览器中焦点的切换是先切换完一个顶层元素内的子元素。再切换到还有一个顶层元素的子组件。这个解决的办法也非常easy。为字段定义tabIndex即可了。

小结

容器事实上是一个非常easy的组件，但与其绑定的布局则是一个比較复杂的东西，尤其是在配置布局的时候，有些布局，仅仅须要在容器内简单做些定义即可了，如自适应布局和卡片布局，而有些布局则须要在子组件内也有相应的定义，如边框布局，因而会造成一些混乱，但假设熟悉了各种布局的实现方式和详细特点。就能够非常轻松自如的应付各类型的页面布局了。在下一篇文章，将详细介绍各种布局的用法。

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