ExtjS的window内嵌入iframe的使用方法

最新推荐文章于 2019-11-26 18:12:23 发布

flyz0001

最新推荐文章于 2019-11-26 18:12:23 发布

阅读量9.5k

点赞数

分类专栏： ext 文章标签： extjs iframe stylesheet button html function

本文链接：https://blog.youkuaiyun.com/flyz0001/article/details/6604365

版权

ext 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在ExtJS中使用Window组件嵌入iframe，避免页面过于臃肿。通过创建一个按钮，点击按钮弹出一个含有iframe的窗口，iframe加载指定网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Extjs的时候经常要用的一种方法，有的时候不能把HTML页面都放在一个window里面，那样页面很非常庸肿，而是用iframe来设置嵌套直接看效果吧

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>EXTJS-window弹出窗口</title>
    <link href="../ext-3.2.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="../ext-3.2.2/adapter/ext/ext-base.js" type="text/javascript"></script>

    <script src="../ext-3.2.2/ext-all.js" type="text/javascript"></script>

    <script type="text/javascript">
    Ext.onReady(function(){
        var win;
        var button= new Ext.Button({
       // renderTo:Ext.getBody(),
        renderTo:’button1′,
        text:"点击打开窗口",
        listeners:{
        "click":function()     {
        if(!win){
            win = new Ext.Window({
                applyTo:’hello-win’,
                title:’新建的窗口’,
                layout:’fit’,
                width:640,
                height:480,
                closeAction:’hide’,
                plain: true,

                items: [{ title: '弹出的窗口',
                                    header:false,
                                    html : '<iframe style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; width: 728px; height: 455px; border-right-width: 0px" src=http://www.google.com frameborder="0" width="100%" scrolling="no" height="100%"></iframe>',
                                    border:false
                                }]

            });
        }
        win.show(this);
             }
        }
        });
    });

    </script>

</head>
<body>
    <div id="button1">
    </div>
    <div id="hello-win" class="x-hidden">
</body>
</html>