Ext.Window在显示时窃取表单元素;t隐藏时恢复

Ext.Window steals form elements on showing and doesn't restore on hiding

本文关键字：元素 恢复 隐藏 表单 Window 显示 Ext      更新时间：2023-09-26

我有类似以下的HTML

<html>
    <form action='action.php'>
       <input type="hidden" name="id" value="10" />
       <div id="inputs">
              <input type="text" name="firstName" /><br/>
              <input type="text" name="lastName" />
        </div>
    </form>
</html>

我必须在窗口中显示#inputsdiv。为此，我正在做以下工作。

        var inputDialog = new Ext.Window({
               title: 'Inputs',
               id:'InputsDialog',        
               contentEl: 'inputs'
        });

当调用inputDialog .show()时，输入将根据需要显示在窗口中。但是发生的情况是#inputsdiv脱离窗体显示在窗口中。DOM变成如下所示。

<html>
    <form action='action.php'>
       <input type="hidden" name="id" value="10" />
    </form>
    <script> 
         <!-- Some Ext.Window related script appears here-->
    </script>

    <div id="InputsDialog">
         <!-- Lots of Ext.Window specific HTML -->
         <div id="inputs">
              <input type="text" name="firstName" /><br/>
              <input type="text" name="lastName" />
        </div>
    </div>
</html>

在调用inputDialog .hide()时，Window消失，但DOM保持原样，#inputdiv无法返回到表单；提交表单时，只提交隐藏字段。

是否有可以恢复DOM的配置？

我认为没有一个参数可以让您自动将div恢复回文档。你可以随时使用香草Javascript为你做这件事：

var inputDialog = new Ext.Window({
        title: 'Inputs',
        id:'InputsDialog',
        contentEl: 'inputs',
        listeners: {
            hide: function(){
                var div = document.getElementById('inputs');
                var form = document.getElementById('the-form-id');
                form.appendChild(div);                
            }
        }
 });
相关文章：