实用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",
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组件的更多相关文章
- 实用ExtJS教程100例-001:开天辟地的Hello World
ExtJS功能繁多,要想彻底的了解确实很困难.作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验 ...
- 实用ExtJS教程100例-007:ExtJS中Window组件最小化
在上一节中我们演示了如何使用ExtJS的Window组件,这篇内容中我们来演示一下如何将窗口最小化. 要让ExtJS标题栏中显示最小化按钮并不麻烦,只需要设置 minimizable: true 即可 ...
- 实用ExtJS教程100例-003:进度条对话框Ext.MessageBox.progress
在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext ...
- 实用ExtJS教程100例-011:ExtJS Form 使用JSON数据赋值和取值
上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新E ...
- 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据
ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- 实用ExtJS教程100例-006:ExtJS中Window的用法示例
在前面几个示例中,我们演示了MessageBox的各种用法,今天这篇文章将演示如何使用Window. 我们首先来创建一个窗口: var win = Ext.create("Ext.windo ...
- 实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show
我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法 进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的 ...
- 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
随机推荐
- React 中 context 的使用
官方文档说明(英) 看了别人写的中文博客,再看了官方英文文档,发现还是官方文档讲的浅显易懂一些,看了之后,半翻译半理解地写了这篇博客,更易于新手理解. 介绍 context 是在 react @ 0. ...
- 【LOJ】#2888. 「APIO2015」巴邻旁之桥 Palembang Bridges
题解 发现我们选择一座桥会选择力\(\frac{s + t}{2}\)较近的一座桥 然后我们只需要按照\(s + t\)排序,然后枚举断点,左边取所有s和t的中位数,右边同理 动态求中位数用平衡树维护 ...
- nginx 添加https 配置
#user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...
- vue在生产环境清除console.log
在开发环境中我们喜欢用console.log测试代码,但是部署到生产环境我们不可能一个一个把console.log给手动删除了. 在build/webpack.prod.conf.js文件里加上这样一 ...
- 前馈神经网络练习:使用tensorflow进行葡萄酒种类识别
数据处理 样本数据描述 样本数据集是double类型的178 * 14矩阵,第一列表示酒所属类别,后面13列分别表示当前样本的13个属性: 1) Alcohol 2) Malic acid 3) As ...
- Mysql创建用户并授权以及开启远程访问
Mysql创建用户并授权以及开启远程访问 一.创建用户并授权 1.登录mysql mysql -u root -p 2.创建数据库 create database test;//以创建test ...
- ubuntu18.04 安装mysql不出现设置 root 帐户的密码问题(装)
ubuntu18.04 安装mysql不出现设置 root 帐户的密码问题 https://blog.csdn.net/NeptuneClouds/article/details/80995 ...
- 014.Zabbix的Agent key
一 常见key 1.1 监控网卡流量的key net.if.{in/out}[if,<mode>] if表示网卡接口,mode表示取值类型. mode参数:bytes(默认),packet ...
- 立FLAG-书单
立FLAG-书单 ### 懒散的文字懒散的我 总是自以为是个爱读书的人,但是总是懒懒散散,书读一点就放下了,导致了两个月前就已经说是要计划看望的<林徽因传>到现在还剩着一小半没看完.想着, ...
- [JSOI2015]最小表示
题目大意:尽可能多地去掉一个有向无环图上的边,使得图的连通性不变. 思路:拓扑排序,然后倒序求出每个结点到出度为$0$的点的距离$d$,再倒序遍历每一个点$x$,以$d$为关键字对其出边降序排序,尝试 ...