CODEWITHSUNDEEP
javascriptformsextjs
Muhammad Kashif Nazar
Muhammad Kashif Nazar

Reputation: 23955

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

I have HTML something like the following

<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>

I have to display the #inputs div in a window. For which I am doing the following.

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

When inputDialog .show() is called, the inputs are displayed in a Window as desired. But what happens is that the #inputs div gets out of the form to be displayed in the window. The DOM becomes something like the following.

<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>

On calling inputDialog .hide() the Window disappears but the DOM remains as is, and the #input div doesn't get back to the form. As a consequence; when the form is submitted, only the hidden field is submitted.

Is there a configuration so that the DOM can be restored?

Upvotes: 0

Views: 71

Answers (1)

Federico Orquera
Federico Orquera

Reputation: 108

I don't think there's a parameter that let's you restore divs back to the document automatically. You can always use vanilla Javascript to do that for you:

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

Upvotes: 1

Related Questions