上面两节中我们分别演示了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",
html: '<iframe style="overflow:auto;width:100%; height:100%;" src="http://youring2.cnblogs.com" frameborder="0"></iframe>'
});
win.show();
});
});

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

实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件的更多相关文章

  1. 实用ExtJS教程100例-001:开天辟地的Hello World

    ExtJS功能繁多,要想彻底的了解确实很困难.作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验 ...

  2. 实用ExtJS教程100例-007:ExtJS中Window组件最小化

    在上一节中我们演示了如何使用ExtJS的Window组件,这篇内容中我们来演示一下如何将窗口最小化. 要让ExtJS标题栏中显示最小化按钮并不麻烦,只需要设置 minimizable: true 即可 ...

  3. 实用ExtJS教程100例-003:进度条对话框Ext.MessageBox.progress

    在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext ...

  4. 实用ExtJS教程100例-011:ExtJS Form 使用JSON数据赋值和取值

    上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新E ...

  5. 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据

    ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...

  6. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  7. 实用ExtJS教程100例-006:ExtJS中Window的用法示例

    在前面几个示例中,我们演示了MessageBox的各种用法,今天这篇文章将演示如何使用Window. 我们首先来创建一个窗口: var win = Ext.create("Ext.windo ...

  8. 实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show

    我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法 进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的 ...

  9. 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait

    在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...

随机推荐

  1. mysql 索引理解

    数据的查询,都需要将数据从磁盘中加载到内存中进行运算加载,索引的出现,让原来每个数据块做一次IO减少为区间范围的快速定位,来减少块的io次数. 如上图,是一颗b+树,关于b+树的定义可以参见B+树,这 ...

  2. 【struts2基础】配置详解

    一.struts2工作原理(网友总结,千遍一律) 1 客户端初始化一个指向Servlet容器(例如Tomcat)的请求2 这个请求经过一系列的过滤器(Filter)(这些过滤器中有一个叫做Action ...

  3. open-falcon v0.2 监控部署记录

    前言 好吧,不知道为什么要写,其实,官方文档已经很详细.但是,总是想写点什么,怕自己忘记了.那就简单说说吧,在部署过程中,发现官方文档和我想的不一样,可能是我按照顺序习惯了,所以想从新跟着顺写来记录一 ...

  4. 2017 JUST Programming Contest 2.0 题解

    [题目链接] A - On The Way to Lucky Plaza 首先,$n>m$或$k>m$或$k>n$就无解. 设$p = \frac{A}{B}$,$ans = C_{ ...

  5. Python中collections.defaultdict()使用

    一个小示例 from collections import defaultdict import json def tree(): return defaultdict(tree) users = t ...

  6. 004.MySQL主库手动复制至从库

    一 主库手动复制至从库 1.1 Master主库锁表 mysql> flush tables with read lock; Query OK, 0 rows affected (0.00 se ...

  7. jqplot导入包小结

    对于jqplot画图的导入包,总结起来就是两种,一种是每个jsp文件都是导入一样的js或css包!这些包可以另新建一个文件存放,有如下这些包! <link rel="styleshee ...

  8. rabbitmq学习(九) —— 关于消息队列的选型

    转自http://cmsblogs.com/?p=3846 在IM这种讲究高并发.高消息吞吐的互联网场景下,MQ消息中间件是个很重要的基础设施,它在IM系统的服务端架构中担当消息中转.消息削峰.消息交 ...

  9. Servlet接口、GenericServlet类、HttpServlet类

    Servlet是最顶层的接口,其提供的方法有: init(ServletConfig config):void // 初始化 getServletConfig():ServletConfig // 取 ...

  10. BZOJ.3998.[TJOI2015]弦论(后缀自动机)

    题目链接 \(Description\) 给定字符串S,求其第K小子串.(若T=0,不同位置的相同子串算1个:否则算作多个) \(Solution\) 建SAM,处理出对于每个节点,它和它的所有后继包 ...