iframeextjsextjs4extjs4.1extjs4.2

Extjs 4.2.1 Iframe size issue

I am trying render iframe inside a container, but iframe is not getting stretched to full screen.

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 is getung renders at one corner of the page as in image attached. I want to have this iframe streteched entire screen.

I have tried many things but still its not working, Any help would be appriciated.

Attached Image

Solution

  • enter image description here

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