用Ext2.0做的弹出窗口会一直重叠，怎么解决？？

Question

就弹出的window关闭后再打开窗口会不断叠加，我已经设置了判断怎么还不行
js代码
<script language="javascript">
 function show(){    var DetailForm = new Ext.FormPanel({
bodyStyle:'padding:5 5 5 5', 
labelSeparator : "：",//元素分隔符为:
frame:true,
width:500,
            height:'auto',
border:false,//无边框
items : [
     {
xtype:'textfield',
width : 200,
readOnly:true,
name : 'table_number',//定义元素名称
fieldLabel:'就餐桌号'
},{
    xtype:'textfield',
width:200,
readOnly:true,
name : 'table_time',//定义元素名称
fieldLabel:'到桌时间'
},{
    xtype:'textfield',
width:200,
readOnly:true,
name : 'table_time',//定义元素名称
fieldLabel:'上菜时间'
},{
    xtype:'textarea',
   width:200,
readOnly:true,
grow:true,
preventScrollbars:true,
name : 'table_vagetable',//定义元素名称
fieldLabel:'所点菜品'
},{
    xtype:'textfield',
   width:200,
name : 'table_totalPrice',//定义元素名称
fieldLabel:'总价'
},{
    xtype:'textfield',
   width:100,
name : 'table_ifVip',//定义元素名称
value:'是',
fieldLabel:'是否VIP'
}
],buttonAlign:'right',
  buttons:[{
text:'关闭',
handler: function(){
      win.hide();                
                    }
}]
});
           var win;
      if(!win){       win=new Ext.Window({
            el: 'hello-win',
            layout: 'fit',
            width: 350,
            title: '桌台详情',
            height: 400,
            closeAction: 'hide',
    resizable : false,
    shadow : true,
    modal :true,
    closable:true,//有关闭按钮
    bodyStyle:'padding:5 5 5 5',
    animCollapse:true,
items:[DetailForm]
       });
   }    
        win.show();
      
 }
</script>html部分：
<a href="#" id="detail" onclick="show()">详细</a>

Answer 1

if(!Ext.get('hello-win'))用这个判断

Answer 2

两种改法：
第一种：
function show() { var DetailForm = new Ext.FormPanel({
bodyStyle : 'padding:5 5 5 5',
labelSeparator : "：",// 元素分隔符为:
frame : true,
width : 500,
height : 'auto',
border : false,// 无边框
items : [{
xtype : 'textfield',
width : 200,
readOnly : true,
name : 'table_number',// 定义元素名称
fieldLabel : '就餐桌号'
}, {
xtype : 'textfield',
width : 200,
readOnly : true,
name : 'table_time',// 定义元素名称
fieldLabel : '到桌时间'
}, {
xtype : 'textfield',
width : 200,
readOnly : true,
name : 'table_time',// 定义元素名称
fieldLabel : '上菜时间'
}, {
xtype : 'textarea',
width : 200,
readOnly : true,
grow : true,
preventScrollbars : true,
name : 'table_vagetable',// 定义元素名称
fieldLabel : '所点菜品'
}, {
xtype : 'textfield',
width : 200,
name : 'table_totalPrice',// 定义元素名称
fieldLabel : '总价'
}, {
xtype : 'textfield',
width : 100,
name : 'table_ifVip',// 定义元素名称
value : '是',
fieldLabel : '是否VIP'
}],
buttonAlign : 'right',
buttons : [{
text : '关闭',
handler : function() {
win.close();//-------------改为close------------ 
}
}]
});
var win;
if (!win) {
win = new Ext.Window({
renderTo : 'hello-win',//-------------改为renderTo win不存在就渲染------------ 
layout : 'fit',
width : 350,
title : '桌台详情',
height : 400,
closeAction : 'hide',
resizable : false,
shadow : true,
modal : true,
closable : true,// 有关闭按钮
bodyStyle : 'padding:5 5 5 5',
animCollapse : true,
items : [DetailForm]
});
}
win.show();}

Answer 3

<script language="javascript">
  var win;
 function show(){  var DetailForm = new Ext.FormPanel({
bodyStyle:'padding:5 5 5 5',  
labelSeparator : "：",//元素分隔符为:
frame:true,
width:500,
  height:'auto',
border:false,//无边框 
items : [
{
xtype:'textfield',
width : 200,
readOnly:true,
name : 'table_number',//定义元素名称
fieldLabel:'就餐桌号'
},{
xtype:'textfield',
width:200,
readOnly:true,
name : 'table_time',//定义元素名称
fieldLabel:'到桌时间' 
},{
xtype:'textfield',
width:200,
readOnly:true,
name : 'table_time',//定义元素名称
fieldLabel:'上菜时间' 
},{
xtype:'textarea',
width:200,
readOnly:true,
grow:true,
preventScrollbars:true,
name : 'table_vagetable',//定义元素名称
fieldLabel:'所点菜品' 
},{
xtype:'textfield',
width:200,
name : 'table_totalPrice',//定义元素名称
fieldLabel:'总价' 
},{
xtype:'textfield',
width:100,
name : 'table_ifVip',//定义元素名称
value:'是',
fieldLabel:'是否VIP' 
}
],buttonAlign:'right',
buttons:[{
text:'关闭',
handler: function(){
win.hide();   
  }
}]
});  if(!Ext.get('hello-win')){ win=new Ext.Window({
  el: 'hello-win',
  layout: 'fit',
  width: 350,
  title: '桌台详情',
  height: 400,
  closeAction: 'hide',
resizable : false,
shadow : true,
modal :true,
closable:true,//有关闭按钮
bodyStyle:'padding:5 5 5 5',
animCollapse:true,
items:[DetailForm]
  });
}   
  win.show();
    
 }
</script>

Answer 4

第二种：
function show() { var DetailForm = new Ext.FormPanel({
bodyStyle : 'padding:5 5 5 5',
labelSeparator : "：",// 元素分隔符为:
frame : true,
width : 500,
height : 'auto',
border : false,// 无边框
items : [{
xtype : 'textfield',
width : 200,
readOnly : true,
name : 'table_number',// 定义元素名称
fieldLabel : '就餐桌号'
}, {
xtype : 'textfield',
width : 200,
readOnly : true,
name : 'table_time',// 定义元素名称
fieldLabel : '到桌时间'
}, {
xtype : 'textfield',
width : 200,
readOnly : true,
name : 'table_time',// 定义元素名称
fieldLabel : '上菜时间'
}, {
xtype : 'textarea',
width : 200,
readOnly : true,
grow : true,
preventScrollbars : true,
name : 'table_vagetable',// 定义元素名称
fieldLabel : '所点菜品'
}, {
xtype : 'textfield',
width : 200,
name : 'table_totalPrice',// 定义元素名称
fieldLabel : '总价'
}, {
xtype : 'textfield',
width : 100,
name : 'table_ifVip',// 定义元素名称
value : '是',
fieldLabel : '是否VIP'
}],
buttonAlign : 'right',
buttons : [{
text : '关闭',
handler : function() {
win.hide();
}
}]
});
var win = Ext.getCmp('myWin'); //------------要这样判断win 之前那样永远走进if分支
if (!win) {
win = new Ext.Window({
el : 'hello-win',
id:'myWin', //---------加个id
layout : 'fit',
width : 350,
title : '桌台详情',
height : 400,
closeAction : 'hide',
resizable : false,
shadow : true,
modal : true,
closable : true,// 有关闭按钮
bodyStyle : 'padding:5 5 5 5',
animCollapse : true,
items : [DetailForm]
});
}
win.show();}

Answer 5

搞定了，把win和DetailForm定义成全局变量即可