Extjs打开window窗口自动加载html网页

简介: Window inherits the autoLoad config option from Panel. Note that I included all config options below, where most are optional: var w = new Ext.

 

Window inherits the autoLoad config option from Panel. Note that I included all config options below, where most are optional:

var w = new Ext.Window({
  autoLoad: {
    url: "someApplicationURL",
    params: {
      firstName: "Shuman",
      lastName: "Human"
    },
    callback: someCallbackFuncion,
    scope: someObjectObject,
    discardUrl: true,
    nocache: true,
    text: "Loading...",
    timeout: 60,
    scripts: false
  },
  height: 300,
  width: 600
});

Keep in mind that this only supports URLs which are in the context of your application's domain, i.e. you can't plug in a URL of 'http://www.google.com' and expect it to work.

意思是说只能打开自己的应用程序,而网上的类似百度谷歌打不开的。只能在window里面内嵌一个panel即可打开

 

LOOK:

<script type="text/javascript">
    var center=new Ext.TabPanel({
        style:"padding:0 5px 0 5px",
        region:"center",
        activeItem:0,
        enableTabScroll:true,
        layoutOnTabChange:true,
        autoScroll:true,
        items:[{
            xtype:"panel",
            id:"index",
            iconCls:"homemanage",
            title:"测试",
            html:"<iframe src='http://www.geg.cn'scrolling='yes' frameborder=0 width=100% height=100%></iframe>"
        }]
    });
 
    Ext.onReady(function(){
        var vp=new Ext.Viewport({
            layout:"border",
            items:[center]
        });
    })
 
    </script>

我自己写了一个,也基本上差不多就是这个样子:

seePdfDocument : function(){
                if(!this.seePdfWin){
                    this.seePdfWin = new Ext.Window({
                                title : docNo + '报表预览页',
                                modal : true,
                                width : 1270,
                                height : 600,
                                layout : 'fit',
                                draggable : true,
                                resizable : true,
                                closeAction : 'hide',
                                //autoLoad : { url: 'http://www.qq.com',scripts: true, nocache: true}
                                 
                                items:[{
                                        xtype:"panel",
                                        id:"index",
                                        iconCls:"homemanage",
                                        title:"baidu一下 你就know",
                                        html:"<iframe src='http://www.baidu.com'scrolling='yes' frameborder=0 width=100% height=100%></iframe>"
                                    }]
                                //items : [pdfHeadManagerPanel]
                            });
                }
                    this.seePdfWin.show();
           }

 

目录
相关文章
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
3月前
|
移动开发 前端开发 数据安全/隐私保护
HTML的基本语法以及如何使用HTML来创建网页
HTML的基本语法以及如何使用HTML来创建网页
75 0
|
3月前
|
存储 缓存 前端开发
探索HTML的黑科技:让你的网页变得无与伦比!(二)
探索HTML的黑科技:让你的网页变得无与伦比!
|
3月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
40 6
|
3月前
|
XML 移动开发 前端开发
HTML5简介(什么是网页、什么是 HTML、Web标准)
网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
37 0
|
1月前
自适应窗口图片轮播HTML代码
自适应窗口图片轮播HTML代码
20 2
自适应窗口图片轮播HTML代码
|
1月前
|
搜索推荐 前端开发 JavaScript
打造个性化的个人网页:从HTML到个人品牌
打造个性化的个人网页:从HTML到个人品牌
21 0
|
1月前
|
JavaScript 前端开发
HTML网页自动刷新_kaic
HTML网页自动刷新_kaic
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始