Sencha Touch 2 快速入门系列（四）-- 组件之标签面板(TabPanel)

本文已添加至Sencha Touch 2快速入门系列索引：http://blog.csdn.net/ardy_c/article/details/7544470

转载请注明出处：http://blog.csdn.net/ardy_c/article/details/7541524

标签面板（Tab Panel），无论在Web方面，还是在moblie app方面，都是我们常见的一种容器。它的优点在于在有限的空间里可以给用户展示更多的内容，并可以归类显示。因此，Sencha Touch 2也为大家提供了这种实用的组件。

我们先来看看一个简单的Tab Panel实例：

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

代码解析：

上面代码中，先用create方法创建了一个Ext.TabPanel。为其设置的属性中，有两个属性大家可能比较陌生——tabBarPosition和defaults。

tabBarPosition：用于设置Tab Panel的标签位置。你可以将标签的位置设置在顶部或者底部，对应的参数是top和bottom，默认为top。这个例子是将其设置于底部。

defaults：这个参数是为items里每个item设置一个默认的属性，这里设置的 styleHtmlContent:true 是让容器自动为容器内的html内容设置样式。

然后，我们在items数组里面添加了两个元素，其中每个元素代表着每个标签及其对应的内容。容器在初始化时，自动根据这它们的设置将标签定义和渲染出来。现在，我们来看看上面每个属性的作用：

title：用于设置TabPanel的标题，显示于标签上。

iconCls：用于设置标签上显示的图标，此项为可选。Sencha Touch 2内置有一套常用的图标，大家平时可以在一些菜单、标签或者列表上使用。除了自带的图标外，也可以通过自定义方式引入一些自己制作的图标，引入方法不在本文的介绍范围内，有兴趣的童孩们可以翻阅一下其它资料。

html：用于设置标签的html内容。这里添加了一些很简单的内容。

一个简单的例子出来了，大家运行代码体验一下。

运行完上面的例子，我们来点花哨点的。觉得上面那个滑动的效果不够酷？我们可以选择其它的变换方式，来看看下面的代码：

Ext.create('Ext.TabPanel', {
    fullscreen: true,

    defaults: {
        styleHtmlContent: true,
        tabBarPosition: 'bottom',
    },

    layout: {
        type: 'card',
        animation: {
            type: 'fade'
        }
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

代码解析：

相比于前一段代码，这段代码多设置了layout的属性，就是定义了布局的方式。这里是以card方式布局（type），并设置了变换的动画形式为fade（animation） --淡入淡出。变换的动画形式共有以下几种：slide（滑动）、fade（淡入淡出）、cover（覆盖）、cube、reveal、pop。具体是什么效果？还是自己体验一下比较真实。

通过了简单的步骤，我们就建立起一个很酷的Tab Panel了，是不是大大地提高了我们的开发速度的呢？下一篇，将给大家介绍一下Sencha Touch 2的布局模型。敬请关注。