实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件

简介:

上面两节中我们分别演示了ExtJS Window的常用功能如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件。

思路很简单,首先创建一个window,然后使用fit布局(这种布局的好处是子元素将填充整个控件),接下来将html属性设置为iframe即可。我们来看看代码:

Ext.onReady(function () {
    Ext.get("btn1").on("click", function () {
        var win = Ext.create("Ext.window.Window", {
            title: "标题 - www.qeefee.com",
            height: 600,
            width: 1000,
            layout: "fit",
            modal: true,
            closable: true,
            animateTarget: "btn1",
            
        });
        win.show();
    });
});

这段代码将在窗口中显示一个iframe,src为iframe要打开的网址。

打开的效果可以通过在线演示看到,不在截图了。




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/extjs-100-examples-window-iframe.html,如需转载请自行联系原作者

相关文章
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
68 0
|
Web App开发 JavaScript 容器
|
JavaScript Perl 前端开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.14 技巧:隐藏和显示footer
当回去使用在用户滚动页面时会显示和隐藏的普通footer时,也可以通过JavaScript代码来触发footer是隐藏还是显示。代码清单9-16演示了这是如何工作的。
1548 0
|
JavaScript 前端开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.11 技巧:在页面下方添加footer
在到目前为止的示例中,你已经见过header和content的div了。同样地,你也可以定义footer的div。当使用footer时,你需要考虑两件事情:footer在屏幕上的位置是什么,以及在footer里面显示什么内容?代码清单9-12在页面的下方添加了一个包含几个按钮的footer。
1571 0
|
JavaScript 前端开发 移动开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.15 技巧:优化header和footer以便全屏查看
jQuery Mobile提供了一个叫做“全屏模式”的功能。它表示,在默认情况下header和footer是覆盖在content上面的,当点击了content区时,header和footer会消失。如果你在手机上安装了Web应用程序(应用程序间有书签图标)或者当你将自己的Web应用程序与原生的Web应用程序框架(比如Phonegap)集成时,你的应用程序就可以全屏显示:没有浏览器的地址栏、工具栏以及状态栏。
1606 0
|
JavaScript 前端开发 索引
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.9 技巧:使用选项卡微件导航页面
在本章的前面,我们引入了折叠菜单微件来组织较大的内容集,并且一次只显示一组内容。选项卡元素具有相似的功能,只存在一些细微的差别。虽然不一定总是正确的,但我还是要说,折叠菜单适合作为主界面侧边上的一个扩展元素,而选项卡元素最好用做主界面本身。
1638 0
|
JavaScript 前端开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.1 技巧:使用折叠菜单微件组织内容
代码清单7-1介绍了折叠菜单(accordin)微件,通过它,可以将内容分组在标题下面,并且每次只显示选定的一组内容。单击另一个标题会关闭当前打开的一组内容然后在选定的标题下展开新的分组。
1718 0