求助，关于Ext JS弹出Tab的问题，太奇怪了。。。

我是Ext新手，学了两天，请多指点。需求描述：
简历一个主页，由标题栏和TabPanel构成，TabPanel初始化显示一个主页，主页中有按钮（或者图片），表示各个子系统，当点击某个按钮（或图片）的时候，弹出一个新的Tab，然后打开某个网页链接。问题描述：当我点主页Tab上的按钮时，弹出我我需要的页面，但是很奇怪，弹出的Tab无法点关闭按钮关闭Tab。我的实现方式：
主文件：index.jsp<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Advanced Tabs</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />    <!-- GC -->
  <!-- LIBS -->
  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  <!-- ENDLIBS -->    <script type="text/javascript" src="../../ext-all.js"></script>    <link rel="stylesheet" type="text/css" href="tabs-example.css" />
    <script type="text/javascript" src="../ux/TabCloseMenu.js"></script>
    <script type="text/javascript" src="index-tabs-adv.js"></script>    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    <div id="tabs" style="margin:15px 0;"></div>
</body>
</html>
JS文件：
index-tabs-adv.jsExt.onReady(function(){
    var tabsPanel = new Ext.TabPanel({
region: 'center',
        renderTo:'tabs',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        height:600,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });    addMainTab(); 
    var index = 0;
    while(index < 1){
        addTab();
    }    function addMainTab(){
        tabsPanel.add({
            title: '主页',
            iconCls: 'tabs',
closable: false,
            items:
[
new Ext.Button({
text: 'Add Tab',
handler: addTab,
iconCls:'new-tab'
}).render(document.body, 'tabsPanel')
]
        }).show();
    } function addTab(){
tabsPanel.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
closable: true,
            html: '<div><iframe src ="http://www.baidu.com" height="600" width="100%"></iframe></div>'
        }).show();
    } var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.BoxComponent({
                region: 'north',
                height: 32, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:'<p>系统综合平台</p>'
                }
            }), tabsPanel
]
})
});

解决方案 »

  1.   

    我没用过tab,不过看你的MainTab里面有一个属性closable:false你看看是不是这个配置弄的啊
      

  2.   

    学习Ext就是多看看文档，最好看英文的比较好
      

  3.   

    那个MainTab没问题的，主要是下面的问题：            items:
                [
                    new Ext.Button({
                    text: 'Add Tab',
                    handler: addTab,
                    iconCls:'new-tab'
                    }).render(document.body, 'tabsPanel')
                ]
    如果这个代码放在function addMainTab()之外，也就是不在Tab里面，就没有出现这个问题。