第3章面板与布局-3.2Tab面板组件

来源：互联网发布：silkn facetite 知乎编辑：程序博客网时间：2024/05/29 05:00

本节介绍ST 2.0中的Tab面板组件。Tab面板可以理解为一种卡片形状的面板，它们的展现形式很像一叠卡片，一张卡片直接叠放在另一张卡片之上或被另一张卡片覆盖，可以将一张卡片移动到顶部让它显示出来。

3.2.1 Tab面板组件的使用及示例

在ST2.0中，Tab（由Ext.tab.Panel类创建，继承Ext.Container,别名为Ext.tabPanel,可以直接使用Container类的各种配置选项、方法及事件）面板中包含标签与多个子组件，在2.0默认情况下，Tab组件中放置的子组件均为容器组件，可以通过单击不同的标签在屏幕上切换显示Tab面板中所包含的的各个子组件。可以通过Ext.TabPanel类的items配置选项来定义Tab面板中所包含的子组件。

<!DOCTYPE HTML><html manifest="" lang="en-US"><head>    <meta charset="UTF-8">    <title>Tab面板组件使用示例</title><link rel="stylesheet" href="/resources/css/sench-touch.css" type="text/css"><script type="text/javascript" src="sencha-touch-debug.js"></script><script type="text/javascript" src="app.js"></script>    <style type="text/css">  body {font-family : '宋体';  }      .bgColorPink{background-color:pink;  }    </style></head><body></body></html>

Ext.Loader.setPath({    'Ext': 'sdk/src'});//</debug>Ext.require('Ext.TabPanel');Ext.application({    name: 'MyApp',    icon: 'resources/images/icon.png',glossOnIcon :false,phoneStartupScreen:'resources/images/phone_startup.png',tabletStartupScreen:'resources/images/tablet_startup.png',launch:function(){var panel = Ext.create('Ext.TabPanel', {id : 'myPanel',ui : 'dark',tabBarPosition : 'bottom',cls : 'bgColorPink',items : [{title : '主页按钮',html : '主页html',iconCls : 'home'},{title : '合同按钮',html : '合同html',iconCls : 'user'}]});Ext.Viewport.add(panel);    }});

3.2.2 Tab面板组件的配置选项

ui : 定义组件所使用的ST中预定义的样式。可以将大多数组件的ui配置选项值设定为dark或light，该配置选项也是容器组件的配置选项，所有直接或间接继承了容器组件的其他组件都具有这个配置选项，使用方法大致相同。

tabBarPosition:指定Tab面板中标签栏的停靠位置。可指定为bottom或top，默认值为top。

页面打开时，默认显示Tab面板中的第一个子容器组件，通过activeItem配置选项指定默认显示第几个子容器组件，指定方法如下：

new Ext .TabPanel({

activeItem :1,

})

在不指定acitveItem配置选项的时候，该值默认为0，代表页面打开时显示第一个容器组件。

可以在脚本代码中使用Tab面板组件的setActiveItem方法来切换Tab面板中所要显示的子容器组件。代码如下：tabPanel:setActiveItem(1)

第3章 面板与布局-3.2Tab面板组件

第3章面板与布局-3.2Tab面板组件