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