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

 

 

 

 

你可能感兴趣的:(iframe)