如何访问 iFrame 的 main

Question

I have created one iFrame window and in that there is separate ext app.

Win = new Ext.IframeWindow({
                        id: 'MyWinID',
                        modal: true,
                        resizable: true,
                        title: 'H1',
                        closable: true,
                        constrain : true,
                    });
    Win.width = (winWidth / 100) * 90,
    Win.height = (winHeight / 100) * 90,
    Win.show().center();

On the resize I wanted to access the app which is placed in iFrame.

listeners :{
            resize : function(a,b,c){
                // How to access element of main at this point. I am trying this
                var WinFrame =  window.frames['MyWinID']
                }
            }

My main of iFrame app is

Ext.define('My.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.tab.Panel',
    ],

    controller: 'main',
    viewModel: 'main',
    layout: 'border',

    items: [{
        xtype: 'toolbar',
        frame: true,
        region: 'south',
        items: [ some item]
    },
    {
        title: 'App',
        itemId: 'selectionPanel',
        region: 'west',
        xtype: 'panel',
        scroll: 'y',
        frame: true,
         items: []
    },
    {
        xtype: 'panel',    
        region: 'center',
        frame: true,
        scrollable: true,
        scroll: 'y',    
        itemId: 'abc',
        reference: 'abc',
        layout: {
            //type: 'anchor',
            type: 'vbox',
            align: 'stretch'
        },
        items: []
    }]
});

Can you please suggest how to achieve this.

Answer 1

Javascript basic rule:

"global" variables (eg Ext ) are available in the tree under window and vice versa, so window.Ext.getCmp("MyWinID") and Ext.getCmp("MyWinID") are the same.

Javascript rule for frames:

window.frames[id] contains the selected frame's window element.

Both together yield the answer your question, which can be summarized in this simple example:

window.frames['MyAppFrame'].Ext.getCmp("MyTestContainer").add({
    xtype:'button',
    handler:function(btn) {
        btn.up('form').submit();
    }
});