Extjs的一些问题

在用了ViewPort布局以后，分为上中下三块，中间是用TabPanel，准备在一个tab中通过触发生成一个新的tab加到整个TabPanel中，但是一直无法完成。求助达人
下面这段JS代码是在index.html中的。Ext.onReady(function(){
new Ext.Viewport({
layout:'border',
items:[{
region: 'north',
contentEl: 'header',
height:50,
html:'<iframe scrolling="no" frameborder="0" style="width:100%;height:100%;" src="head.html"></iframe>',
border:false,
collapsible: false },{
region: 'south',
                        contentEl: 'footer',
height:25,
html:'<iframe scrolling="no" frameborder="0" style="width:100%;height:100%;" src="foot.html"></iframe>',
border:false,
collapsible: false
},{
region:'center',
                        contentEl: 'main',
xtype:'tabpanel',
activeTab:0,
border:false,
iconCls:'icon-tabs',
tabPosition: 'bottom',
enableTabScroll:true,
defaults: {autoScroll:true},
id:'tabs',
items:
[{
title:'导航界面',
border:false,
iconCls:'icon-tabs',
layout:'fit',
closable: false,
html:'<iframe scrolling="no" name="main" frameborder="0" style="width:100%;height:100%;" src="main.html"></iframe>',
autoScroll: true
}]
}]
})
});
function addTab(){
var tabs=Ext.getCmp("tabs");
var newTab=tabs.add({
title:'test',
closable:true,
html:'<p>Test'
});
tabs.setActiveTab(newTab);
}然后在main.html中点击一个按钮生成另一个TAB<body>
   <a href="javascript:top.addTab();">Here</a>
  </body>IE中直接无反应，FF中能出来小叉叉，但是没法切过去。