ext 如何添加tabpanel

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

1. var tabs = new Ext.TabPanel({  
2.     renderTo: document.body,  
3.     height: 100  
4. });  
5.  
6. tabs.add({  
7.     title: '标题1',  
8.     html: '内容1'  
9. });  
10. tabs.add({  
11.     id: Ext.id(),  
12.     title: '标题2',  
13.     html: '内容2',  
14.     closable: true  
15. });  
16.  
17. 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)依然是激活第一个标签。