將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