Ext.formPanel 使用关闭按钮复制内容

Question

我正在使用 ExtJS 3.2（必须在此版本的 ExtJS 中）。当我在内部显示带有表单面板的面板时，一切看起来都很好，但是当我使用右上角的 [X] 按钮关闭面板并再次打开时，每个字段标签出现两次并且文本字段消失。如果我使用 "Cancelar" 按钮，显示正确。

我的代码：

    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

您正在通过调用函数 crearDoc(idControl) 创建新的表单对象。您需要在按下关闭按钮时销毁它，因此设置 autoDestroy : true。或定义表单并将其设置为在单击按钮时隐藏和显示表单。

Answer 2

您已指定 closeAction : 'hide', 这就是它不自动销毁的原因。将属性指定为 close 将解决问题。

Ext.formPanel 使用关闭按钮复制内容

Ext.formPanel duplicates the content using close button

javascript

extjs

extjs3