posting form to iframe with extjs without rendering to bidy

问题

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.

here is my code thats working for the form post but the container falls all the way to the bottom of the page

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

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 renderTo: Ext.getBody() then the form never gets posted to iframe.

I wonder if there is a way to render to a specific div may be? Not sure if that would work as well.

EDITED

I tried doing this

renderTo: 'x-panel'

 ext-all.js Uncaught TypeError: Cannot read property 'dom' of null

** Complete Code with form Submission **

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

回答1:

Maybe you can try to send your form data like this:

    Ext.create(Ext.form.Panel).submit({
        clientValidation: false,
        method: 'GET',
        params: {
            // Your params like:
            id: myId
        },
        standardSubmit: true,
        target: '_blank',
        url: 'your/url'
    });

回答2:

var formFields = [
    'field1',
    'field2',
    field3'
];

You have one ' missing there also... Wacthout!

来源：https://stackoverflow.com/questions/38945204/posting-form-to-iframe-with-extjs-without-rendering-to-bidy