How to solve multiple occuring text fields in ext js3?

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

    };

You had better share your grid code and the row click handler code you have implemented too. — mindparse
It's probably because you keep using the same form instance (top) every time you create the window. Don't do that. — Evan Trimboli

Blas Pico Blas Pico · Accepted Answer · 2015-03-05T00:44:05

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

};

How to solve multiple occuring text fields in ext js3?

1 Answers