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。为其设置的属性中,有两个属性大家可能比较陌生——tabBarPositiondefaults

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的布局模型。敬请关注。



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值