Ext.TabPanel

Ext.TabPanel是另一个常用的组件，通过add()添加子面板。

 

Ext.get("tabPanel").on("click",function() { var tabs = new Ext.TabPanel({ renderTo:'tabpanelDiv', height:300, width:500 });   tabs.add({ title:"面板1", html:"面板1的内容" });   tabs.add({ title:"面板2", html:"面板2的内容", closable:true });   tabs.add({ title:"面板3", html:"面板3的内容" });   tabs.activate(0); // 激活第一个面板。 });

 

效果：

 

如果面板里面的内容是从后台获取的页面，并且包含自己的脚本呢？

在Ext2.0中，可以通过autoLoad()来实现，这些Tab默认是延迟加载的。只有在激活时才通过Ajax从后台获取。

例：

tabs.add({ title:"面板3", //html:"面板3的内容", autoLoad:{ url:'../tree/check-tree.html', scripts:true// 执行check-tree中的JS脚本 } });