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

[hendricd]

@rkim--

Iframe page loading is asynchronous. So, use the listeners : { } to wait for the dataavailable event to fire, THEN interact with the frame document (see the example page included in the zip for other samples)

{
      xtype   : 'miframe',
      src       : 'yournestedExtpage.html',
   
      listeners: {
                dataavailable : {    //raised when the document DOM is ready (same-origin only)
                    element : 'iframeElement',  // MIFElement reference
                    scope    : 'iframeElement'',
                    fn : function(e, target){
                        var win = this.getWindow();
                        if( win){
                              if( win.Ext && win.MyApp ) {
                                      win.MyApp.iframefunction();
                              }
                        }
                    }
                }
        }
  }

1) Is above the recommended way of accessing functions in iframe document ?

Never add (expando) new methods/props on the document object. If you are truly loading ANOTHER Ext page into the frame, setup a namespace to keep your variable and functions:
//

yournestedExtpage.html

<script>
 Ext.onReady()
  {
    Ext.ns ( 'MyApp' );
    MyApp.iframefunction = function()
    {
       alert("Test");
    }
  }
</script>

2) Is there any performance issue of loading each page in ManagedIframe?

Yes, IFRAMEs are expensive to operate. Use them to isolate CSS/bad behavior from your parent page. There are good reasons to use them (adWare, media, PDFs, mashups/portals, legacy App migration, etc), but they do take their toll.

3) Is there any document that I can reference other than looking at code ?

My signature block below has links the documentation site and FAQ for the previous release. As this is still an Alpha release, there is not yet official docs for this version yet. There are several new feature but the MIF.Element methods are largely the same.

Study the zip-enclosed mif.js example closely. Much can be garnered from that.

Good hunting

[rkim]

@rkim--

Iframe page loading is asynchronous. So, use the listeners : { } to wait for the dataavailable event to fire, THEN interact with the frame document (see the example page included in the zip for other samples)

{
      xtype   : 'miframe',
      src       : 'yournestedExtpage.html',
   
      listeners: {
                dataavailable : {    //raised when the document DOM is ready (same-origin only)
                    element : 'iframeElement',  // MIFElement reference
                    scope    : 'iframeElement'',
                    fn : function(e, target){
                        var win = this.getWindow();
                        if( win){
                              if( win.Ext && win.MyApp ) {
                                      win.MyApp.iframefunction();
                              }
                        }
                    }
                }
        }
  }

1) Is above the recommended way of accessing functions in iframe document ?

Never add (expando) new methods/props on the document object. If you are truly loading ANOTHER Ext page into the frame, setup a namespace to keep your variable and functions:
//

yournestedExtpage.html

<script>
 Ext.onReady()
  {
    Ext.ns ( 'MyApp' );
    MyApp.iframefunction = function()
    {
       alert("Test");
    }
  }
</script>

2) Is there any performance issue of loading each page in ManagedIframe?

Yes, IFRAMEs are expensive to operate. Use them to isolate CSS/bad behavior from your parent page. There are good reasons to use them (adWare, media, PDFs, mashups/portals, legacy App migration, etc), but they do take their toll.

3) Is there any document that I can reference other than looking at code ?

My signature block below has links the documentation site and FAQ for the previous release. As this is still an Alpha release, there is not yet official docs for this version yet. There are several new feature but the MIF.Element methods are largely the same.

Study the zip-enclosed mif.js example closely. Much can be garnered from that.

Good hunting

Thanks for the info !!

[pkli]

Hi Doug.

No news about alpha 3 ?
Or maybe an alpha 2b resolving the "hide menu on click in iframe" bug ? :-)

Phil

[rkim]

Hi Doug,

I have just upgraded the ext to 4.1 and seems to have some issue with multidom.js
I will take a look as well where the problem is.. if you see the problem, can you let me know ??


http://www.sencha.com/forum/showthre...a2-for-Ext-4.x

[hendricd]

Hi Doug,

I have just upgraded the ext to 4.1 and seems to have some issue with multidom.js
I will take a look as well where the problem is.. if you see the problem, can you let me know ??

@rkim --

MIF 4.0/multidom is NOT compatible with 4.1.anything.

That said, MIF 4.1 is undergoing testing under the 4.1-beta (as the internals have changed considerably in that release). If you are not using Ext.core.Element methods to query/manipulate IFRAME documents you can probably continue to use the 4.0 version of the MIF component only -- until MIF 4.1 is released....

[rkim]

Thank for your response.
Just wondering the roadmap for MIF 4.1 ?

@rkim --

MIF 4.0/multidom is NOT compatible with 4.1.anything.

That said, MIF 4.1 is undergoing testing under the 4.1-beta (as the internals have changed considerably in that release). If you are not using Ext.core.Element methods to query/manipulate IFRAME documents you can probably continue to use the 4.0 version of the MIF component only -- until MIF 4.1 is released....

[mfalnes1]

Receiving the error "dom.getBoundingClientRect is not a function" (ext-all-debug.js line 8849) when trying to re-size a panel and the javascript file multidom.js is included. The resizing works fine when the multidom.js is NOT included. I am using ext-js 4.0.7. Is this a known issue? Any other ideas?

Attached is a zip file containing an html file which can be dropped into the ext-js examples folder. The panel is resizable on the south border. With the multidom.js included in the html then the resizing does not work. Remove the multidom.js and the resizing will work.

Thanks for your help.

[hendricd]

@mfalnes1 --

Thanks for the report. I'll run some tests.

On what browser(s) are you seeing this behavior?

[mfalnes1]

Thanks Doug,

I was able to replicate the issue in Chrome, Firefox and IE 9. IE9 is giving a different error.

SCRIPT5007: Unable to get value of the property 'overflow': object is null or undefined
ext-all-debug.js, line 8829 character 17

Also my previous example had a problem in IE and I have attached an updated example.

Thanks for your help.

[hendricd]

Fix this first:

items : [{
                xtype : 'panel',
                border : true,
                height: 400,
                layout : 'fit',
                html: 'Resizable Panel',
                resizable: {
                    handles: 's',
                    pinned: true,
                    minHeight: 100,
                    maxHeight: 1000
                },       <-----  Extra what?
            }]