Ext.formPanel使用關閉按鈕復制內容

Question

我正在使用ExtJS 3.2（必須在此版本的ExtJS中）。 當我顯示一個帶有formpanel的面板時，一切看起來都很好，但是當我使用頂部的[X]按鈕關閉面板並再次打開時，每個fieldlabel出現兩次，而textfield消失。 如果我使用“取消”按鈕，則顯示正確。

我的代碼：

    function crearDoc(idControl) {
        f = new Ext.FormPanel({
            frame: true,
            id: 'formFicheroCrear',
            layout: 'fit',
            defaults: {minWidth: 500},
            items: [{
                      xtype : 'hidden',
                      id : 'idFichero'
                   },
                    {
                       xtype: 'panel',
                       layout: 'form',
                       id: 'formReal',
                       width: '100%',
                       items: [{xtype: 'datefield',
                               disabled: true,
                               allowBlank : false,
                               fieldLabel: 'Fecha',
                               value : new Date(),
                               format: 'd/m/Y',
                               width: '100%',
                               id: 'fechaDoc',
                               allowBlank: false},
                          {xtype: 'textfield',
                           fieldLabel: 'Titulo',
                           allowBlank : false,
                           width: '100%',
                           id: 'nombreDoc'},
                          {xtype: 'textfield',
                            fieldLabel: 'Descripcion',
                            allowBlank : false,
                            width: '100%',
                            id: 'descripcionDoc'}]
                   },{xtype: 'panel',
                       layout   : 'fit',
                       items: [{xtype: 'htmleditor',
                           id: 'editorHTML',
                           allowBlank : false,
                           name: 'documentoTexto'}]
                   }],
            buttons: [{
                //Guardar documento SGSI
                text: '<bean:message key="label.boton.guardarySubir"/>',
                minWidth: 100,
                cls : 'x-btn-text-icon',
                iconCls : 'yes-icon',
                listeners:{
                    'close':function(win){
                             console.info('bye');
                     },
                    'hide':function(win){
                             console.info('just hidden');
                     }

            },
                handler: function() {
                    // Comprobamos que el formulario esté OK
                    if (f.getForm().isValid()) {
                       var nombreDoc =  Ext.getCmp("nombreDoc").getValue();
                       var descripcionDoc =  Ext.getCmp("descripcionDoc").getValue();
                       var editorHTML =  Ext.getCmp("editorHTML").getValue();

                         Ext.Ajax.request(
                                 {
                    url: '/<bean:message key="global.application.context.name"/>/SGSI.do',
                    params: {"method": "crearDocumento",
                           "docTitulo": nombreDoc,
                           "docDescripcion" : descripcionDoc,
                           "docCuerpo" : editorHTML,
                           "idProyecto" :  Ext.getCmp('idProyecto').getValue(),
                           "idControl" : idControl}
                    })
                    ventanaCrearDocumento.close()
                    storeDocumentos.loadData(json);
                    Ext.getCmp('formFichero').getForm().reset()
                    } else {
                        Ext.Msg.alert('<bean:message key="label.sincronizador.atencion"/>',
                                        '<bean:message key="label.error.campos.rojo"/>');
                    }

                }},
                { text : '<bean:message key="label.boton.cancelar"/>',
                    cls : 'x-btn-text-icon',
                    iconCls : 'no-icon',
                    minWidth: 100,
                    handler: function() {ventanaCrearDocumento.close()}}]
        });

        f.load({
            url : '/<bean:message key="global.application.context.name"/>/SGSI.do',
            params : {
                "method" : 'dameControlPorId',
                "idControl" : idControl,
                "idProyecto" : Ext.getCmp('idProyecto').getValue()
            },
            method : 'POST'
        });
    var ventanaCrearDocumento = new Ext.Window({
            height: 460,
            width: 700,
            closable: true,
            closeAction : 'hide',
            modal: true,
            title: 'Redacción de Documento',
            layout: 'fit',
            items: f
        });
        ventanaCrearDocumento.show();
 }

Answer 1

您已指定closeAction : 'hide',這就是為什么它不會自動銷毀的原因。 指定該屬性為close將解決問題。

Answer 2

您正在通過調用函數crearDoc（idControl）創建新的表單對象。 您需要在按下關閉按鈕時銷毀它，所以將autoDestroy設置為true。 或定義表單並將其設置為在單擊按鈕時隱藏和顯示表單。