Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用
Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用
Ext.ux.IFrame Extjs官方提供的一个组件,可以很方便的使用。
这样就完成了一个简单的IFrame的使用,通过Extjs的扩展 它变成了一个组件 可以放在任何容器内 并且支持父容器的布局 很灵活
var iframe = Ext.create("Ext.ux.IFrame", {
frameName: 'hello',
src: "MyJsp.jsp"
}); Ext.create("Ext.Panel", {
layout: "fit",
items: iframe,
renderTo: Ext.getBody(),
width: 300,
height: 300,
title: "Panel里面是一个Iframe"
});
Ext.ux.IFrame 常用的几个方法,文档中没有,看源码的时候知道的!
getWin()
返回iframe的窗口对象 即(window)
getFrame()
返回iframe元素的dom对象 即(<iframe src="{src}" name="{frameName}" width="100%" height="100%" frameborder="0"></iframe>)
getDoc()
返回iframe窗口的doucment对象
getBody()
返回iframe窗口的body的DOM元素
load(src)
加载src自定的资源
需要说明的问题
源代码里有这样一个函数 initEvents 在这个方法可以给我们的组件添加事件。me.iframeEl 是将DOM元素<iframe>...</iframe>包装称为 Ext.dom.Element对象
这样就可以给这个元素添加事件了。 注意这里的load的事件[ 来自文档:Only supported by window, frames, objects and images.]
说明只支持windon frames objects images 这4种元素
initEvents : function() {
var me = this;
me.callParent();
me.iframeEl.on('load', me.onLoad, me);
}
源代码里有这样一个函数,当一个组件使用了renderTpl的时候,那么可以使用renderSelectors这个属性 来为renderTpl里面的元素生成
Ext.Element对象.
Ext.apply(this.renderSelectors, {
iframeEl: 'iframe'
});
Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
renderTpl: [
'<h1 class="title">{title}</h1>',
'<p>{desc}</p>'
],
renderData: {
title: "Error",
desc: "Something went wrong"
},
renderSelectors: {
titleEl: 'h1.title',
descEl: 'p'
},
listeners: {
afterrender: function(cmp){
// After rendering the component will have a titleEl and descEl properties
cmp.titleEl.setStyle({color: "red"});
}
}
});
JavaScript原生父子窗口间相互调用
子窗口调用父窗口 window.parent.func();
父窗口调用子窗口 window.frames['iframeName'].func();
Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用的更多相关文章
- JS方法在iframe父子窗口间的调用
本文向大家简单介绍一下iframe父子窗口间JS方法调用,JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用,希望本文介绍对你有所帮助. if ...
- ExtJS 4 在Ext.tab.Panel中使用Ext.ux.IFrame打开url指向的网页
ext-4.2.1.883\examples\ux\IFrame.js ext-4.2.1.883\examples\ux\TabCloseMenu.js 复制到 \Scripts\ext-4.2.1 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- WM_PAINT(父子窗口间)
WM_PAINT(父子窗口间) 窗口句柄(HWND)都是由操作系统内核管理的,系统内部有一个z-order序列,记录着当前从屏幕底部(假象的从屏幕到眼睛的方向),到屏幕最高层的一个窗口句柄的排序,这个 ...
- js和vue方法的相互调用(iframe父子页面的方法相互调用)。
项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...
- Iframe父页面与子页面之间的相互调用
iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...
- JavaScript父子页面之间的相互调用
父页面: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>< ...
- [JavaScript]父子窗口间参数传递
概述 当页面嵌入一个iframe,或者打开一个子窗口.这个时候如果父窗口需要与子窗口之间通讯,如果直接用DOM访问对方窗口window,会受到跨于安全机制影响. javascript提供一个方法,可以 ...
- iframe于iframe页面之间的函数相互调用
因为iframe页面于包括父页面在内的其他页面通讯有跨域问题,所以只有在服务器环境下或者火狐浏览器下才能测试. 在iframe页面调用父页面的函数采用parent,例子:在父页面有一个say()函数, ...
随机推荐
- docker login harbor出现的报错Error response from daemon: Get https://172.16.1.99/v1/users/: dial tcp 172.16.1.99:443: getsockopt: connection refused解决方法
出现的问题 [root@master01 ~]# docker login 172.16.1.99 Username: admin Password: Error response from daem ...
- Python 的 pandas 实践
Python 的 pandas 实践: # !/usr/bin/env python # encoding: utf-8 __author__ = 'Administrator' import pan ...
- Python练习笔记——斐波那契数列
斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一 ...
- RHEL7 -- 识别文件系统和设备
逻辑卷依赖于设备映射程序(DM)内核驱动程序. 比如有个逻辑卷组rhel中有一个逻辑卷root,对应的设备为/dev/rhel/root.符号链接/dev/rhel/root指向/dev/dm-< ...
- Linux内核(1) - Kernel地图:Kconfig与Makefile
Makefile不是Make Love 从前在学校,混了四年,没有学到任何东西,每天就是逃课,上网,玩游戏,睡觉.毕业的时候,人家跟我说Makefile我完全不知,但是一说Make Love我就来劲了 ...
- [转]Google 全球 IP 地址库
IP 地址来源:http://www.kookle.co.nr Bulgaria 93.123.23.1 93.123.23.2 93.123.23.3 93.123.23.4 93.123.23.5 ...
- python标准库介绍——15 fileinput 模块详解
``fileinput`` 模块允许你循环一个或多个文本文件的内容, 如 [Example 2-1 #eg-2-1] 所示. ====Example 2-1. 使用 fileinput 模块循环一个文 ...
- ubuntu14.4安装gtx970显卡驱动的艰辛历程
1 说明: 本人机器说明,显卡gtx970,内存4G,原来系统是win7 64的.最近要学习机器学习的一些算法,需要安装ubuntu.不过安装环境这一条道路真的很曲折,来来回回弄了好久.以下说一下配置 ...
- sqlite时间戳转时间语句(时间转时间戳)实例
sqlite时间戳转时间.时间转时间戳的方法 实现代码: sqlite, 'unixepoch', 'localtime'); +----------------------------------- ...
- 基于FPGA的异步FIFO验证
现在开始对上一篇博文介绍的异步FIFO进行功能验证,上一篇博文地址:http://blog.chinaaet.com/crazybird/p/5100000872 .对异步FIFO验证的平台如图1所示 ...