菜鸟提问 ：EXt 框架中菜单访问面板出错

Question

   这是一个树状结果的一个节点，我点击他就在就在主页面显示
关键问题是下面那段打开 一个窗口。我第一次打开没问题，当我一关闭一个面板，他就把关掉的面板添加到没有关闭的面板的下面，下次再打开的时候。他有在加一个空白的面板
请大虾帮忙看下我刚刚学的ext实在是找不出来
this.root.appendChild(new Ext.tree.TreeNode({
id : 'categoryMan',
text : '商品分类管理',
iconCls : 'node',
listeners : {
'click' : function(node, event) {
main.openTab(node, event, categoryInfoPanel);
}
}
}));openTab:function(node, event, panel) {
event.stopEvent();
var n = main.getComponent(node.id);
alert(n);
if (!n) {
var p = new panel();
p.id = node.id;
p.title = node.text;
n = main.add(p);
}
main.setActiveTab(n); },

Answer 1

这段代码没问题
if (!n) {
    n = main.add({
        id: node.id,
        title: node.text,
        closable: true
    });
}
看看其他的代码

Answer 2

var isCall = null;
function callWeb(node, event, url, panel) {
Ext.Ajax.request({
url : url,
method : 'POST',
success : function(response) {
if (response.responseText == '允许访问') {
isCall = true;
// main.openTab(node, event, panel);
}
}
});
if (isCall == true) {
alert(panel);
main.openTab(node, event, panel);
isCall = null;
}
}
// 商品管理
productTree = function() {
productTree.superclass.constructor.call(this, {
border : false,
autoHeight : true,
rootVisible : false,
root : new Ext.tree.TreeNode({
id : 'root',
text : '商品管理',
draggable : false,
expanded : true
})
}); this.root.appendChild(new Ext.tree.TreeNode({
id : 'product',
text : '商品信息',
iconCls : 'node',
listeners : {
'click' : function(node, event) {
main.openTab(node, event, productInfoPanel);
//callWeb(node, event, 'sale.do', productInfoPanel)
}
} }));
}
Ext.extend(productTree, Ext.tree.TreePanel);// 订单管理
orderTree = function() {
orderTree.superclass.constructor.call(this, {
border : false,
autoHeight : false,
rootVisible : false,
root : new Ext.tree.TreeNode({
id : 'root',
text : '订单管理',
draggable : false,
expanded : true
})
});
this.root.appendChild(new Ext.tree.TreeNode({
id : 'order',
text : '订单信息',
iconCls : 'node',
listeners : {
'click' : function(node, event) {
main.openTab(node, event, orderInfoPanel);
//callWeb(node, event, 'plan.do', custdevelPlanPanel)
}
}
}));
}
Ext.extend(orderTree, Ext.tree.TreePanel);// 系统管理
systemTree = function() {
systemTree.superclass.constructor.call(this, {
border : false,
autoHeight : true,
rootVisible : false,
root : new Ext.tree.TreeNode({
id : 'root',
text : '系统管理',
draggable : false,
expanded : true
})
});

this.root.appendChild(new Ext.tree.TreeNode({
id : 'cstInfoMan',
text : '客户信息管理',
iconCls : 'node',
listeners : {
'click' : function(node, event) {
main.openTab(node, event, custInfoPanel);
//callWeb(node, event, 'customer.do', custInfoPanel)
}
}
}));

this.root.appendChild(new Ext.tree.TreeNode({
id : 'userInfoMan',
text : '内部用户管理',
iconCls : 'node',
listeners : {
'click' : function(node, event) {
main.openTab(node, event, userInfoPanel);
//callWeb(node, event, 'customer.do', custInfoPanel)
}
}
}));

this.root.appendChild(new Ext.tree.TreeNode({
id : 'cstTypeMan',
text : '客户类型管理',
iconCls : 'node',
listeners : {
'click' : function(node, event) {
main.openTab(node, event, typeInfoPanel);
//callWeb(node, event, 'role.do', typeInfoPanel)
}
}
}));

this.root.appendChild(new Ext.tree.TreeNode({
id : 'categoryMan',
text : '商品分类管理',
iconCls : 'node',
listeners : {
'click' : function(node, event) {
main.openTab(node, event, categoryInfoPanel);
//callWeb(node, event, 'right.do', categoryInfoPanel);
}
}
}));

this.root.appendChild(new Ext.tree.TreeNode({
id : 'myRight',
text : '我的权限',
iconCls : 'node',
listeners : {
'click' : function(node, event) {
main.openTab(node, event, myRightPanel);
}
}
}));
}
Ext.extend(systemTree, Ext.tree.TreePanel);// 信息菜单
bookPanel = function() {
bookPanel.superclass.constructor.call(this, {
id : 'menu',
title : '菜单',
region : 'west',
width : 150,
collapsible : true,
minSize : 150,
split : true,
margins : '0 3 3 0',
layout : 'accordion',
layoutConfig : {
animate : true
},
items : [{
title : '商品管理',
items : [new productTree()] }, {
title : '订单管理',
items : [new orderTree()] }, {
title : '系统管理',
items : [new systemTree()]
}]
});
}
Ext.extend(bookPanel, Ext.Panel);
// 版权
copyrightPanel = function() {
bookPanel.superclass.constructor.call(this, {
region : 'south',
width : 150,
height : 30,
frame : true,
autoShow : true,
collapsible : true,
margins : '0 3 3 0',
items : [{
contentEl : 'copyright'
}]
});
}
Ext.extend(copyrightPanel, Ext.Panel);
// 内容面板
var tabContent = new Ext.TabPanel({
    region:'center',
    autoScroll:true,
    autoDestroy:false,
    animScroll:true,
    resizTabs:true,
    enableTabScroll:true,
    activeTab:0,
    deferredRender:false,
    defaults: {
        autoScroll:true
    },
    tabMargin:0,
    items:[{        //创建一个默认的TAB，用于显示欢迎信息
        id:'welcome',
        title:'系统介绍',
        html : '<div style="position:absolute;top:60;left:120;"><img src="images/welcome.gif"/></div>'
  }],
  openTab:function(node, event, panel) {
// this.el.mask('Loading...', 'x-mask-loading');
event.stopEvent();
var n = main.getComponent(node.id);
alert(n);
if (!n) {
var p = new panel();
p.id = node.id;
p.title = node.text;
n = main.add(p);
}
main.setActiveTab(n); }, closeTab : function(panel, id) {
var o = (typeof panel == "string" ? panel : id || panel.id);
var tab = this.getComponent(o);
if (tab) {
this.remove(tab);
}
}
});var header, main, menu, copyright;Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
var btnModify = new Ext.Button({
text : '修改密码',
iconCls : 'modifyPwd',
id : 'modify',
handler : function() {
showModifyWin('modify'); }
});
var btnHelp = new Ext.Button({
text : '系统帮助',
iconCls : 'help',
id : 'help',
handler : function() {
var targeturl = "help/help.jsp"
newWin = window.open("help/help.jsp","","","scrollbars");
if (document.all) {
newwin.moveTo(0, 0);
newWin.resizeTo(screen.width, screen.height)
}
newWin.location = targeturl;
}
});
var btnLogout = new Ext.Button({
text : '注销用户',
iconCls : 'logout',
handler : function() {
window.location.href ="userAction.do?action=logout";
}
});
var userBar = new Ext.Toolbar({
width : 55,
items : [btnHelp, btnLogout]
});
var styleBar = new Ext.Toolbar({
width : 55,
items : [btnModify, new style]
});
header = new Ext.Panel({
border : false,
region : 'north',
height : 75,
frame : true,
items : [{
layout : "column",
defaults : {
border : false,
bodyStyle : 'padding-top:0px'
},
items : [{
columnWidth : .15,
html : '<img src="images/logo.gif"/>'
}, {
columnWidth : .70,
html : '<div style="margin-right:10px;"><img  src="images/title.jpg"/></div>'
}, {
columnWidth : .15,
items : [userBar, styleBar]
}]
}]
});
main = tabContent;
menu = new bookPanel();
copyright = new copyrightPanel();
// 主面板
var body = new Ext.Viewport({
enableTabScroll : true,
layout : 'border',
modal : true,
items : [header, main, menu, copyright]
});
setTimeout(function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({
remove : true
});
}, 300);
});
// 显示修改密码面板
var showWin;
function showModifyWin(id) {
showWin = new modifyWin();
showWin.show(id);
}

Answer 3

var isCall = null;
function callWeb(node, event, url, panel) {
Ext.Ajax.request({
url : url