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的用法 以及父子窗口间函数相互调用的更多相关文章

  1. JS方法在iframe父子窗口间的调用

    本文向大家简单介绍一下iframe父子窗口间JS方法调用,JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用,希望本文介绍对你有所帮助. if ...

  2. 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 ...

  3. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  4. WM_PAINT(父子窗口间)

    WM_PAINT(父子窗口间) 窗口句柄(HWND)都是由操作系统内核管理的,系统内部有一个z-order序列,记录着当前从屏幕底部(假象的从屏幕到眼睛的方向),到屏幕最高层的一个窗口句柄的排序,这个 ...

  5. js和vue方法的相互调用(iframe父子页面的方法相互调用)。

    项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...

  6. Iframe父页面与子页面之间的相互调用

    iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...

  7. JavaScript父子页面之间的相互调用

    父页面: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>< ...

  8. [JavaScript]父子窗口间参数传递

    概述 当页面嵌入一个iframe,或者打开一个子窗口.这个时候如果父窗口需要与子窗口之间通讯,如果直接用DOM访问对方窗口window,会受到跨于安全机制影响. javascript提供一个方法,可以 ...

  9. iframe于iframe页面之间的函数相互调用

    因为iframe页面于包括父页面在内的其他页面通讯有跨域问题,所以只有在服务器环境下或者火狐浏览器下才能测试. 在iframe页面调用父页面的函数采用parent,例子:在父页面有一个say()函数, ...

随机推荐

  1. [转]浅析360的危害 & 我为什么推荐卸载360

    http://blog.eqoe.cn/posts/fuck-360-ass.html 首先放一些证据: [视频证据]360安全浏览器暗设后门 360SE.BackDoor.超清可用WMP播放 密码: ...

  2. POJ 1364 King (差分约束)

    King Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8660   Accepted: 3263 Description ...

  3. Linux内核(13) - 子系统的初始化之以PCI子系统为例

    由Kconfig这张地图的分布来看,PCI这块儿的代码应该分布在两个地方,drivers/pci和arch/i386/pci,两岸三地都属于一个中国,不管是drivers/pci那儿的,还是arch/ ...

  4. android动画具体解释一 概述

    动画和图形概述 Android 提供了大量的强大的API以应用于UI动画和绘制2D和3D图形.以下各节向你描写叙述了这些API的预览和系统能力以帮助你决定怎么才是达到你需求的最佳方法. 动画 Andr ...

  5. STM32 可编程电压监测器(PVD)实现数据掉电保存

    STM32内部有一个完整的上电复位和掉电复位电路,当供电电压达到2v时系统即能正常工作. STM32内部自带PVD功能,用于对MCU供电电压VDD进行监控.通过电源控制寄存器中的PLS[2:0]位可以 ...

  6. python 报错 SyntaxError: Non-ASCII character

    报错: SyntaxError: Non-ASCII character 概意思是,默认文件是ASCII格式,需要更改文件编码,操作是在文件首行加上 #!/usr/bin/python # -*- c ...

  7. 由于CentOS的系统安装了epel-release-latest-7.noarch.rpm 导致在使用yum命令时出现Error: xz compression not available问题

    由于CentOS6的系统安装了epel-release-latest-7.noarch.rpm 导致在使用yum命令时出现Error: xz compression not available问题.解 ...

  8. 怎么使用 ab.exe 测试多个url。 how to use ab.exe test many url

    from a commandline in windows: for /F %q in (list.txt) DO ab -n 1000 https://test.com/search?%q   I ...

  9. THINKPHP导入全部post参数

    @extract($_POST);//导入全部POST参数直接使用变量

  10. 服务器搭建1 安装mysql数据库

    一,安装mysql-service (1)检查系统中是否已经安装mysql 在终端里面输入 sudo netstat -tap | grep mysql 若没有反映,没有显示已安装结果,则没有安装.若 ...