Extjs 4.2.1 iframe 大小问题

Question

我正在尝试在容器内渲染 iframe，但 iframe 没有被拉伸到全屏。

var htmlInputs = '<input type="hidden" name="amount" value="100.00">' +
            '<input type="hidden" name="currency" value="AUD">';
       {
html: '<iframe scrolling="yes" name="iframe" src="" style="overflow:visible; display:block; position:relative; width=100%; height=100%;"  id="iframe"></iframe>' +
                '<form style="float:right;display:none;" method="post" target="ifrmae" id="ingenicoForm" name=iframeaction="https://*********">' +
                htmlInputs +
                '</form>' ,
            xtype: 'container',
            listeners: {
                afterrender: function() {
                    var form = Ext.getElementById('iframe');
                    form.submit();
                }
     
}

Iframe 在页面的一个角落呈现，如所附图像所示。我想让这个 iframe 拉伸整个屏幕。

我尝试了很多东西，但仍然无法正常工作， 如有任何帮助，我们将不胜感激。

Attached Image

Answer 1

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var htmlInputs = '<input type="hidden" name="amount" value="100.00">' +
            '<input type="hidden" name="currency" value="AUD">';
        Ext.create('Ext.container.Container', {
            layout: 'fit',
            html: '<iframe scrolling="yes" name="iframe" src="" style="overflow:visible; display:block; position:relative; width: 100%; height: 100%; border: 5px solid red;"  id="iframe"></iframe>' +
                '<form style="float:right;display:none;" method="post" target="ifrmae" id="ingenicoForm" name=iframeaction="https://*********">' +
                htmlInputs +
                '</form>',
            listenersss: {
                afterrender: function () {
                    var form = Ext.getElementById('iframe');
                    form.submit();
                }
            },
            width: 200,
            height: 300,
            style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'5px'},
            renderTo: Ext.getBody()
        })
    }
});