add an iframe to container in extjs

Question

I want to add my javascript generated iframe to a panel. this is extjs 4.x version and I am new to extjs here is my code to get the panel and container

function generatePanel(){ 
....
....
    var thecontainer = Ext.create('Ext.form.FieldSet', {
            title: "my container",
            labelWidth: 1,
            bodyStyle: "padding-right:5px;padding-left:5px;",
            layout: 'anchor', 

        });

var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", "http://google.com/");
    ifrm.setAttribute("name", "myIframe");
    ifrm.style.width = "640px";
    ifrm.style.height = "480px";
    document.body.appendChild(ifrm);

....
}

this works fine but the iframe is not within the container. it shows up at the bottom of the page. What am I doing wrong?

Answer 1

You can create the iframe as an item of your container like:

var thecontainer = Ext.create('Ext.form.FieldSet', {
        title: "my container",
        labelWidth: 1,
        bodyStyle: "padding-right:5px;padding-left:5px;",
        layout: 'anchor', 
        items: [{
            xtype: 'box',
            autoEl: {
                tag: 'iframe',
                src: '//example.com',
                width: 640,
                height: 480
            }
          }
        ]
    });

Or:

thecontainer.add({
        xtype: 'box',
        autoEl: {
            tag: 'iframe',
            src: '//example.com',
            width: 640,
            height: 480
        }
      });

Working example: https://fiddle.sencha.com/#fiddle/1f83