title: posting form to iframe with extjs without rendering to bidy
body: <p>I am trying to post a form to an iframe. my issue is that my form gets posted just fine when I render the iframe to body. But the issue with this is that the container displays at the bottom of the page instead of the place where I want it to show. If I don't use the renderTo property, my form never gets posted to iframe at all. It almost seems like that in the case when I do not use renderTo property, i think my form does not even see the iframe.</p>
  
  <p>here is my code thats working for the form post but the container falls all the way to the bottom of the page</p>
  
  <pre><code>    var myContainer = Ext.create('Ext.form.FieldSet', {
              title: "my frame container",
              labelWidth: 1,
              bodyStyle: "padding-right:15px;padding-left:25px;",
              renderTo: Ext.getBody(),
              items: [
                  {
                      xtype: 'box',
                      autoEl: {
                          tag: 'iframe',
                          name: 'myIframe',
                          id: 'myIframe'
                      }
                  }
              ]
          });
  
  $('myform').submit();
  </code></pre>
  
  <p>This gets the form submitted but the panel drops down to the bottom of page. How can I keep its location and also be able to post to it. 
  Again if I take this part out <code>renderTo: Ext.getBody()</code> then the form never gets posted to iframe.</p>
  
  <p>I wonder if there is a way to render to a specific div may be? Not sure if that would work as well.</p>
  
  <p><strong>EDITED</strong></p>
  
  <p>I tried doing this</p>
  
  <p>renderTo: 'x-panel'</p>
  
  <pre><code> ext-all.js Uncaught TypeError: Cannot read property 'dom' of null
  </code></pre>
  
  <p>** Complete Code with form Submission **</p>
  
  <pre><code>var f = document.createElement("form");
  f.setAttribute('method',"post");
  f.setAttribute('name',"checkout-form");
  f.setAttribute('id',"checkout-form");
  f.setAttribute('target',"myIframe");
  f.setAttribute('action',"http://example.com");
  var formFields = [
      'field1',
      'field2',
      field3'
  ];
      for (var i = 0; i &lt; formFields.length; i++){
          var formFieldName  =  'formFieldName'+i;
          formFieldName = document.createElement("input");
          formFieldName.type = "text";
          formFieldName.name = formFields[i];
          f.appendChild(formFieldName);
      }
  
  var myContainer = Ext.create('Ext.form.FieldSet', {
      title: "my title",
      labelWidth: 1,
      bodyStyle: "padding-right:15px;padding-left:25px;",
      //renderTo: Ext.getBody(),
      renderTo: Ext.getElementById("myId"),
      items: [
          {
              xtype: 'box',
              autoEl: {
                  tag: 'iframe',
                  name: 'myIframe',
                  id: 'myIframe',
  
              },
              listeners: {
                  load: {
                      element: 'el',
                      fn: function () {
                          console.log("iframe loaded");
                          $('iframe#component-9808').css('border','0');
  
                      }
                  }
              }
          }
      ]
  });
  
  $("body").append(f);
  $('#checkout-form').submit();
  </code></pre>