在Sencha Touch 2.0中使用设计布局

移动开发 移动应用
在你的应用程序中,布局用来描述组件的大小和空间位置信息。例如,就一个电子邮件的客户端举例来说,它有一个固定在屏幕左侧的邮件列表,占屏幕宽度的1/3;在屏幕剩余的右侧空间,有一个查看邮件具体内容的浏览面板。

导言及Hbox布局(水平布局)

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

 

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

  1. Ext.create('Ext.Container', { 
  2.  
  3. fullscreen: true, 
  4.  
  5. layout: 'hbox', 
  6.  
  7. items: [ 
  8.  
  9.  
  10. xtype: 'panel', 
  11.  
  12. html: 'message list', 
  13.  
  14. flex: 1 
  15.  
  16. }, 
  17.  
  18.  
  19. xtype: 'panel', 
  20.  
  21. html: 'message preview', 
  22.  
  23. flex: 2 
  24.  
  25.  
  26.  
  27. }); 

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

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

VBox布局(垂直布局)

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

 

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

  1. Ext.create('Ext.Container', { 
  2.  
  3. fullscreen: true, 
  4.  
  5. layout: 'vbox', 
  6.  
  7. items: [ 
  8.  
  9.  
  10. xtype: 'panel', 
  11.  
  12. html: 'message list', 
  13.  
  14. flex: 1 
  15.  
  16. }, 
  17.  
  18.  
  19. xtype: 'panel', 
  20.  
  21. html: 'message preview', 
  22.  
  23. flex: 2 
  24.  
  25.  
  26.  
  27. }); 

在这个例子中,如果容器的高度为300像素,那么***个面板(FLEX:1)的高度为100像素,第二个面板(FLEX:2)高度为200像素。 可以参见VBox的文档以获取更多的例子。

Card布局(卡片布局)

有时你想将展现多个充满信息的屏幕,但现实是,你只有一个小屏幕可用。TabPanels和Carousels都能够让你在同一时间看到你想展示的诸多屏幕中的一个,它们都是使用Card布局来实现的。

卡片布局在其应用的容器中占满整个空间,并使得当前活动的项目完全填满该容器,并隐藏的其余的项目。Card布局允许你选择任何一个项目作为当前可见的项目,但在同一时间只能显示一个:

 

在这个例子中,灰色方块是我们的容器,它里面的蓝色方块是当前活跃的项目。其他三个项目在视图中是隐藏的,但这三个隐藏项目可以替换成为当前显示的项目。通常并不直接创建Card布局,你可以这样来实现:

  1. var panel = Ext.create('Ext.Panel', { 
  2.  
  3. layout: 'card', 
  4.  
  5. items: [ 
  6.  
  7.  
  8. html: "First Item" 
  9.  
  10. }, 
  11.  
  12.  
  13. html: "Second Item" 
  14.  
  15. }, 
  16.  
  17.  
  18. html: "Third Item" 
  19.  
  20. }, 
  21.  
  22.  
  23. html: "Fourth Item" 
  24.  
  25.  
  26.  
  27. }); 
  28.  
  29. panel.getLayout().setActiveItem(1); 

在这里,我们创建一个具有卡片布局的面板,在***一句代码中设置第二个项目为该面板的显示项(数组的下标是从0开始的,所以1代表第二项)。通常情况下,你***使用一个Tab Panel或Carousel。

Fit布局(填充布局)

填充布局(Fit Layout)可能是最简单的布局了。它的作用就是使一个子组件撑满它所在的父容器。

 

例如,如果你有一个200像素*200像素的容器,并为它建立一个独立的子组件并将该容器的布局设置为“Fit布局”,那么子组件也将是200像素*200像素:

  1. var panel = Ext.create('Ext.Panel', { 
  2.  
  3. width: 200, 
  4.  
  5. height: 200, 
  6.  
  7. layout: 'fit', 
  8.  
  9. items: { 
  10.  
  11. xtype: 'panel', 
  12.  
  13. html: 'Also 200px by 200px' 
  14.  
  15.  
  16. }); 
  17.  
  18. Ext.Viewport.add(panel); 

Docking(停靠)

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

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

 

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

  1. Ext.create('Ext.Container', { 
  2.  
  3. fullscreen: true, 
  4.  
  5. layout: 'hbox', 
  6.  
  7. items: [ 
  8.  
  9.  
  10. dock: 'top', 
  11.  
  12. xtype: 'panel', 
  13.  
  14. height: 20, 
  15.  
  16. html: 'This is docked to the top' 
  17.  
  18. }, 
  19.  
  20.  
  21. xtype: 'panel', 
  22.  
  23. html: 'message list', 
  24.  
  25. flex: 1 
  26.  
  27. }, 
  28.  
  29.  
  30. xtype: 'panel', 
  31.  
  32. html: 'message preview', 
  33.  
  34. flex: 2 
  35.  
  36.  
  37.  
  38. }); 

你可以在容器中增加多个停靠在其中的组件,只需要在你想停靠的组件上简单的设置Dock属性就可以了。你可以将组件停靠在父容器的任意一边。

例如,我们可以在之前的vbox布局中将一个新的组件停靠在父容器的左侧:

 

我们可以指定新增的组件的dock属性为"left",即可实现此例。

  1. Ext.create('Ext.Container', { 
  2.  
  3. fullscreen: true, 
  4.  
  5. layout: 'vbox', 
  6.  
  7. items: [ 
  8.  
  9.  
  10. dock: 'left', 
  11.  
  12. xtype: 'panel', 
  13.  
  14. width: 100, 
  15.  
  16. html: 'This is docked to the left' 
  17.  
  18. }, 
  19.  
  20.  
  21. xtype: 'panel', 
  22.  
  23. html: 'message list', 
  24.  
  25. flex: 1 
  26.  
  27. }, 
  28.  
  29.  
  30. xtype: 'panel', 
  31.  
  32. html: 'message preview', 
  33.  
  34. flex: 2 
  35.  
  36.  
  37.  
  38. }); 

你可以在父容器的每一侧同时停靠多个组件(例如,可以在底部同时停靠几个组件)。

延伸阅读

布局只是Sencha Touch2的一部分。如果要了解更多的关于此框架的信息以及了解它是如何运作的,我们建议你进一步参考以下内容:

Components and Containers

The Class System

The Data Package

Getting Started

在 2011年10月25日 20:33 被 威老 ***编辑

 

责任编辑:佚名 来源: 移动Web开发社区
相关推荐

2011-09-02 15:42:55

Sencha Touc布局

2011-09-02 15:58:38

Sencha Touc布局

2011-10-18 08:59:46

Sencha ToucHTML5

2011-09-02 15:18:49

Sencha Touc

2011-10-26 10:21:40

Sencha Touc组件

2012-01-10 13:21:33

Sencha Touc使用data包

2011-10-26 10:43:19

Sencha Touc

2012-05-01 20:57:26

Sencha Touc

2011-10-26 10:32:05

Sencha Touc数据视图

2011-09-30 14:15:10

Sencha ToucSencha Touc

2011-10-18 09:49:40

新特征Sencha Touc

2011-09-02 16:08:09

Sencha ToucAPI文档

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2010-11-22 10:31:17

Sencha touc

2011-09-05 14:09:06

Sencha Touc函数

2011-09-05 13:53:08

Sencha Touc列表

2011-09-05 11:23:26

EclipseSencha Touc框架

2011-09-05 12:49:59

Sencha Touc事件

2011-09-02 15:12:29

PhoneGapSencha Touc

2011-07-25 15:55:21

Sencha ToucHtml 5
点赞
收藏

51CTO技术栈公众号