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