ext中引用ux_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对象 即()

getDoc()

返回iframe窗口的doucment对象

getBody()

返回iframe窗口的body的DOM元素

load(src)

加载src自定的资源

需要说明的问题

源代码里有这样一个函数 initEvents  在这个方法可以给我们的组件添加事件。me.iframeEl 是将DOM元素...包装称为 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: [

'

{title}

',

'

{desc}

'

],

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();

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表单标签和组件的基本用法,父子组件间的通信,直接看例子吧.

WM_PAINT(父子窗口间)

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

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

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

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

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

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

父页面:

&lt ...

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

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

vue的父子组件间的相互传参props及props数据的多种验证机制

感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...

随机推荐

TJI读书笔记10-复用类

TJI读书笔记10-复用类 组合语法 继承语法 代理 final关键字 final的数据 final的参数 final的方法 final的类 初始化和类的加载 乱七八糟不知道怎么归类的知识点 代码复用 ...

php中or的含义

or其实是Php中的短路或 经常看到这样的语句: $file = fopen($filename, r) or die("抱歉,无法打开: $filename"); or在这里是这 ...

正则化，数据集扩增，Dropout

正则化方法:防止过拟合,提高泛化能力 在训练数据不够多时,或者overtraining时,常常会导致overfitting(过拟合).其直观的表现如下图所示,随着训练过程的进行,模型复杂度增加,在tr ...

nagios–配置文件

ngios的配置文件位于/etc/nagios目录下 # ll /etc/nagios 总用量 -rw-rw-r-- nagios nagios 3月 : cgi.cfg -rw-r--r-- roo ...

Android发送通知栏通知

/** * 发送通知 * * @param message */ @SuppressWarnings("deprecation") @SuppressLint("NewA ...

【ASP.NET Web API教程】6 格式化与模型绑定

原文:[ASP.NET Web API教程]6 格式化与模型绑定 6 Formats and Model Binding 6 格式化与模型绑定 本文引自:http://www.asp.net/web- ...

Configure HttpClient correctly

References: [1] http://dev.bizo.com/2013/04/sensible-defaults-for-apache-httpclient.html We have hit ...

(转)java匿名内部类详解

原文:http://android.blog.51cto.com/268543/384844/   内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. *内部类可以是静态static的 ...

go golang 笔试题 面试题 笔试 面试

go golang 笔试题 面试题 笔试 面试 发现go的笔试题目和面试题目还都是比较少的,于是乎就打算最近总结一下.虽然都不难,但是如果没有准备猛地遇到了还是挺容易踩坑的. 就是几个简单的笔试题目, ...

hyperledger fabric部署总结

之前在有道云笔记上分享过,但想想还是搬到这里来吧,以后统一方便整理自己的知识进入正题.... 之前在调研 hyperledger fabric,其实部署说明官网都有,只是东西都是国外的照着操作也会遇到 ...