将表单发布到iframe与extjs而不呈现给bidy [英] posting form to iframe with extjs without rendering to bidy

问题描述

我正在尝试将表单发布到iframe。我的问题是，当我将iframe渲染到正文时，我的表单很贴出。但是这个问题是容器显示在页面的底部，而不是我想要显示的地方。如果我不使用renderTo属性，我的表单永远不会发布到iframe。几乎看起来像在不使用renderTo属性的情况下，我认为我的表单甚至没有看到iframe。

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

这样可以获取提交的表单，但面板下拉到页面底部。我如何保持其位置，并能够发布。
再次，如果我把这部分出来 renderTo：Ext.getBody（）然后窗体永远不会发布到iframe。

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.

我想知道有没有办法渲染到一个特定的div可能是？

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

EDITED

我尝试过这个

renderTo：'x-panel'

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

推荐答案

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

您还有一个' Wacthout！

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

这篇关于将表单发布到iframe与extjs而不呈现给bidy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！