ext 如何添加tabpanel

2.2.5 Ext.TabPanel

Ext.TabPanel是另一个常用组件,一两句话很难说清楚,但是看到显示效果就很容易理解了。我们先来看图2-7。

ext 如何添加tabpanel_第1张图片 
图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)依然是激活第一个标签。

你可能感兴趣的:(Ext)