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