将 iframe 添加到 extjs 中的容器

Question

我想将我的 javascript 生成的 iframe 添加到面板。这是 extjs 4.x 版本，我是 extjs 的新手这是我获取面板和容器的代码

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

....
}

这工作正常，但 iframe 不在容器内。它显示在页面底部。我做错了什么？

Answer 1

您可以将 iframe 创建为容器的一个项目，例如：

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

或者：

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

工作示例：https://fiddle.sencha.com/#fiddle/1f83

将 iframe 添加到 extjs 中的容器

add an iframe to container in extjs

extjs

extjs4

extjs4.1

extjs4.2

extjs3