[2.0 only] ux.ManagedIframe/Panel (1.2.7)

[hendricd]

ux.ManagedIFrame/Panel (Current Release 1.2.7, for Ext 2.2.x or under only)

A version for Ext 3.0 can be found here.

The latest build is also available on code.google.

Some features available:

• UpdateManager.update and load support (to IFrames document).
• advanced scripting support.
• loadMask support.
• Cross-frame messaging

Supported events:

• documentloaded
• domready (fired when used with Updatemanager.update method, or when the document DOM reports ready)
• message[: subject]
• exception
• blur (fired when the frame window loses focus)
• focus (fired when the frame window receives focus)
• unload (fired when the frame document is unloaded)

ux.ManagedIframePanel (Current Release 1.2, extends Ext.Panel) leverages the cool layout management features of a Panel, but embeds a ManagedIframe into the body of the panel. This preserves the native header, footer, and toolbar support of a standard panel, but permits creation of complex body layouts surrounding an IFrame.

Licensing: MIF/MIFP v1.2 or higher is dual-licensed: LGPL 3.0 or CDL for commercial use.

Related Links:

• Wiki Manual here.
• MIF Frame Security and the "same-origin" policy.
• FF IFRAME Refresh Troubles?
• For an advanced demonstration, see post: "Load Ext once, and apply it to your frames".
• Previous 1.0 Baseline Forum thread.

Usage Example:

var newFrame = yourTabPanel.add({
    xtype       : 'iframepanel',
    id            : 'mifp_1',
    title         : 'Loading...',
    loadMask  : true,
    frameConfig: {{autoCreate:{id: 'frame1'}},  //optional, give the frame your own id and name
    defaultSrc : 'assets/someURL.html',
    listeners: {
       domready : function(frame){ //only raised for "same-origin" documents
            //Set the tab Title to the Document Title
             var doc= frame.getDocument();
             if(doc){ frame.ownerCt.setTitle(doc.title); }
 
            //Add some custom CSS Rules to the frame document
            var rule = 'p.fancyP {padding:5px 10px 5px 10px;border:1px solid;' +
                               'font:normal 11px tahoma,arial,helvetica,sans-serif;}';
            frame.CSS.createStyleSheet( rule, 'fancyP' );
 
            //Find all the 'p' tags in the frame docuement, and add the fancyP className to them
            frame.select('p').addClass('fancyP');              
       }
    }
});
yourTabPanel.doLayout();  //if TabPanel is already rendered
yourTabPanel.setActiveTab(newFrame); 

More Examples:
Extract the current source and demo files from miframe1_2.zip directly into a new/existing: /examples/miframe directory of your standard 2.x Ext.distribution (except for the desktop.zip demo -- that should go in /examples/desktop).

Updated: Version 1.1 This new baseline (1.1) adds:

• frame Ext.Element support (ie. MIF.get, getDom, getDoc, fly ),
• frame CSS selector queries (eg. MIF.select/query) ,
• frame CSS.styleSheet interface (create, modify, remove frame-embedded style rules)
• frame Ext.EventManager support to DOM elements embedded in a frames document. (Use the MIF interface to query embedded DOM elements just like you would in the parent document; all without loading the Ext framework within the embedded page):

MIF.select('img',true).setOpacity(.5);  or
MIFPanel.getFrame().select('img',true).setOpacity(.5); 

Set EventListeners on a frames DOM elements for handling with scripts hosted in the parent page:

MIF.getDoc().on('click',function(e){ alert( 'Image ' + e.getTarget().id + ' was Clicked.') },null, {delegate:'img'}); 

Updated (8/22/08): Version 1.2 released. Adds FF3 compatibility fixes, and improved loadMask support.

Updated (4/26/09): Version 1.2.4 released. Adds [s]Ext 3.0 compatibility[s/] no longer, and adds 'resize' event support.
Updated (5/16/09): V 1.2.5 fixes X-Frame Messaging bug.
Updated (6/30/09): V 1.2.6 fixes domready bug, adds submitAsTarget method.
Updated (11/10/09): V 1.2.7 fixes another domready bug.

Thanks to all for the valuable feedback.
Note: the current vBulletin config gzips attachments which IE hates. Download this with Firefox (or other browser) instead of IE.

[wm003]

Great Stuff! Thanks for such a useful Extension!

[Zakaroonikov]

If I were to point this to say a PDF file or Word document would any event fire after the file had been launched?

[hendricd]

@Zakaroonikov -- If you are speaking of "same-origin" documents, you can get the MIF's 'domready' event working for you as it would fire immediately after the frames' new page markup as been DOMized.

Also, there is the 'documentloaded' event which is raised when all the 'assets' are finally loaded.

Short of that, you'd need a browser.plugin event to guarantee full 'load' status.

[fangzhouxing]

Can anyone give some scenario that must use ManagedIframePanel instead of other component?

[hendricd]

@fangzhouxing -- other component?

[mykes]

Can anyone give some scenario that must use ManagedIframePanel instead of other component?

Any place you would display user generated content. If the user can somehow create bad HTML (no close tags for tables or divs or whatever), it can screw up the page display in "other" components.

[pigopl]

It is possible to write an entirely new HTML document with embedded stylesheets and external script references to an existing iFrame?

I am loading an existing page into one managed iFrame and want to extract the navigation element out of this page and write it to another managed iFrame. (part of transition of an existing non-ext web app)

The navigation div extracted requires a number of external stylesheets and javascript files to work properly.

I have been extracting the navigation div from the first iFrame and embedding this in a page structure thus:

var mnu = '<html><head>\
<script type="text/javascript" src="/moin_static160/ea/js/switchcontent.js" ></script>\
<script type="text/javascript" src="/moin_static160/ea/js/switchicon.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/dhtmlXCommon.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/dhtmlXTree.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/dhtmlXTree_kn.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/dhtmlXTree_xw.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/eatree.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/cookie.js"></script>\
</head><body>'
 + Ext.getCmp('app-tab1').getFrameDocument().getElementById('sidebar').innerHTML +
'</body></html>';

and writing it to the new managed iframe thus:

Ext.getCmp('nav-panel').getFrame().update( mnu, true, null );

However, the body gets written, but the head containing all the javascripts and stylesheet references does not.

Is this possible like this or can I achieve this in some other way?

Thanks for your help,

Tim

[hendricd]

It is possible to write an entirely new HTML document with embedded stylesheets and external script references to an existing iFrame?
However, the body gets written, but the head containing all the javascripts and stylesheet references does not.

Is this possible like this or can I achieve this in some other way?

Thanks for your help,

Tim

@Tim - Due to security restrictions (as mentioned earlier on Post #41) it would be possible but you would need to set a local src Url to the frame first, then you could inject script references into the document once the shell page is loaded. MIF has a series of helper functions to accomplish that:

MIF.on('domready', function(frame){
    frame.writeScript('',{src:"/moin_static160/ea/js/switchcontent.js"});
});

But, if this approach were to be used frequently, I'd recommend you study the adviframes.html demo closely, as it demonstrates how to cache (using ext-basex:ux.ModuleManager) those js libraries and stylesheets and inject them at will into any iframe when needed with only a single trip to the server.

[pigopl]

@Tim - Due to security restrictions (as mentioned earlier on Post #41) it would be possible but you would need to set a local src Url to the frame first, then you could inject script references into the document once the shell page is loaded. MIF has a series of helper functions to accomplish that:

MIF.on('domready', function(frame){
    frame.writeScript('',{src:"/moin_static160/ea/js/switchcontent.js"});
});

But, if this approach were to be used frequently, I'd recommend you study the adviframes.html demo closely, as it demonstrates how to cache (using ext-basex:ux.ModuleManager) those js libraries and stylesheets and inject them at will into any iframe when needed with only a single trip to the server.

Doug,

I shall study the example as you suggest however, as I shall be loading plenty of frames with the same libraries and this looks like it would speed up the app considerably.

Many thanks for also showing me the simple way to get it done - this helps me with getting a proof of concept out of the door.

Regards,
Tim