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

Posted 2023-02-26

【中文标题】Ext.formPanel 使用关闭按钮复制内容

【英文标题】：Ext.formPanel duplicates the content using close button

【发布时间】：2017-06-28 15:46:38

【问题描述】：

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

我的代码：

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

【参考方案1】：

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

【讨论】：

我完全是瞎子，没看到。谢谢！

这是我的荣幸。

【参考方案2】：

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