How to solve multiple occuring text fields in ext js3? - extjs

Question

I have a tab panel.I open a tab and a grid is shown. Then i double click a row and a window is opened. In this window i have a panel and in this panel i have 4 textfields.
Then i close window, and double click another row, window is opened and fields that in panel shown correctly like below.
label label label label
|_______| |______| |______| |______|
When i close tab and opened it again and click row to open window, window is opened but in my panel's items shown three times. I mean it looks like below :
label label label label
label label label label
label label label label
And every click rows it is increasing...
My window is ;
var win = new Ext.Window({
width: 680,
height: 250,
title: 'Details',
layout: 'border',
modal: true,
closeAction:'hide',
items: [top,grid]
});
and my panel (name is top)
var top = new Ext.FormPanel({
labelAlign: 'top',
region : 'north',
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 680,
height:75,
items: [{
layout:'column',
items:[{
columnWidth:.25,
layout: 'form',
items: [{
xtype:'textfield',
id : 'date',
fieldLabel: '<font color="red" style="margin-left: 25px" ><b>date</b></font>',
labelSeparator: '',
style: 'text-align: center;',
width:120
}]
},{
columnWidth:.25,
layout: 'form',
items: [{
id : 'xxx',
xtype:'textfield',
fieldLabel: '<font color="red"style="margin-left: 25px" ><b>xxxx</b></font>',
labelSeparator: '',
style: 'text-align: center;',
width:120
}]
},{
columnWidth:.25,
layout: 'form',
items: [{
id : 'cost',
xtype:'textfield',
fieldLabel: '<font color="red"style="margin-left: 4px" ><b>cost</b></font>',
labelSeparator: '',
style: 'text-align: right;',
width:120
}]
},{
columnWidth:.25,
layout: 'form',
items: [{
id : 'price',
xtype:'textfield',
fieldLabel: '<font color="red"style="margin-left: 15px" ><b>price</b></font>',
labelSeparator: '',
style: 'text-align: right;',
width:120
}]
}]
}]
});
I try to change window's closeAction config 'hide' to 'destroy', but this time i can not open window second time if i don't close the tab.
How can i fix this problem.
Thank you very much.
var grid = new Ext.grid.GridPanel({
stripeRows: true,
frame: false,
border:false,
autoScroll: true,
loadMask: {msg : 'loading...'},
trackMouseOver:false,
store: store,
bbar: paging,
region:'center',
cm: cm,
sm: sm,
viewConfig: {enableRowBody:true,emptyText: 'empty...'},
listeners: {
celldblclick: function(){
showDetail();
}
}
});
and showDetail function is ;
var showDetail = function(){
store.baseParams = {
Id : sm.getSelected().data['ID']
};
store.load();
win.show();
var d =sm.getSelected().data['date'];
Ext.getCmp("xxx").setValue(sm.getSelected().data['xxx']);
Ext.getCmp("date").setValue(d.getDate() + '/' + (d.getMonth()+1) + '/' + d.getFullYear());
Ext.getCmp("cost").setValue((sm.getSelected().data['cost']));
Ext.getCmp("price").setValue((sm.getSelected().data['price']));
};

Answer 1

You need to create the window on every call and destroy when close
function createWindow(){
return new Ext.Window({
width: 680,
height: 250,
title: 'Details',
layout: 'border',
modal: true,
closeAction:'destroy',
items: [top,grid]
});
}
And then call the createWindow
var showDetail = function(){
store.baseParams = {
Id : sm.getSelected().data['ID']
};
store.load();
var win = createWindow();
win.show();
var d =sm.getSelected().data['date'];
Ext.getCmp("xxx").setValue(sm.getSelected().data['xxx']);
Ext.getCmp("date").setValue(d.getDate() + '/' + (d.getMonth()+1) + '/' + d.getFullYear());
Ext.getCmp("cost").setValue((sm.getSelected().data['cost']));
Ext.getCmp("price").setValue((sm.getSelected().data['price']));
};