2.2.5 Ext.TabPanel
Ext.TabPanel是另一个常用组件,一两句话很难说清楚,但是看到显示效果就很容易理解了。我们先来看图2-7。
|
图2-7 Ext.TabPanel |
如图2-7所示,显示的内容随着你点击的标题而变化。实际上,它是多个不同内容的容器,任意组件直接使用add()函数便可添加到Ext.TabPanel中。如果不特别指定xtype,就会默认使用Ext.Panel为这些内容生成子面板,如代码清单2-5所示。
代码清单2-5 创建Ext.TabPanel
- var
tabs = new Ext.TabPanel({ -
renderTo: document.body, -
height: 100 - });
-
- tabs.add({
-
title: '标题1', -
html: '内容1' - });
- tabs.add({
-
id: Ext.id(), -
title: '标题2', -
html: '内容2', -
closable: true - });
-
- tabs.activate(0);
首先创建一个Ext.TabPanel,第一个参数指定它渲染的元素,我们直接把它放到HTML页面的Body部分。
然后使用add函数向TabPanel里添加两个标签,同时添加对应的内容。我们来看一下它里边的参数。
第一个参数是这个标签对应的id,我们使用Ext.id()函数生成唯一的id值。
第二个参数是标签上显示的标题。
第三个参数是单击标签后显示的内容。实际上这里可以放置任何HTML,你可以把所有想放的内容放到里边。
最后的参数是一个布尔值:true或false,这个参数决定了生成的标签是否可以手工关闭,默认是false,不会显示关闭按钮。当手工设置为true后,标签上显示一个关闭按钮,单击关闭按钮后,标签和对应的内容被关掉。
添加标签后,调用activate()函数让指定的标签变成激活状态,参数是一个从0开始的索引值,activate(0)激活第一个标签。
现在,这些参数统一放到大括号里,这样我们更容易理解这些参数的含义,比如renderTo是渲染的元素,height是生成的高度,title是 对应标题,HTML是对应内容,用closable确定这些标签是否能关闭。tab.activate(0)依然是激活第一个标签。