Question

我创建了一个iFrame窗口，其中有单独的ext应用程序。

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

在调整大小时，我想访问放置在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']
                }
            }

我的主要iFrame应用

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: []
    }]
});

您能否建议如何实现这一目标。

Answer 1

Javascript基本规则：

＆＃34;全球＆＃34;变量（例如Ext）在window下的树中可用，反之亦然，因此window.Ext.getCmp("MyWinID")和Ext.getCmp("MyWinID")是相同的。

框架的Javascript规则：

window.frames[id]包含所选框架的window元素。

两者一起产生了你的问题的答案，可以在这个简单的例子中总结出来：

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

如何访问iFrame

1 个答案: