前面在使用了簡單的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，就可以從相應的指定頁面載入。
以上已經測試成功。嘿嘿：）