24

I am in need of creating an iFrame Window in Extjs. Previously in ExtJS 3.x I would do this:

bodyCfg: {
    tag: 'iframe'
}

But the Window Class of ExtJS 4 seems not to have a bodyCfg.

Any ideas on how to make an iFrame ExtJS 4 Window?

neolaser
  • 6,722
  • 18
  • 57
  • 90

1 Answers1

48

I think autoEl is what you are looking for...

Some advice from me, in Ext 4.x don't use autoEl as a window config property, it can make your window malformed.. I suggest you to use autoEl in a component (items of your window)

new Ext.Window({
    title : "iframe",
    width : 300,
    height: 300,
    layout : 'fit',
    items : [{
        xtype : "component",
        autoEl : {
            tag : "iframe",
            src : "http://www.yahoo.com"
        }
    }]
}).show();

The code above is better than

new Ext.Window({
    title : "iframe",
    width : 300,
    height: 300,
    layout : 'fit',
    autoEl : {
       tag : "iframe",
       src : "http://www.yahoo.com"
    }
}).show();

Note: currenty you can't load Google and Facebook inside an iframe

Geo
  • 12,666
  • 4
  • 40
  • 55
Egy Mohammad Erdin
  • 3,402
  • 6
  • 33
  • 57
  • 7
    In case you want to change the iframe src dynamically, call the following code through your srcUpdate function: `Ext.getDom('iframe-win').src = "http://www.yahoo.com";` – Aniruddha Jagtap Oct 18 '11 at 11:07
  • 2
    It is important with 4.2 to use "component" (as shown above) instead of "container", although why I do not know. `"container"` will fail to grow/shrink and will throw an error about calling setstyle on null. – boatcoder Feb 04 '14 at 21:56
  • 1
    Refused to display 'https://www.yahoo.com/' in a frame because it set 'X-Frame-Options' to 'DENY'. – Usman Hayat Khan Nov 20 '15 at 10:37
  • 2
    I have no idea why, but ours refused to work with `src`. So, we instead used `html: '` and it worked great. – cbmeeks Jan 17 '17 at 14:49