前面在使用了简单的tab之后，在后来的应用中，又用到了高级tab。
需要用户点击一个链接之后，在panel中新增tab。这里有很多地方有疑问。
1、在var viewport = new Ext.Viewport（）中定义tab是这样子的。
new Ext.TabPanel(
{
id:tabs,
region:'center',
enableTabScroll:true,
defaults: {autoScroll:true},
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center2',
title: 'Start',
autoScroll:true
}]
})
但是这样子导致这个TabPanel没有变量名，不能直接操作。
然后我试了通过viewport.add进行添加的方式，可能是方法使用错误，导致没有出来。
如果效果出来了。
后面还有问题，我怎么通过这个tab来显示一个页面呢。通过ajax tab来显示。在basic tab这个例子里有看到过，知识还没有研究。
下面是动态添加tab的方法
function addTab(){
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>'
+ Ext.example.bogusMarkup,
closable:true
}).show();
}
就通过TabPanel这个对象的变量来直接add。在add时候再动态载入页面内容。
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: 'menu'
}, {
id: 'center_panel',
region: 'center',
layout: 'card',
items: [
{id: 'first_center', html: 'first center'}
]
}]
});
var center = Ext.getCmp('center_panel');
center.remove('first_center');
center.add({
id: 'second_center',
html: 'second center'
});
center.getLayout().setActiveItem('second_center');
center.doLayout();
通过指定TabPanel id，然后通过Ext.getCmp('center_panel')，就可以获得这个panel的句柄，就可以对这个组件进行操作。layout在add/remove之后需要调用center.doLayout()方法，才能使后来新建的tab的生效。
3、ajax tab
function addFormTab(strScreen_ID, strScreenName){
var tabs = Ext.getCmp('tabs');
tabs.add({
id: strScreen_ID,
title: strScreenName,
//html: 'second center',
autoLoad: {url: './pages/web/business_frame.jsp', params: 'screen_ID=WEB.BU&screen_FK=' + strScreen_ID},
closable:true
});
tabs.getLayout().setActiveItem(strScreen_ID);
tabs.doLayout();
}
autoLoad: {url: './pages/web/business_frame.jsp', params: 'screen_ID=WEB.BU&screen_FK=' + strScreen_ID}
指定这个autoload，就可以从相应的指定页面载入。
以上已经测试成功。嘿嘿：）