[3.0.x, 3.1.1] ux.ManagedIFrame 2.x

[hendricd]

ux.ManagedIFrame.[Element, Component,Panel, Portlet, Window]

(Current Release 2.1.5)

MIF 2.0x is only supported on Ext 3.0 RC3 thru 3.0.3 (previous Ext 3 release-candidates RC1, 2 are not compatible).

MIF 2.1.x is only supported on Ext 3.1.1 higher. (For more on Ext 3.1 compatibility, read this)

The latest build is also available on code.google/svn/tags.

Some features available:

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

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)
• resize (fired when the frame window is resized)
• unload (fired when the frame document is unloaded)
• scroll (fired when the frame document is scrolled)
• reset (fired when the frame document is reset to neutral domain)

The ux.ManagedIframe components leverages the cool layout management features of a Panel, but embeds a ManagedIframe into the body of a Panel, Window, or other Ext Component. This preserves the native header, footer, and toolbar support of a standard panel, but permits creation of complex layouts surrounding an IFrame.

Licensing: ux.ManagedIframe v2.0 or higher is dual-licensed: GPL 3.0 or CDL for commercial use.

Notes:
* MIF now has a modular build structure. You can exclude features you don't need (like X-frame messaging and Drag-drop [still under development]) to minimize production file sizes. Customize the included miframe.jsb file, for your requirements (a standard miframe.js file is already built for the base classes.)

* Due to recent changes in Ext 3.0 internals, MIF now requires the included multidom library. This library enhances the Ext Core (via function overloading) to permit DOM access to external "same-origin" document contexts without Ext be loaded into them. Most all Ext.Element and core methods ( Ext.[get,getDom,select,query], addListener, etc) can be targeted against specific document contexts. A similar library that permits rendering UI components in the same fashion is still under development -- stay tuned for more on that.

* Component xtypes
mif = Ext.ux.ManagedIFrame.Component
iframepanel = Ext.ux.ManagedIFrame.Panel
iframeportlet = Ext.ux.ManagedIFrame.Portlet
iframewindow = Ext.ux.ManagedIFrame.Window

* Convert Existing IFRAME element to Ext.ux.ManagedIFrame.Element. The following are all equivalent:

  var MIF = new Ext.ux.ManagedIFrame.Element('myFrame');
  var MIF = new Ext.Element.IFRAME('myFrame');
  var MIF = Ext.get('myFrame');

* Migrating from previous releases.

The following methods/features have been changed/added:
- the MIF.getDocument method now returns the document the IFRAME was rendered to.
- the new MIF.getFrameDocument returns a reference to the embedded document of the IFRAME.
- the new setDesignMode method toggles the frame's current designMode state.
- the resize event now reports the frames current document, view, and viewport sizes.
- for any of the MIF UI Components, the autoScroll config option (default is true) now determines the frames overflow behavior.

Online API Documentation: Here.

Demos:
- Simple MIF.Window.
- By popular demand: A Westside Story (Treepanel-based URLs drive a MIF-filled TabPanel, with page link <a> interception, and frame templating samples. )
- PDFSubmit (demonstrates MIF's ability to submit Forms/File-uploads using its new 'submitAsTarget' method)).
More demos coming soon...

Notes:
* The current vBulletin config gzips attachments which IE hates. Download this with Firefox (or other browser) instead of IE.

* MIF 2.1.x will ONLY work on Ext 3.1.1 or higher ! (For more on Ext 3.1 compatibility, read this)

Downloads for MIF 2.1.x (and Ext 3.1.1+) are only available from google/code/downloads.

EDIT:
@For those monitoring--

MIF 4.0alpha2 is now available for Ext 4.0.x.

[i1befree]

Dear hendricd.
It's wonderful extension.
When I test it, I have a problem with page reload.

My test environment is following.
Browser : IE 7(debug on mode)
OS : Windows Vista

After load ManagedIframe instance, I refreshed all page.
I found following message.

'El._flyweights' is null or not object.

Debugger breaks at code line 2817 in ext-all-debug.js
(El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;

El._flyweights is undefined.
How can I solve this?

[hendricd]

MIF 2.0 is only supported on Ext 3.0 or higher (previous Ext 3 release-candidates RC1, 2 are not compatible).

@i1befree -- Do you have Ext 3 Final or SVN Build of Ext?

[hendricd]

MIF 2.0 RC1.1 zip (fixes) is posted on First post.

[i1befree]

When I test RC1.1 with debugger, it breaks following line in extjs-debug.js file.

El.fly = function(el, named){
    var ret = null;
    named = named || '_global';

    if (el = Ext.getDom(el)) {
        (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; -> breaks at this line
        ret = El._flyweights[named];
    }
    return ret;
};

When I watch El._flyweights, it's value is undefined.

So, I modified ext-js-debug.js for testing.

if(!El._flyweights || !El._flyweights[named]){
	if(!El._flyweights) El._flyweights = {};
  El._flyweights[named] = new El.Flyweight();
}

After modifying, it works good. But I think it is not proper way.
In my code, I use miframe.js in tabpannel.
This is some code for using miframe.js.
I just modified RSS sample.

tab = this.add({
		    xtype       : 'iframepanel',
		    id          : menuInfo.id,
		    title		: menuInfo.text,
		    tabTip		: menuInfo.text,
		    closable	: true,
		    loadMask  	: true,
		    frame		: true,
		    frameConfig	: {autoCreate:{id: 'frame-' + menuInfo.id}},
		    defaultSrc 	: menuInfo.url,
		    layout		: 'fit',
		    margins		: '5 5 1 5'
});

[zombeerose]

I tried running the demos listed in your first post but they all seem to have problems with the mask. Using FF3

[hendricd]

I tried running the demos listed in your first post but they all seem to have problems with the mask. Using FF3

@zombeerose -- Try clearing your browser cache, and then try. You may have an older version still cached in there.

[zombeerose]

Nope same problem.

For the Window demo, I get this error:

_gat is not defined
http://demos.theactivegroup.com/startup.js?_dc=1246899649475
Line 206

I also tried with Chrome.

[hendricd]

Nope same problem.

For the Window demo, I get this error:

_gat is not defined
http://demos.theactivegroup.com/startup.js?_dc=1246899649475
Line 206

I also tried with Chrome.

Pesky Google Analytics stuff. Try it again.

[zombeerose]

Perfect - thanks!