Как решить несколько возникающих текстовых полей в ext js3?

Question

У меня есть панель вкладок. Я открываю вкладку и отображается сетка. Затем дважды щелкните строку и откроется окно. В этом окне у меня есть панель, и на этой панели у меня 4 текстовых поля.

Затем я закрываю окно и дважды щелкаю другую строку, открывается окно и поля, которые на панели отображаются правильно, как показано ниже.

этикетки                         этикетки               этикетки               этикетки
| _______ | | ______ | | ______ | | ______ |

Когда я закрываю вкладку и открываю ее снова и щелкаю строку, чтобы открыть окно, открывается окно, но в пунктах моей панели три раза. Я имею в виду это выглядит, как показано ниже:

этикетки                         этикетки               этикетки               этикетки
этикетки                         этикетки               этикетки               этикетки
этикетки                         этикетки               этикетки               этикетки

И каждый клик строк это увеличение ... Мое окно;

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

и показатьДобавить функцию;

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

};