2 Attachment(s)
[3.0.x, 3.1.1] ux.ManagedIFrame 2.x
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:
Code:
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.
I have a problem with 2.0RC1
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?
I have tested SVN version.
When I test RC1.1 with debugger, it breaks following line in extjs-debug.js file.
Code:
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.
Code:
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.
Code:
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'
});
docCache._dataCache is error
I have upgraded the extjs to the latest in the svn along with the latest in the svn for MIF. I have created a window with the following config
Code:
{
id: 'win-' + unique,
layout: 'fit',
title: Ext.util.Format.ellipsis(title, 16),
defaultSrc: link,
shadow: Ext.isIE,
width: winWidth,
height: winHeight,
autoScroll: true,
hideMode: 'nosize',
iconCls: 'bogus',
shim: false,
animCollapse: false,
allowRemove: false,
listeners: {
domready: function(frameEl){ //raised for "same-origin" frames only
var MIF = frameEl.ownerCt;
doc = MIF.getFrameDocument();
var title = frameEl.domWritable() ? doc.title : null;
if (title==null && frameEl.fly('windowTitle')) {
title = frameEl.fly('windowTitle').getValue();
}
if (title.trim().length > 1) {
win.setTitle(Ext.util.Format.ellipsis(title, 16));
win.taskButton.setTaskText(Ext.util.Format.ellipsis(title, 12));
}
},
documentloaded: function(frameEl){
var MIF = frameEl.ownerCt;
doc = MIF.getFrameDocument();
var title = frameEl.domWritable() ? doc.title : null;
if (title==null && frameEl.fly('windowTitle')) {
windowTitle = frameEl.fly('windowTitle').getValue();
}
if (windowTitle.trim().length > 1) {
win.setTitle(Ext.util.Format.ellipsis(windowTitle, 16));
win.taskButton.setTaskText(Ext.util.Format.ellipsis(windowTitle, 12));
}
}
}
}
And when I close the window, I receive the following error:
Code:
docCache._dataCache is undefined
removeNode()()miframe-...-debug.js (line 274)
remove()()miframe-...-debug.js (line 611)
destroyMembers()()ext-base.js (line 32)
beforeDestroy()()ext-all-debug.js (line 20298)
destroy()()ext-all-debug.js (line 15404)
close()()ext-all-debug.js (line 20634)
createSingle()()ext-all-debug.js (line 1403)
(?)()()ext-all-debug.js (line 1501)
urlDecode()()ext-base.js (line 19)
fire()()ext-all-debug.js (line 1499)
fireEvent()()ext-all-debug.js (line 1284)
afterHide()()ext-all-debug.js (line 20534)
hide()(null, function(), Object initialConfig=Object)ext-all-debug.js (line 20520)
close()()ext-all-debug.js (line 20635)
(?)()()xrm-desk...-debug.js (line 133)
defer()()ext-base.js (line 21)
[Break on this error] delete docCache._dataCache[dom.id];
Does anyone know what could be causing this?
