Ext的TabPanel打开的两个tab之间js内容错乱

Question

[code="java"]

Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

   var viewport = new Ext.Viewport({
        layout:'border',
        items:[
               mainTabpanel, //将欢迎界面放入到ViewPort
               {
                region:'west',
                id:'west-panel',
                title:'导航菜单',
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'0 0 0 5',
                layout:'accordion',
                layoutConfig:{
                    animate:true
                },
                items: [{
                    //contentEl: 'west',
                    title:'发票系统',
                    autoLoad : {
                        url:'/ExtDemo/demo/tree.jsp',
                        scripts:true
                    },
                    border:false,
                    iconCls:'nav'
                },{
                    title:'消息系统',
                    autoLoad : {
                        url:'/ExtDemo/demo/tree.jsp',
                        scripts:true
                    },
                    border:false,
                    iconCls:'nav'
                },{
                    title:'多业务系统',
                    autoLoad : {
                        url:'/ExtDemo/demo/tree.jsp',
                        scripts:true
                    },
                    border:false,
                    iconCls:'nav'
                },{
                    title:'日志系统',
                    autoLoad : {
                        url:'/ExtDemo/demo/tree.jsp',
                        scripts:true
                    },
                    border:false,
                    iconCls:'nav'
                }
                ]
            }
         ]
    });
});


var mainTabpanel = new Ext.TabPanel({
     id : 'MainTabPanel',
     region : "center",
     enableTabScroll: true,
     animate : true,
     frame:true,
     activeTab : "0",
     items : [{
        xtype : "panel",
        title : "欢迎"
       }]
}); //这里我定义一个欢迎的主页面，并且不能被关闭


function addtab(id, link, name) { //这里我定义一个方法，是在节点单击的时候触发这个方法，
       var tabId = "tab-" + id; 
       var tabTitle = name;
       var tabLink = link;
       currentPage = tabId;
       var centerpanel = Ext.getCmp('MainTabPanel'); 
       var tab = centerpanel.getComponent(tabId);
       var subMainId = 'tab-' + id + '-main';

       if (!tab) {  //判断MainTabPanel中是否存在这个页面，如果不存在
        tab = centerpanel.add(new Ext.Panel({
             id : tabId,
             title : tabTitle,
             autoScroll : true,
             iconCls : 'tabIconCss',
             layout : 'fit', //layout一定要是fit，不然显示grid会有问题。
             border : false,
             tools : [{id:'refresh'}],
             closable : true
            }));

        centerpanel.setActiveTab(tab); //将焦点指向我点击节点打开的页面
        tab.load({
           url : tabLink, //指向我传过来的页面的位置
           method:"post",
           params : {
               // 这里是关键的一个参数，传给load页，布局的关键
               subMainId : subMainId
           },
           scope : this, 
           discardUrl : true,
           nocache : true,
           text : "页面加载中,请稍候……",
           timeout : 9000,
           scripts : true
          });

       } else { //如果MainTabPanel，那么就直接将节点指向这个页面
        centerpanel.setActiveTab(tab);
       }
    }

[/code]

问题一：4个主菜单的url内容全部显示在了第一个主菜单里面。（见图一）
问题二：点击菜单时能在右侧center区域显示相应内容，但是所有的js相关内容都会显示在第一个打开的tab页面，而非js内容则能显示在对应的tab里面。（见图一、图二）

附：图一中的那个表格是子节点1所链接的内容，图二中的数字也是子节点1的，而图一中右侧的菜单是子节点2的，现在他们全都显示在子节点2中，但是非js的数字却在子节点1里面。

请教大家是怎么回事？

Answer 1

把各个tabpanel所使用的js,css移到 导航页面去 试一试