Ext.ux.ManagedIframe 4.0 alpha2 for Ext 4.x

**DamianHartin** · 8 Jul 2011, 4:17 AM

yay

Thanks Doug

Very much enjoyed the previous incarnations, so looking forward the new version - great work!

**nero00** · 21 Jul 2011, 8:13 AM

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 ?

**hendricd** · 25 Jul 2011, 4:56 AM

Originally Posted by nero00

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:

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

But, note that these will only work for same-origin frames.

**nero00** · 25 Jul 2011, 5:18 AM

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.

**paubach** · 28 Jul 2011, 12:32 AM

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

Code:

                        title: 'Web Accounts',
                        xtype : 'tabpanel',
                        id: 'wAccounts'

And that's the part where I create the tabs:

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]})
            }

eu.length = 2. So, I'm generating 4 tabs. 1st and 3rd with normal content (testing purposes) and 2nd and 4th are MIFP.

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:

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]}})

But wanted to report it anyway.

**hendricd** · 29 Jul 2011, 4:40 PM

@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)!

**koblass** · 17 Aug 2011, 8:16 AM

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

HTML Code:

...
<body>
  <div id="test" style="position:absolute;top:200px;left:200px;width:200px;height:200px">Test div</div>
</body>
...

Then what I would like to do is create a component in my application and attach this component to the "test" div.
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...)

Code:

Ext.core.Element.addToCache(component);

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 :-(

How can I do this ?

Best regards
Daniel

**hendricd** · 31 Aug 2011, 6:09 AM

@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
     }
   }
});

**McQuack_82** · 1 Sep 2011, 8:30 AM

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

**hendricd** · 1 Sep 2011, 9:38 AM

@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:

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 />');
                        }
                    }
                }
           }       
};

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)

.

Thread: Ext.ux.ManagedIframe 4.0 alpha2 for Ext 4.x

Thread Tools

Search Thread

Display

How to "attach" components to dom element present in an iframe ?

I having issues with update function in latest version of manage iframe in extjs 4

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News