yayThanks Doug
Very much enjoyed the previous incarnations, so looking forward the new version - great work!
yayThanks Doug
Very much enjoyed the previous incarnations, so looking forward the new version - great work!
Very awesome. Thank you for this!
Few questions. My goal is to have a mini-browser in the Ext4 desktop example. I'm sort of a noob to Extjs so I might have the answer sitting right in front of me.
How can I have navigation buttons: refresh, back, forward ?
@nero00-
Just add a couple more button handlers to the example:
But, note that these will only work for same-origin frames.Code:{ text : '<< Back', handler : function(button){ var MIF = Ext.ComponentQuery.query('#mifhost > miframe')[0]; if(MIF) { MIF.getContentTarget().getWindow().back(); } } }, { text : 'Forward >>', handler : function(button){ var MIF = Ext.ComponentQuery.query('#mifhost > miframe')[0]; if(MIF) { MIF.getContentTarget().getWindow().forward(); } } }, { text : 'Refresh', handler : function(button){ var MIF = Ext.ComponentQuery.query('#mifhost > miframe')[0]; if(MIF) { MIF.getContentTarget().setSrc(); } } }
"be dom-ready..."
Doug Hendricks
Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.
Got Sencha licensing questions? Find out more here.
Thank you very much for taking the time to do that Doug! Myself and others will find it very useful! Ty again it works great.![]()
Thanks for moving it to 4 Doug.
I'm having a problem, and I'd say it's a bug (or maybe I'm missing something or doing something bad).
I'm creating some MIFP in some tabs of a tabpanel.
That's the tabpanel
And that's the part where I create the tabs:Code:title: 'Web Accounts', xtype : 'tabpanel', id: 'wAccounts'
eu.length = 2. So, I'm generating 4 tabs. 1st and 3rd with normal content (testing purposes) and 2nd and 4th are MIFP.Code:Ext.getCmp('wAccounts').removeAll(); for (var i=0; i < eu.length; i++) { Ext.getCmp('wAccounts').add({html:'miframe'+eu[i],closable:true,autoRender:true,title:eu[i]}) Ext.getCmp('wAccounts').add({xtype:'miframe',closable:true,autoRender:true,src:'https://domino-core.qad.com/zDev/DEVregistration.nsf/RegAcctCAP?OpenForm&login&customer_nbr='+eu[i], title:eu[i]}) }
I can see 1st panel's content, as it loads first. I can then see other tabs content (Normal untill here). BUT once I see/open the first MIFP, I can't see any other panel content. It doesn't matter if it is a normal or MIF panel.
I solved it by adding the MIFP inside a panel:
But wanted to report it anyway.Code:Ext.getCmp('wAccounts').add({closable:true,autoRender:true, title:eu[i],items:{xtype:'miframe',src:'https://domino-core.qad.com/zDev/DEVregistration.nsf/RegAcctCAP?OpenForm&login&customer_nbr='+eu[i]}})
@paubach --
yes, I guess you learned the hard way.
MIF no longer comes in Window, Panel, or portlet formats any more. Component only!
So, for Tabpanels, you'll want to wrap your MIF's in 'fit' panel (with autoScroll: false)!
"be dom-ready..."
Doug Hendricks
Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.
Got Sencha licensing questions? Find out more here.
Hi,
Basically what I'm trying to do is the following :
I want to create a component (in my main application) and "attach" this component to a dom node present in the iframe. So for instance if I load a page with the following html code
Then what I would like to do is create a component in my application and attach this component to the "test" div.HTML Code:... <body> <div id="test" style="position:absolute;top:200px;left:200px;width:200px;height:200px">Test div</div> </body> ...
So I can do something like this :
Code:component = Ext.create('Ext.Component', {style:{position:'absolute', top:0, bottom:0, left:0, right:0}}); component.render(Ext.get('ext-gen1068').get("test")); component.on('click', function(e, target){ console.log('I clicked on my component !'); }, component);
So basically I create a component positioned in absolute in order to "cover" the div and I want this component to be attached to the iframe dom model, but I want this component to be aware of the events present in the application (like click, drag&drop, etc...)
So I tried this code and I get an error due to the element cache reference missing.
This is solved by adding the following line of code (which doesn't always work, don't know why...)
So this is working, I've attached my component to my div, but when I click on by component nothing is displayed on my console :-(Code:Ext.core.Element.addToCache(component);
How can I do this ?
Best regards
Daniel
@Daniel:
The Component class by itself does NOT have click event support (as it could not possibly know what your real event target should be).
Tell it:
Code:var frameDiv = yourMIF.get('test') || yourMIF.getBody(); var component = Ext.create('Ext.Component', { style:{position:'absolute', top:0, bottom:0, left:0, right:0}, renderTo : frameDiv, listeners : { click : { element : 'el', fn : console.info } } });
"be dom-ready..."
Doug Hendricks
Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.
Got Sencha licensing questions? Find out more here.
I'm attempting to insert html into a managed iframe after the frame is load via the load event using the update function passing a html block into the function. My Iframe.aspx is just a placeholder to wrap the content correctly. I used your previous versions and have been very pleased. I really like some of the new functionality that you have added to the new code. I'm guessing my implantation is wrong.
Code:var MIF = { xtype: 'miframe', border: false, id: 'iframePanel', bodyBorder: false, defaultSrc: 'aspx/Iframe.aspx', listeners: { load: function (frame) { console.log(frame); console.log(this); console.log(html); this.update(html); } } }; var printPanel = { itemId: 'printPanel', xtype: 'panel', border: false, items: MIF }; var printWindow = new Ext.Window({ height: 600, width: 800, modal: true, title: 'test', items: printPanel, plain: true, border: false, resizable: true, draggable: true, closable: true, buttonAlign: 'center', buttons: [{ text: 'Close', handler: function () { printWindow.close(); } }, { text: 'Print', handler: function () { //Ext.getCmp('iframePanel').getFrame().getWindow().print(); } }] }); printWindow.show();
@Mc_Quack:
Be mindful of the fact that MIF.update replaces the entire document of the IFRAME. Your wrapper ASPX just didn't survive very long.
Consider this one a bit:
Also, there is no need to over-nest the Component in another Panel, then a Window. Just make it a single item of a 'layout:fit' Window. And be sure to set autoScroll: false on the Window (or unnecessary Panel)Code:{ xtype: 'miframe', border: false, id: 'iframePanel', bodyBorder: false, defaultSrc: 'aspx/Iframe.aspx', listeners: { dataavailable : { //raised when the document DOM is ready (same-origin only) element : 'frameElement', // MIFElement reference fn : function(e, target){ var fly = this.fly('loaded-wrapper-div'); //the loaded container to update if( fly){ fly.update('<markup />'); } } } } };.
"be dom-ready..."
Doug Hendricks
Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.
Got Sencha licensing questions? Find out more here.