EXT tabpanel 增加窗口

Question

  我有一个横向的导航菜单，此菜单不是EXT的，
当我点击里面的某个菜单时，就添加新的tabpanel
代码：    var TabPanel = new Ext.TabPanel({
        renderTo:'tabs',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:1240,
        height:450,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });    function addTab(){
        TabPanel.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
         autoLoad:'HistoryInAndOut.jsp',
            closable:true
        }).show();
    }
 我的问题是 为什么 我点击菜单  用click事件调用 addTab()  不能添加新的tabpanel

Answer 1

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script>
var index = 0;
var TabPanel;
function addTab(){ 
    TabPanel.add({
        title: 'New Tab '+(++index), 
        iconCls: 'tabs', 
        //autoLoad:'HistoryInAndOut.jsp', 
        closable:true 
    });
} 
Ext.onReady(function(){
  TabPanel = new Ext.TabPanel({
        renderTo:'tabs', 
        resizeTabs:true, // turn on tab resizing 
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:1240,
        height:450,
        defaults: {autoScroll:true}
        //plugins: new Ext.ux.TabCloseMenu()
    }); 
});
</script>
<div id="tabs"></div>
<button onclick="addTab();">add</button>