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.
Javascript basic rule:
"global" variables (eg
Ext
) are available in the tree underwindow
and vice versa, sowindow.Ext.getCmp("MyWinID")
andExt.getCmp("MyWinID")
are the same.
Javascript rule for frames:
window.frames[id]
contains the selected frame'swindow
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();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.