Extjs 4：创建一个iFrame窗口

Question

我需要在ExtJS中创建一个iFrame窗口。以前在ExtJS 3.x中，我会这样做：

bodyCfg: {
    tag: 'iframe'
}

但是在ExtJS 4中的Window类似乎没有bodyCfg属性。

有什么方法可以创建一个带有iFrame的ExtJS 4窗口吗？

- neolaser

Answer 1

我认为autoEl是你要寻找的东西...

我的建议是，在Ext 4.x中不要将autoEl用作window配置属性，否则会导致窗口格式错误.. 我建议你在window的component（即窗口的子项）中使用autoEl 。

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

以上代码比

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

注意：目前无法在 iframe 中加载 Google 和 Facebook

- Egy Mohammad Erdin

---

如果你想动态更改 iframe 的 src，可以通过调用以下代码来实现，在你的 srcUpdate 函数中：Ext.getDom('iframe-win').src = "http://www.yahoo.com"; - Aniruddha Jagtap

使用4.2版本时，使用“组件”（如上所示）而不是“容器”非常重要，尽管我不知道为什么。 “容器”将无法增长/缩小，并会抛出有关在null上调用setstyle的错误。 - boatcoder

因为它将“X-Frame-Options”设置为“DENY”，所以拒绝在框架中显示“https://www.yahoo.com/”。 - Usman Hayat Khan

我不知道为什么，但是我们的代码在使用 src 时无法正常工作。因此，我们改用了 html: '<iframe src="http://example.com" width="100% height="100%"></iframe>，它运行得很好。 - cbmeeks