ExtJS Panel中放入iframe的三种方法

 

//way 1   //it works
        var frame1 = document.createElement("IFRAME");
        frame1.id = "frame1";
        frame1.frameBorder = 0;
        frame1.src = "reports/empty-report.html"; 
        frame1.height = "100%";
        frame1.width = "100%"; 
        
        var panel2 = new Ext.Panel( {
            id : "panel2",
            items: [ frame1 ]
            //contentEl: "frame1" //this won't work
            });
            
//way 2  //it works, too
        var panel2 = new Ext.Panel( {
                id:  "panel2",
                fitToFrame: true,                
                html: '<iframe id="frame1" src="../examples/layout/table.html" frameborder="0" width="100%" height="100%"></iframe>'
            }); 

//way 3  //it works
// first, we need to add a line in HTML
//<iframe id="frame1_rename" frameborder="0" height="100%" width="100%" src="reports/empty-report.html"/>            
        var panel2 = new Ext.Panel( {
                id:  "panel2",
                contentEl: "frame1"
            });  

// 后面将frame导航到其它URL
     document.getElementById("frame1").src = "/extjs3/examples/layout/vbox.html";