介绍和HBox

布局描述了在您的应用程序的的大小和位置。例如，一个电子邮件客户端可能具有固定到左边的消息的列表，以说，可用的宽度的三分之一，和一个消息观看面板中的屏幕的其余部分。

我们可以做到这一点使用一个hbox布局和能力“柔性”内的项目。弯曲装置划分的可利用面积，根据每个子组件的柔性，因此要实现上面的例子中，我们可以设置这样的弯曲：

 

 

此代码很简单，我们只需要指定“盒子”的布局，在任何容器，然后提供一个Flex每个子组件（在这种情况下，面板）：

('',{
                fullscreen:true,    layout:'hbox',    items:[{
                        xtype:'panel',            html:'message list',            flex:1},{
                        xtype:'panel',            html:'message preview',            flex:2}]});

这将创建一个填满整个屏幕，并在它里面创建一个邮件列表面板和预览面板。它们的相对柔性的configs中的1和2装置的消息列表中会占用可用的宽度的三分之一，与预览采取其它三分之二。如果我们的集装箱的第一个项目是300像素宽，（FLEX：1）将是100px宽，第二个（软硬度：2），200像素宽。

hbox是最有用的的布局之一，因为它可以在很宽的各种水平的组合安排组件。更多的例子，请参阅。

VBox中的布局

很像是HBox，VBox是刚刚垂直而不是水平。同样地，我们可以可视化这一点很容易作为一组层叠的框：

 

 

几乎是相同的代码来创建这个上面的例子-我们只是交易的布局：“盒子” 的布局：“VBOX” ：

('',{
                fullscreen:true,    layout:'vbox',    items:[{
                        xtype:'panel',            html:'message list',            flex:1},{
                        xtype:'panel',            html:'message preview',            flex:2}]});

如果我们的集装箱为300像素高，第一个面板（FLEX：1）将100px高，第二个（FLEX：2），高200像素。更多的例子，请参阅。

卡布局

有时你想显示屏幕的信息，但你只得到了一个小屏幕工作。TabPanels和旋转木马，都让你看到一个屏幕一次，下它们都使用卡片布局。

卡片布局需要将它应用到和尺寸的当前活动的资料完全填补的集装箱，集装箱的尺寸。然后，它隐藏其余的物品，让你改变哪一个是当前可见的，但一次只显示一个：

 

 

这里的灰色方块是我们的容器，它里面的蓝色方块是当前激活的卡。其他三个卡从视图中隐藏，但可以在以后的交换。虽然它不是太普通了，直接创牌的布局，你可以这样做，是这样的：

var panel =('',{
                layout:'card',    items:[{
                        html:"First Item"},{
                        html:"Second Item"},{
                        html:"Third Item"},{
                        html:"Fourth Item"}]});panel.setActiveItem(1);

在这里，我们创建了一个面板与卡片布局和后来成立的第二项活动（活动项目的索引是从零开始的，所以对应的第二个项目）。通常情况下，你最好使用或。

适合布局

适合布局可能是最简单的布局。它的作用是使一个的孩子组成部分适合它的父容器的大小。

 

 

例如，如果你有一个200像素200像素的父容器，并给它一个单一的子组件和一个“合适”的布局，子组件也将是200像素200像素的：

var panel =('',{
                width:200,    height:200,    layout:'fit',    items:{
                    xtype:'panel',        html:'Also 200px by 200px'}});(panel);

请注意，如果你到一个合适的布局容器中添加一个以上的项目，只有第一个项目将是可见的。如果你想之间进行切换多个项目的布局，而不是使用该卡。

对接

每一个布局是它里面的对接项目。通过对接使您放置其他组件的父容器，调整大小的其他必要的项目上，右，下或左边缘。

例如，回来给我们的第一hbox的布局上面，让我们想象一下，这样我们要停靠在顶部的另一个组件：

 

 

这是经常使用的东西，如工具栏和横幅，并很容易实现停靠：“顶级”配置：

('',{
                fullscreen:true,    layout:'hbox',    items:[{
                        docked:'top',            xtype:'panel',            height:20,            html:'This is docked to the top'},{
                        xtype:'panel',            html:'message list',            flex:1},{
                        xtype:'panel',            html:'message preview',            flex:2}]});

您可以添加任意数量的对接项目，只需要提供你要停靠的子组件的码头配置。您还可以停靠任何一方的项目，例如，如果我们想做到这一点与我们以前的VBOX的例子：

 

 

我们可以实现通过指定停靠：'左'：

('',{
                fullscreen:true,    layout:'vbox',    items:[{
                        docked:'left',            xtype:'panel',            width:100,            html:'This is docked to the left'},{
                        xtype:'panel',            html:'message list',            flex:1},{
                        xtype:'panel',            html:'message preview',            flex:2}]});

您可以添加多个对接项目，每边（例如对接几个项目，“自下而上”的位置）。

包装和对齐（HBox中）

包装和对齐控制你的孩子如何元件排列在你的布局。“打包”是指轴的当前布局，而“对齐”是相反的。所以，在一个HBox布局的，包指的横轴，和对准垂直轴。下面的例子说明其中的差别。

 

 

包装和对齐（VBox中）

 

 

延伸阅读

布局是煎茶触摸生态系统只是其中的一部分。要了解更多有关的框架，以及它是如何工作的，我们提出以下建议：