Sencha Touch 2.0布局

我们可以用hbox布局来实现这两个组件的伸缩Flex，伸缩Flex意味着我们能够把可用的空间按照每一个子组件的Flex系数进行分割。为了实现刚才我们说的邮件客户端的例子，我们可以像这样来设置伸缩：

这个例子的代码非常简单，我们仅需要为任意一个容器指定“hbox”布局，然后，为每一个处于其中的组件分配一个Flex系数即可(在这个例子中，组件用的是面板-Panels)。

 
 

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

在这个例子中，我们创建了一个填满整个屏幕的容器，并在其内部创建了一个邮件列表面板和一个内容浏览面板。它们的Flex系数分别为1和2(左侧的面板Flex系数为1，右侧面板Flex系数为2)，这意味着左侧面板将占去1/3的宽度，右侧面板将占用其余2/3的宽度。如果我们的容器宽度为300像素，那么左侧的面板的宽度为100像素，右侧面板的宽度为200像素。

hbox是最有用的布局之一，它可以在水平方向组合排列组件。更多的例子，请参阅的HBox文档。

VBox布局(垂直布局)

VBox布局与HBox布局基本类似，只是它的排列方向为垂直而不是水平。同样，我们可以简单的把它想像为如下两个盒子：

这段代码几乎与上一个例子的代码相同，我们仅仅是把容器的布局属性设置为"vbox"：

?
  
  
layout:?'vbox',248); text-indent:28px; font-family:宋体; font-size:14px; line-height:28px"> 在这个例子中，如果容器的高度为300像素，那么第一个面板(FLEX：1)的高度为100像素，第二个面板(FLEX：2)高度为200像素。 可以参见VBox的文档以获取更多的例子。
 
 Card布局(卡片布局)
 
 有时你想将展现多个充满信息的屏幕，但现实是，你只有一个小屏幕可用。TabPanels和Carousels都能够让你在同一时间看到你想展示的诸多屏幕中的一个，它们都是使用Card布局来实现的。
 
 卡片布局在其应用的容器中占满整个空间，并使得当前活动的项目完全填满该容器，并隐藏的其余的项目。Card布局允许你选择任何一个项目作为当前可见的项目，但在同一时间只能显示一个：
 
 
 

 
 在这个例子中，灰色方块是我们的容器，它里面的蓝色方块是当前活跃的项目。其他三个项目在视图中是隐藏的，但这三个隐藏项目可以替换成为当前显示的项目。通常并不直接创建Card布局，你可以这样来实现：
 
var?panel?=?Ext.create('Ext.Panel',?{?
  
  
?
  
  
layout:?'card',?
  
  
?
  
  
items:?[?
  
  
?
  
  
{?
  
  
?
  
  
html:?"First?Item"?
  
  
?
  
  
},?
  
  
?
  
  
{?
  
  
?
  
  
html:?"Second?Item"?
  
  
?
  
  
},?
  
  
?
  
  
{?
  
  
?
  
  
html:?"Third?Item"?
  
  
?
  
  
},?
  
  
?
  
  
{?
  
  
?
  
  
html:?"Fourth?Item"?
  
  
?
  
  
}?
  
  
?
  
  
]?
  
  
?
  
  
});?
  
  
?
  
  
panel.getLayout().setActiveItem(1);?
 
 
 
 在这里，我们创建一个具有卡片布局的面板，在最后一句代码中设置第二个项目为该面板的显示项(数组的下标是从0开始的，所以1代表第二项)。通常情况下，你最好使用一个Tab Panel或Carousel。
 
 Fit布局(填充布局)
 
 填充布局(Fit Layout)可能是最简单的布局了。它的作用就是使一个子组件撑满它所在的父容器。
 
 
 

 
 例如，如果你有一个200像素*200像素的容器，并为它建立一个独立的子组件并将该容器的布局设置为“Fit布局”，那么子组件也将是200像素*200像素：
 
?
  
  
width:?200,?
  
  
?
  
  
height:?200,?
  
  
?
  
  
layout:?'fit',?
  
  
?
  
  
items:?{?
  
  
?
  
  
xtype:?'panel',?
  
  
?
  
  
html:?'Also?200px?by?200px'?
  
  
?
  
  
}?
  
  
?
  
  
});?
  
  
?
  
  
Ext.Viewport.add(panel);?
 
 

Docking(停靠)

每一种布局均具备在其中“停靠”组件的功能。“停靠”功能能够使你将新增的组件放置在父容器的顶部、右侧、底部和左侧，并会自动重新分配其余组件所占的空间大小。

例如，回到前面我们第一个布局：hbox布局，让我们想象一下，我们要停靠在顶部的一个新增组件，如下图的蓝色部分：

这种停靠经常用来实现toolbar和banner等，并很容易就通过这样的语句 Dock:'top' 来实现：

?
  
  
items:?[?
  
  
?
  
  
{?
  
  
?
  
  
dock:?'top',?
  
  
?
  
  
xtype:?'panel',?
  
  
?
  
  
height:?20,?
  
  
?
  
  
html:?'This?is?docked?to?the?top'?
  
  
?
  
  
},248); text-indent:28px; font-family:宋体; font-size:14px; line-height:28px"> 你可以在容器中增加多个停靠在其中的组件，只需要在你想停靠的组件上简单的设置Dock属性就可以了。你可以将组件停靠在父容器的任意一边。
 
 例如，我们可以在之前的vbox布局中将一个新的组件停靠在父容器的左侧：
 
 
 

 
 我们可以指定新增的组件的dock属性为"left",即可实现此例。
 
?
  
  
items:?[?
  
  
?
  
  
{?
  
  
?
  
  
dock:?'left',?
  
  
?
  
  
width:?100,?
  
  
?
  
  
html:?'This?is?docked?to?the?left'?
  
  
?
  
  
},248); text-indent:28px; font-family:宋体; font-size:14px; line-height:28px"> 你可以在父容器的每一侧同时停靠多个组件(例如，可以在底部同时停靠几个组件)。
 
 延伸阅读
 
 布局只是Sencha Touch2的一部分。如果要了解更多的关于此框架的信息以及了解它是如何运作的，我们建议你进一步参考以下内容：
 
 Components and Containers
 
 The Class System
 
 The Data Package
 
 Getting Started
 
 在 2011年10月25日 20:33 被 威老 最后编辑
 
 
 
? 
 

 
 
 
? 
 

 
 
 
?