我有类似以下的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的配置?
我认为没有一个参数可以让您自动将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);
}
}
});