Sencha Touch 2.0 组件：Carousels、List、TabPanel 之用法简介

Carousels 组件

Carousels，翻译过来“传送带”的意思，顾名思义，仿佛屏幕背后就有一传送带，用户发出向左或向右的指令，即可命令传送带“移动”。移动设备上的屏幕就是当前显示的内容。在中间的那个“一点点”图案即为指示器，指示器可以告诉你剩余有多种张待现实的页面。

与其他组件那样，Carousels 可适用于水平或垂直的方向。下面例子将建立一个简单的水平方向的 Carousels 组件：

[javascript] view plaincopy

1. Ext.create('Ext.Carousel', {  
2.     fullscreen: true,  
3.   
4.     defaults: {  
5.         styleHtmlContent: true  
6.     },  
7.   
8.     items: [  
9.         {  
10.             html : 'Item 1',  
11.             style: 'background-color: #5E99CC'  
12.         },  
13.         {  
14.             html : 'Item 2',  
15.             style: 'background-color: #759E60'  
16.         },  
17.         {  
18.             html : 'Item 3'  
19.         }  
20.     ]  
21. });  

试试在这个组件上面滑动一下手指，组件就会响应你产生切换的效果，当然同时也会更新指示器。下面是一个垂直方向的例子：

[javascript] view plaincopy

1. Ext.create('Ext.Carousel', {  
2.     fullscreen: true,  
3.     direction: 'vertical',  
4.   
5.     defaults: {  
6.         styleHtmlContent: true  
7.     },  
8.   
9.     items: [  
10.         {  
11.             html : 'Item 1',  
12.             style: 'background-color: #759E60'  
13.         },  
14.         {  
15.             html : 'Item 2',  
16.             style: 'background-color: #5E99CC'  
17.         }  
18.     ]  
19. });  

以上代码效果如下：

毫无疑问，Carousels 即是一个容器，所以我们可以放任何东西在里面，好比下面的，我们把一个列表组件和表单组件分别放入 Carousels 里头：

[javascript] view plaincopy

1. Ext.create('Ext.Carousel', {  
2.     fullscreen: true,  
3.   
4.     items: [  
5.         {  
6.             xtype: 'list',  
7.   
8.             items: {  
9.                 xtype: 'toolbar',  
10.                 dock: 'top',  
11.                 title: 'Sencha Touch Team'  
12.             },  
13.   
14.             store: {  
15.                 fields: ['name'],  
16.                 data: [  
17.                     {name: 'Rob'},  
18.                     {name: 'Ed'},  
19.                     {name: 'Jacky'},  
20.                     {name: 'Jamie'},  
21.                     {name: 'Tommy'},  
22.                     {name: 'Abe'}  
23.                 ]  
24.             },  
25.   
26.             itemTpl: '{name}'  
27.         },  
28.         {  
29.             xtype: 'fieldset',  
30.             items: [  
31.                 {  
32.                     xtype: 'toolbar',  
33.                     dock: 'top',  
34.                     title: 'Login'  
35.                 },  
36.                 {  
37.                     xtype: 'textfield',  
38.                     label: 'Name'  
39.                 },  
40.                 {  
41.                     xtype: 'passwordfield',  
42.                     label: 'Password'  
43.                 }  
44.             ]  
45.         }  
46.     ]  
47. });  

以上代码效果如下：

List 组件

List 组件的意思就是把 Store 里的数据渲染成为页面上的一笔笔条目。List 属于 DataView 的子类，继承了 DataView 的大部分能力。List 在 DataView de 基础上加入属于其自身的能力有：

• 将个条目项进行分组，还可以制作索引条（index bar）、固定头部（pinned header）
• 为每一个项设置反闭包式（disclosure）的图标
• 为每一个项设置图标和标签

试试渲染一个 List，用静态的数据：

[javascript] view plaincopy

1. Ext.create('Ext.List', {  
2.     store: {  
3.         fields: ['name'],  
4.         data: [  
5.             {name: 'Cowper'},  
6.             {name: 'Everett'},  
7.             {name: 'University'},  
8.             {name: 'Forest'}  
9.         ]  
10.     },  
11.   
12.     itemConfig: {  
13.         tpl: '{name}'  
14.     }  
15. });  

执行以上代码，其中一个步骤就是会替 Store 里面的每一笔记录渲染一个 ListItem。下面的工作是为 List 添加事件侦听器：

[javascript] view plaincopy

1. Ext.create('Ext.List', {  
2.     listeners: {  
3.         select: function() {  
4.             alert('tapped on ' + )  
5.         }  
6.     },  
7.   
8.     //store and itemConfig as before  
9. });  

加载远程数据

若要从 WebService 那里获取远程数据，这种场景也是非常常见的。该怎么做？

使用 TabPanel

Tab 面板在用户切换多个页面的时候非常有用。Tab 面板中包含多个 Tab，每个单独的 Tab 又是一个个 Component 组件。当点击候选栏时便会显示 Tab。候选栏既可以在屏幕的上方，也可以位于下方。候选栏可以制定其标题 title 及 图标 icon。

下面就是一个位于底部的 Tab Panel 例子：

[javascript] view plaincopy

1. Ext.create('Ext.TabPanel', {  
2.     fullscreen: true,  
3.     tabBarPosition: 'bottom',  
4.   
5.     defaults: {  
6.         styleHtmlContent: true  
7.     },  
8.   
9.     items: [  
10.         {  
11.             title: 'ddd',  
12.             iconCls: 'home',  
13.             html: 'fdfdsfdsdfds Screen'  
14.         },  
15.         {  
16.             title: 'Contact',  
17.             iconCls: 'user',  
18.             html: 'Contact Screen'  
19.         }  
20.     ]  
21. });  

以上代码效果如下：

面板中的每一个子 Tab 都被定义在 items 的数组之中。Tab 配置的方法也非常简单，代码如下（不过这是位于顶部的候选栏）：

[javascript] view plaincopy

1. Ext.create('Ext.TabPanel', {  
2.     fullscreen: true,  
3.   
4.     defaults: {  
5.         styleHtmlContent: true  
6.     },  
7.   
8.     items: [  
9.         {  
10.             title: 'Home',  
11.             html: 'Home Screen'  
12.         },  
13.         {  
14.             title: 'Contact',  
15.             html: 'Contact Screen'  
16.         }  
17.     ]  
18. });  

以上代码效果如下

动画 Animation

Tab 面板默认情况下，Tab 面板切换的时候是带有“滑动（slide）”的动画效果的。如果你想改变默认的动画效果，可以在 layout 下面的 animation 配置项中作修改。比如现在我们修改为“渐褪（fade）”的效果：

[javascript] view plaincopy

1. Ext.create('Ext.TabPanel', {  
2.     fullscreen: true,  
3.   
4.     defaults: {  
5.         styleHtmlContent: true  
6.     },  
7.   
8.     layout: {  
9.         type: 'card',  
10.         animation: {  
11.             type: 'fade'  
12.         }  
13.     },  
14.   
15.     items: [  
16.         {  
17.             title: 'Home',  
18.             html: 'Home Screen'  
19.         },  
20.         {  
21.             title: 'Contact',  
22.             html: 'Contact Screen'  
23.         }  
24.     ]  
25. });