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