Question

我有类似以下内容的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>

我必须在窗口中显示#inputs div。我正在做以下事情。

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

调用inputDialog .show()时，输入会根据需要显示在窗口中。但是会发生的是#inputs div离开窗体以显示在窗口中。 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保持不变，#input div不会返回到表单。作为结果;提交表单时，只提交隐藏字段。

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

Answer 1

我不认为有一个参数可让您自动将div恢复回文档。您可以随时使用vanilla 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);                
            }
        }
 });

Ext.Window在显示时窃取表单元素，并且在隐藏时不会恢复

1 个答案: