UsingLayoutsinSenchaTouch2作者：一夕QQ：944281625本系列文章为翻译文章，翻译自API文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。IntroandHBox布局对于大家应该很容易理解，就是对我们程序中组件的大小以及位置的一种控制。例如，一个email的客户端可能有在左侧有个消息列表，占据窗口的1/3，另外的部分则是一个消息的详细信息，占满屏幕的所剩部分。我们可以使用hbox布局方式，并对flex参数进行设定以达到我们预期的目的：我们只需要很简单的代码就能够实现该效果，代码如下：HYPERLINK"D:\\sencha\\docs\\index.html"\l"!/api/Ext-method-create"Ext.create('HYPERLINK"D:\\sencha\\docs\\index.html"\l"!/api/Ext.Container"Ext.Container',{fullscreen:true,layout:'hbox',items:[{xtype:'panel',html:'messagelist',flex:1},{xtype:'panel',html:'messagepreview',flex:2}]});该代码创建了一个简单的容器占据整个屏幕，在容器中创建了一个消息列表以及一个预览视图。其中flex是他们两者紧密相关的一个参数。其中的1和2，就表示把命名整体分成了3（1+2）份，消息列表占据1/3，消息预览则占据2/3。所有我们在使用水平布局的时候，一定要注意flex的值，来实现我们特定的界面需求。VBoxLayout和水平布局相对的就是垂直布局了，也就是vbox布局。我们可以轻松的实现下面的布局：实现代码如下：HYPERLINK"D:\\sencha\\docs\\index.html"\l"!/api/Ext-method-create"Ext.create('HYPERLINK"D:\\sencha\\docs\\index.html"\l"!/api/Ext.Container"Ext.Container',{fullscreen:true,layout:'vbox',items:[{xtype:'panel',html:'messagelist',flex:1},{xtype:'panel',html:'messagepreview',flex:2}]});由于只是改变了布局的方向，整体用法还是一直的，这里就不过多的讲述了，值得注意的是，在box布局中，flex是一个相当重要的参数，我们一定要注意。CardLayout有的时候，你可能需要展示许多的页面，但是我们的屏幕限制我们不能显示太多的内容，TabPanel和Carousel可以帮你解决这个问题，他们使用的都是Card布局。卡片布局很容易理解的，我们把我们需要显示的许多页面做成一个卡片，把他们罗在以前，我们只能看见最上面的一个卡片，也就是被激活的页面：为了展示效果，我们可以这样创建我们卡片布局：varpanel=HYPERLINK"D:\\sencha\\docs\\index.html"\l"!/api/Ext-method-create"Ext.create('HYPERLINK"D:\\sencha\\docs\\index.html"\l"!/api/Ext.Panel"Ext.Panel',{layout:'card',items:[{html:"FirstItem"},{html:"SecondItem"},{html:"ThirdItem"},{html:"FourthItem"}]});panel.setActiveItem(1);值得注意的是，我们卡片布局的下标是从0开始的，在上面的例子中，我们创建了3个页面，并把第二个激活显示出来。通常我们并不直接使用Card布局，通常使用TabPanel和Carousel。FitLayoutFit布局，其实是最简单的布局方式了，该布局方式就是让子窗口填满整个容器。例如，我们有一个200*200像素的容器，那么我们使用fit布局的时候就会把该容器填满，其中的子组件也会是200*200的。varpanel=HYPERLINK"D:\\sencha\\docs\\index.html"\l"!/api/Ext-method-create"Ext.create('HYPERLINK"D:\\sencha\\doc