ExtJS Panel中放入iframe的三种方法

最新推荐文章于 2021-05-31 07:29:33 发布

原创最新推荐文章于 2021-05-31 07:29:33 发布 · 718 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Ajax

当前文章被收录于：

Ajax

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了三种在Ext.Panel组件中加载IFRAME的方法：直接创建IFRAME元素并将其作为Panel的items属性的一部分；使用html配置选项内联IFRAME；预先在HTML文件中添加IFRAME并通过contentEl指向它。

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

标签

#EXT #HTML