原文：Exploring the Layout System in Ext JS 5 and Sencha Touch

布局系统是Sencha框架中最强大和最有特色的一个部分。布局要处理应用程序中每一个组件的尺寸和位置。在Ext JS和Sencha Touch直接有许多相似之处，尤其是现在Ext JS 5开始支持平板更是如此。下面让我们来探讨一下布局系统是如何跨域Sencha框架进行工作的。

布局简史

最基本的HTML一直都缺乏一个严格定义的布局系统。许多年来，由于CSS实现的差距，开发跨浏览器的网站和应用程序一直都非常具有挑战性。一些行业老手估计还记得需要针对不同的平台编写不同的float规则来实现简单两列布局。

Ext JS和Sencha Touch框架的目的，就是用来解决这些跨浏览器问题，以确保开发人员可将更多的时间花费在添加功能上，而不需要将太多时间花费在处理CSS的差异上。由于许多新的HTML和CSS标准已经通过浏览器厂商的努力变得越来越成熟，Sencha框架也在不断的提升对这些标准的支持，同时还保持向后兼容性，以便支持较旧的老系统。

无论是Ext JS 5，还是Sencha Touch，都提供了抽象的跨平台布局系统。尽管在实现方式上有所不同，但在API接口上，基本上使用的是相同的共享布局。它的基本目标就是通过一个干净简洁的JavaScript API来消除哪些与实现复杂布局有关的单调乏味的工作。

Sencha应用程序是由组件组成的。而容器是特定类型的组件，它可以在内部使用不同类型的布局来包含其他组件。通过分层容器和组件，就可以快速建立健壮的接口，且无需担心跨浏览器的怪异行为。

相似之处

尽管Ext JS和Sencha Touch是针对不同平台的，但他们都是HTML5框架，而且在许多高层次的概念上是一致。由于Ext JS和Sencha Touch在生成Web应用程序的模式是共享的，因而属性了其中一个框架的开发人员要去了解另外一个就会很容易。布局也不例外。

在Sencha Touch 2.3.1和Ext JS 5 beta，都支持以下布局：

自适应（Fit）

单独一个子组件填满父组件的空间（Touch）（Ext JS）

卡片（Card）

类似自适应布局，主要区别是在容器内包含多个子组件，而在给定的时间内只显示一个子组件，这通常会在标签页面板上使用。(Touch)(Ext JS)

水平盒子（HBox）

子组件是水平放置的。(Touch)(Ext JS)

垂直盒子（VBox）

  子组件是垂直放置的。 (Touch)(Ext JS)

浮动（Float）（Touch）/ 绝对（Absolute）（Ext JS）

  子组件通过top/left或者x/y坐标来定位。

在Ext JS和Sencha Touch之间使用这些布局的JavaScript API基本上是完全一样的，例如：

// Sencha Touch 2.3.1
Ext.create('Ext.Container', { 
    layout  : 'hbox',
    items  : [
        //...
    ]
});
 
// Ext JS 5.0.0
Ext.create('Ext.container.Container', { 
    layout  : 'hbox',
    items  : [
        //...
    ]
});

差异

由于Ext JS和Sencha Touch所支持的设备的范围是不同的，因而他们布局之间的差异主要在于特定目标平台的UI/UX之间的差异。

Ext JS一直倾向于桌面计算机，不过现在Ext JS 5已经开始支持平板电脑。而Sencha Touch，则提供了更适合于移动设备（手机、平板电脑和其他触屏设备）的体验。

因此，每个框架中的布局系统会有一些显著的差异。最明显的区别就是一些布局类只存在于某个框架，而在另外一个是没有的（详见下文）。其他差异很难去分辨是因为一直以来，某些共享布局是在HTML层实现的。

只存在于Ext JS的布局

边框（Border）

对于许多应用程序来说，在Viewport中包含north、south、east和center等区域的布局是比较典型的布局，（Ext JS）

Sencha Touch可通过停靠组件来实现类似功能（Touch）。

表格（Table）

子组件通过行和列进行定位（Ext JS）

列（Column）

类似于水平盒子布局或单行的表格布局（Ext JS）

锚定（Anchor）

  类似有垂直盒子布局，但用于可滚动的内容（Ext JS）

表单（Form）

  可轻松的对表单字段进行定位（Ext JS）

注意：对于Ext JS 5的表单布局，引入了一些改进。

居中（Center）

在父组件内将单个子组件居中显示（Ext JS）

对比Ext JS 5与Sencha Touch的水平布局

盒子布局也许是Ext JS和Sencha Touch中最受欢迎的布局，因为他们易于使用，且在水平方向或垂直方向上对组件进行定位的功能相当强大。盒子布局会自动处理组件在水平方向或垂直方向上的尺寸，尤其是在组件需要一个柔性的高度或宽度的时候（通过flex配置项来实现），特别有用。

下面来深入探讨一下水平盒子布局，以了解Ext JS和Sencha Touch是如何以不同的方式来实现相同的理念的