如何解决 ext js3 中出现的多个文本字段？

Question

我有一个选项卡面板。我打开一个选项卡并显示一个网格。然后我双击一行并打开一个窗口。在这个窗口中我有一个面板，在这个面板中我有 4 个文本字段。

然后我关闭窗口，然后双击另一行，窗口打开，面板中的字段正确显示如下。

标签            标签       标签      标签
|_______| |______| |______| |______|

当我关闭选项卡并再次打开它并单击行打开窗口时，窗口已打开，但在我的面板的项目中显示了 3 次。我的意思是它看起来像下面这样：

标签            标签       标签       标签
标签            标签       标签        标签
标签                                                                                                                                                                                                                                                                                         标签

而且每次点击的行数都在增加... 我的窗口是;

var win = new Ext.Window({
        width:  680,
        height: 250,
        title: 'Details',
        layout: 'border',
        modal: true,
        closeAction:'hide',
        items: [top,grid]
    });

和我的面板（名字在顶部）

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
                }]
            }]
        }]
    });

我尝试将窗口的 closeAction 配置“隐藏”更改为“销毁”，但这次如果我不关闭选项卡，我将无法第二次打开窗口。

我该如何解决这个问题。 非常感谢。

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();
            }
        }
    });

和showDetail函数是;

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

您需要在每次调用时创建窗口并在关闭时销毁

function createWindow(){
  return new Ext.Window({
    width:  680,
    height: 250,
    title: 'Details',
    layout: 'border',
    modal: true,
    closeAction:'destroy',
    items: [top,grid]
  });
}

然后调用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']));

};