下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

如何在Sencha Touch 2.0中使用设计布局

作者:课课家     来源: http://www.kokojia.com/点击数:505发布时间: 2015-11-06 10:44:51

标签: 系统教程Android应用开发教程

本学期的教学,小编为大家来讲解一下。

导言及Hbox布局(水平布局)  android项目实战
我们可以用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文档。
ox布局(垂直布局)
VBox布局与HBox布局基本类似,只是它的排列方向为垂直而不是水平。同样,我们可以简单的把它想像为如下两个盒子:

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

  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', {  android游戏开发教程
  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 被 威老 最后编辑

 更多的课程可到课课家参考。
赞(104)
踩(2)
分享到:
华为认证网络工程师 HCIE直播课视频教程