PDA

View Full Version : [3.0.x, 3.1.1] ux.ManagedIFrame 2.x



Pages : 1 2 3 [4]

Capt.JackSparrow
16 Nov 2010, 6:09 AM
oh yeah.
I dont suppose there will be a problem disabling it.
I think IE is the culprit - for it fails to remove some dead DOM elements.

After2050
22 Nov 2010, 6:55 AM
Hi,

I'm facing a serious problem. I'm using ExtJs 3.3.0 version with the ManagedIframe panel. I'm dynamically creating elements in the document loaded in the iframe panel. I'm shocked to see the Ids for the new elements are getting duplicated, i.e. some of the ids of new elements already exists for old elements. The project is already released. I'm very shocked to see this. Any help will be greatly appreciated.

I feel really sick of using this plugin.

Regards
Dnana

hendricd
22 Nov 2010, 7:49 AM
@After2050--

Can you post your documentloaded handler?

After2050
22 Nov 2010, 9:20 AM
Hi,

Thanks for your reply. I'm trying to create a dynamic navigation in the iframe document once the "documentloaded" event is fired.

lcInterface.core.Factory.iframe = function() {
return viewContainer = new Ext.ux.ManagedIFrame.Panel({
id: 'lciframe',
width: 980,
height: 680,
listeners: {
'documentloaded': function() {
createNavigation(); //method that creates dynamic navigation
}
}
});
};

var createNavigation = function(){
var ul = .... //creating unordered list through Ext.DOMHelper
var lciframe = Ext.getCmp('lciframe'); //getting the managed iframe panel
var navigationHolderDiv = lciframe.get('Navigation'); //getting the placeholder div of the iframe document
Ext.DomHelper.append(navigationHolderDiv, ul); //appending the list
}

Please help me.

hendricd
22 Nov 2010, 10:52 AM
@After2050 --

Please post your UL markup config. Are you assigning LI's id's?

After2050
22 Nov 2010, 10:07 PM
Hi,

I'll tell you little more what I'm doing. I'm loading a document that saved in db in an managed iframe panel editing the text, images of the document and saving it back to the db.

So the document loaded into the iframe contain elements that may already have ext-ids like "ext-gen61", "ext-gen62" etc..

Once the document is loaded then I'm creating dynamically an unordered list(UL) from an array and appending it into a div container of the document. Here is the code you asked.


function createMenus(menus) { //menus - array of pages containing name, id etc.
if (menus) {
var navigationDiv = {
id: 'Navigation',
tag: 'div',
children: []
},
//unordered list
ul = {
tag: 'ul',
children: []
};

navigationDiv.children.push(ul);

Ext.each(menus, function(item, index) {
ul.children.push({ tag: 'li',
id: item.ID, //setting the page id as the list id (ex. 1621)
children:[ //anchor element (not setting any id)
{
tag: 'a',
title: item.ViewName,
href: "javascript:void(0);",
html: item.ViewName
}]
});
}, this);
}

var iframePanel = Ext.getCmp('lciframe');//getting the managed iframe panel
var placeHolder = iframepanel.get('NavContainer');//getting the navigation container of the iframe's document

Ext.DomHelper.append(placeHolder , navigationDiv); //appending the navigation in the iframe document's container
}

What I'm seeing the iframe's document already have a div with id like "ext-gen61", an <a> element inside the <li> element of the UL also getting similar id.

After2050
22 Nov 2010, 10:43 PM
Hi,

Please read my older post first. I've to add one more thing with that. In my case I already have dom elements in the iframe document having ids starting from "ext-gen53" to "ext-gen66". For all the new elements I'm adding either through Ext.DomHelper or just upading the innerHTML their ids also getting started from "ext-gen53". So a set of duplicate elements, that's terrible!

hendricd
23 Nov 2010, 6:09 AM
@After2050 --

Shocking indeed, but little to do with ManagedIframe.

What is happening is DomHelper is creating the nodes based on your specification.

Subsequently, MIF.get will access those nodes and assign them dynamic ID's based upon an internal counter (ext-gen##) relative to the parent (host) page instance of Ext.

YOU will need to control the id generation of your LI's/anchors (in advance) to guarantee a unique value per document instance:



navigationDiv.children.push(ul);

Ext.each(menus, function(item, index) {
ul.children.push({ tag: 'li',
id: 'nav-item-' + item.ID, //setting the page id as the list id (ex. 1621)
children:[ //anchor element (not setting any id)
{
tag: 'a',
id: 'nav-anchor-' + item.ID,
title: item.ViewName,
href: "javascript:void(0);",
html: item.ViewName
}]
});
}, this);

}or similar.

After2050
23 Nov 2010, 9:07 AM
Thanks for your reply.

After creating the UL element, I'm binding eventhandlers to all the anchors, at that time default ext-ids are assigned to them, without checking duplication!

So I changed the code as you said, also what are the elements I'm accessing through Managed Iframe panel I made sure they have predefined ids.

hendricd
23 Nov 2010, 10:14 AM
@After2050--

It is invalid for a document to contain the same ElementID twice! Ensuring uniqueness is YOUR job.
Ext.get cannot check for duplicates.

And, you cannot use Ext.get within the frame document:


Ext.get(something).on('click', fn )Ext.get is designed to work only on the frame's parent document.

Use :


yourMIF.get(something).on('click', fn )Better, would be event delegation (with a single listener):




placeHolder.on({
'click' : function(e, target){
var target = e.getTarget(),
itemId = target.id.split('-')[2];

doSomethingWith(itemId);
},
stopEvent : true,
delegate : 'li a'
});

After2050
24 Nov 2010, 4:55 AM
Does ExtJs or ManagedIframe panel checks for "id duplication" before assigning the auto-generated id to an element? Or they checks only in their counter?

hendricd
24 Nov 2010, 6:17 AM
Does ExtJs or ManagedIframe panel checks for "id duplication" before assigning the auto-generated id to an element? Or they checks only in their counter?

MIF.get uses the same strategy as Ext.get, in that it maintains seperate Element caches for each frame document context it manages.
However, scanning the entire document for instances of duplication (getElementsByTagname) each time Ext.get is called, would be prohibitively slow.

The internal counter is only used when an Element does not yet have an id assigned, and an attempt at a unique value is required. Ext and MIF are written such that if an Element is found within the Element caches with the same id, the last Element referenced by that ID is asserted in the cache (replacing the previous reference).

Hope that explains it...

After2050
24 Nov 2010, 6:35 PM
I have a simple doubt, say in a document I assigned myself an id like "ext-gen26" to an element(just for an example). Does there are chances Ext or MIF uses the same id for other element?

chu_man_fu
17 Dec 2010, 8:25 AM
Hello,

I am using ManagedIFrame to house a PDF but I am having difficulties with callbacks.

This is my code:



var panelPDF = new Ext.ux.ManagedIFrame.Panel(
{
frameCfg:
{
id : 'pdfFrame'
},
tbar:
[
{
text: 'Create PDF',
handler: function(button)
{
var waitMask = new Ext.LoadMask(panelPDF.el, {msg:'Please wait creating PDF....'});

waitMask.show();


Ext.Ajax.request(
{
url: 'create_pdf.php',
method: 'GET',
params:
{
text: 'HELLO WORLD'
},
success: function(response)
{
var jsonLocation = eval( '(' + response.responseText + ')');

panelPDF.submitAsTarget(
{
url: "showpdf.php",
method: 'POST',
params:
{
file: jsonLocation.document_location
},
callback: function(frame)
{
waitMask.hide();
},
scope: this,
});

},
failure: function ( result, request)
{
Ext.MessageBox.alert('Error', 'There was an error with your request.');
waitMask.hide();
}
});
}
}
]
});
create_pdf.php basically creates a PDF document.
showpdf.php is the php script from "Doug's Demo Desk for Ext 3.2.2" MIF PDF example which loads the PDF file.

The PDF document loads fine but the callback is never called.
If I request a html page instead of PDF it works fine.
I have tried using load instead of submitAsTarget and that doesn't even request showpdf.php.

panelPDF is inside a tabpabel by the way.
I'm using EXTJS 3.3.1.

Any advise would be great

Thanks

chu_man_fu
17 Dec 2010, 8:56 AM
I am using ManagedIFrame to house a PDF but I am having difficulties with callbacks.

This is my code:



var panelPDF = new Ext.ux.ManagedIFrame.Panel(
{
frameCfg:
{
id : 'pdfFrame'
},
tbar:
[
{
text: 'Create PDF',
handler: function(button)
{
var waitMask = new Ext.LoadMask(panelPDF.el, {msg:'Please wait creating PDF....'});

waitMask.show();


Ext.Ajax.request(
{
url: 'create_pdf.php',
method: 'GET',
params:
{
text: 'HELLO WORLD'
},
success: function(response)
{
var jsonLocation = eval( '(' + response.responseText + ')');

panelPDF.submitAsTarget(
{
url: "showpdf.php",
method: 'POST',
params:
{
file: jsonLocation.document_location
},
callback: function(frame)
{
waitMask.hide();
},
scope: this,
});

},
failure: function ( result, request)
{
Ext.MessageBox.alert('Error', 'There was an error with your request.');
waitMask.hide();
}
});
}
}
]
});


create_pdf.php basically creates a PDF document.
showpdf.php is the php script from "Doug's Demo Desk for Ext 3.2.2" MIF PDF example which loads the PDF file.

The PDF document loads fine but the callback is never called.
If I request a html page instead of PDF it works fine.
I have tried using load instead of submitAsTarget and that doesn't even request showpdf.php.

panelPDF is inside a tabpabel by the way.
I'm using ExtJS 3.3.1.

Any advise would be great

Thanks

hendricd
21 Dec 2010, 3:16 PM
@chu_man_fu

What browser is your test based upon?

MIF has it's own masking agent/methods. Try:



var panelPDF = new Ext.ux.ManagedIFrame.Panel(
loadMask : true,
{
frameCfg:
{
id : 'pdfFrame'
},
tbar:
[
{
text: 'Create PDF',
handler: function(button)
{
panelPDF.showMask('Please wait creating PDF....');

Ext.Ajax.request(
{
url: 'create_pdf.php',
method: 'GET',
params:
{
text: 'HELLO WORLD'
},
success: function(response)
{
var jsonLocation = eval( '(' + response.responseText + ')');

panelPDF.submitAsTarget(
{
url: "showpdf.php",
method: 'POST',
params:
{
file: jsonLocation.document_location
},
callback: function(frame)
{
console.log(arguments); //Does this happen?
panelPDF.hideMask();
},
scope: this,
});

},
failure: function ( result, request)
{
Ext.MessageBox.alert('Error', 'There was an error with your request.');
waitMask.hide();
}
});
}
}
]
});

chu_man_fu
22 Dec 2010, 1:59 AM
I am using Firefox 3.6.13.

I have change my code to:


var panelPDF = new Ext.ux.ManagedIFrame.Panel(
loadMask : true,
{


and get the following error:



missing ) after argument list
loadMask : true,



I guess "loadMask: true" should be inside the config JSON?
I have moved it there and made the other changes and get the following error:



panelPDF.showMask is not a function
panelPDF.showMask('Please wait creating PDF....');


Also, the console log in the callback is never called but if I change showpdf.php to return some html the callback is called.

chu_man_fu
22 Dec 2010, 6:39 AM
I have now solved this issue.
To get showMask to work I had to reference the frame rather than the Ext.ux.ManagedIFrame.Panel object.:


frameCfg:
{
id : 'pdfFrame'
},

......
handler: function(button)
{

pdfFrame.hostMIF.showMask('Please wait while we prepare your pack...');


Why is this?

I have also got the callback working. Not sure why it wasn't working before :s

Thanks for your assistance.

hendricd
22 Dec 2010, 8:22 AM
@chu_man_fu

Yes, sorry that should have been:


pdfFrame.getFrame().showMask(...);

As to the other issue, perhaps you previously lacked the correct content-type to display it inline.

Achim74
13 Jan 2011, 5:37 AM
Hello !

here is my definition:


<?php global $t, $db, $app_config;?>

iframePanel = new Ext.ux.ManagedIFrame.Panel({
collapsible : false,
name : 'cms_vorschau_panel',
id : 'cms_vorschau_panel',
width: '100%',
height: 550,
autoScroll : true,
animCollapse : false,
disableMessaging : false,
resizable : true,
defaultSrc : 'http://www.dslweb.de',
msgMode : 1
});


// Iframe orders window
IframeWindow = function() {
IframeWindow.superclass.constructor.call(this, {
title: 'Vorschau',
name : 'cms_vorschau_window',
id : 'cms_vorschau_window',
width: 900,
iconCls: 'nav_vorschau',
height: 550,
bodyStyle: 'padding:5px;',
buttonAlign: 'center',
modal: true,
collapsible: true,
maximizable: true,
resizable: true,
closable: true,
items: iframePanel
})
};

Ext.extend(IframeWindow, Ext.Window, {});
iframeWindow = new IframeWindow();

iframeWindow.show();



Is it possible to auto resize the iframe(panel) when the window is resized or maximized ? I tried height: '100%' but it does not work. I get a height about 150px and it does not resize when I use 100%. Thank you for your help!

Best regards

bkraut
5 Feb 2011, 4:22 PM
Hi,

I was using ManagedIFrame successfully on previous versions of ExtJS. Now I have ExtJs 3.3. and I'm having following problems:



p is undefined
[Break on this error] this.initPageX = p[0] - dx;
ext-all-debug.js (line 20083)
x is undefined
[Break on this error] y = isNaN(x[1]) ? y : x[1];


I have following imports:



<script type="text/javascript" src="../js/mif/multidom.js"></script>
<script type="text/javascript" src="../js/mif/mif.js"></script>
<script type="text/javascript" src="../js/mif/uxvismode.js"></script>
<script type="text/javascript" src="../js/mif/mifmsg.js"></script>
<script type="text/javascript" src="../js/mif/miframe-debug.js"></script>


My code is:



var panelPDF = new Ext.ux.ManagedIFrame.Panel({
loadMask : {
hideOnReady: true,
msg: 'Loading Document...'
}
});

panelPDF.submitAsTarget({
url: "showpdf.php",
method: 'POST',
params: {
file: jsonLocation.document_location
},
callback: function(frame) {
alert('Naloženo');
// Lahko odstraniš masko
},
scope: this
});

win = new Ext.Window({
title: 'Report',
width: 800,
height: 600,
maximizable: true,
closable: true,
border: false,
layout: 'fit',
items: [
panelPDF
]
});


Is ManagedIFrame Compatible with ExtJS 3.3.? Previously everything was running successfully on 3.1.

Best regards,
Bojan

Rick.McIntosh
6 Feb 2011, 1:49 PM
The error ssRules[j].selectorText is undefined

Line 14971

/**
* Gets all css rules for the document
* @param {Boolean} refreshCache true to refresh the internal cache
* @return {Object} An object (hash) of rules indexed by selector
*/
getRules : function(refreshCache){
// private



The stack
cacheStyleSheet(ss=StyleSheet template.css)ext-al...ents.js (line 14971)ss = StyleSheet template.css


getRules(refreshCache=undefined)ext-al...ents.js (line 14987)refreshCache = undefined



getRule(selector=".x-managed-iframe", refreshCache=undefined)ext-al...ents.js (line 15001)selector = ".x-managed-iframe"
refreshCache = undefined



addListener()miframe-min.js (line 1)
(?)()ext-al...ents.js (line 398)
call()ext-al...ents.js (line 2150)

Any ideas on what needs upgraded??

scaddenp
17 Feb 2011, 6:27 PM
I am having a problem with the Ext.History.on function not always be called when browser back button is pushed. This is because it appears that ManagedIFrame is capturing the event. Fine for things happening in the Iframe but I have it in an card layout and when the history URL refers to another card, I want to activate that card and process it. Any ideas on how to get MIF to bubble?

scaddenp
17 Feb 2011, 7:40 PM
Figured it out. Dont use setsrc, use setLocation instead and manage the history.

svdb
21 Mar 2011, 9:47 PM
It is never raised. I have gone back and forth between 2.1.4 and 2.1.5 and in 2.1.5 this show listener for Ext.ux.ManagedIFrame.Window is never called.

Hi Doug,
Any news on this front?

We're also trying out 1.2.5 and are facing the exact same problem, but only in IE 7 & 8 (we don't support earlier versions) : none of the event handlers get called (domready and documentLoaded). Our mifs are in the following structure: Viewport/tabpanel/mifpanel

The same handlers do get called when in FF 3.x.

Reverting to 1.2.4 solves the problem, yet we don't want to stay behind on the versions.

Thanks,
SVDB

[edit] BTW, the files in zip 2.1.5 contain "@version 2.1.4" in their comments.

hendricd
22 Mar 2011, 2:16 AM
@svdb--
What's being loaded into the IFRAME?
On what version of Ext?

svdb
22 Mar 2011, 3:34 PM
@svdb--
What's being loaded into the IFRAME?
On what version of Ext?

Sorry about the missing version info.
We're on ExtJS 3.3.1

Same origin JSPs initially loaded using defaultSrc(), and using setSrc() for programmatic navigation.
All our pages are HTML 4.01 Transitional Loose.

Our QA did another round of testing and came up with more details:
In fact, the events work during the first iframe content load, but not after additional content loading in the same iframe. It feels like the listeners are flushed due to the iframe content change.

I thought the issue didn't exist in 2.1.4 but I was wrong.
In fact I had to revert to 2.1.3 to get back to a fully working project.

I'm testing on a fresh Win XP SP2 vm with IE 8 runnning in IE 8 mode and IE 7 mode (no quirks mode).

Since 2.1.3 seems to be working, the issue is not urgent for our project.

Best regards,
SVDB

hendricd
22 Mar 2011, 3:38 PM
@svdb --

Make sure you're using the latest from google.code. There was some work done regarding:

eventsFollowFrameLinks : true //set on the Panel/Window level, the default in recent builds

and domready detection in general...

svdb
22 Mar 2011, 5:06 PM
@svdb --
Make sure you're using the latest from google.code. There was some work done regarding:
eventsFollowFrameLinks : true //set on the Panel/Window level, the default in recent builds
and domready detection in general...

I was trying versions 2.1.4 and 2.1.5 which I grabbed from the google.code link provided on the 1st page of this thread. http://code.google.com/p/managediframe/downloads/list

Did you mean I should download from the SVN repo instead?

Best regards,
SVDB

scaddenp
23 Mar 2011, 5:26 PM
using the FAQ, (ext 3.3.2, managediframe for 3.1+), I have code like this:


popLink = new Ext.Window({
layout: "fit",
width: 100,
height:100,
id:'popUpWnd',
hidden:true,
hideMode:'visibility',
items:[{
xtype:"mif",
defaultSrc: src,
loadMask:false,
border:false,
bodyBorder: false,
listeners:{
domready : function(frame){
var fbody = frame.getBody();
var w = Ext.getCmp('popUpWnd');
if(w && fbody){
//calc current offsets for Window body border and padding
var bHeightAdj = w.body.getHeight() - w.body.getHeight(true);
var bWidthAdj = w.body.getWidth() - w.body.getWidth(true);
//Window is rendered (has size) but invisible
w.setSize(Math.max(w.minWidth || 0, fbody.scrollWidth + w.getFrameWidth() + bWidthAdj) ,
Math.max(w.minHeight || 0, fbody.scrollHeight + w.getFrameHeight() + bHeightAdj) );
//then show it sized to frame document
w.show();
}
}
}
}]
});
popLink.show();

However, I only get default window size. Looking with debugger, I see that bHeightAdi and bWidthAdj are both 0. fbody doesnt HAVE a scrollHeight or scrollWidth (though fbody.dom does). Is this example dated or do I have something wrong?

hendricd
23 Mar 2011, 6:47 PM
.... Is this example dated or do I have something wrong?

Dated? Indeed it is !
You have something wrong? Not!

Reviewing my code fragments from 3 months later reveals:


var fbody = frame.getBody().dom;as you've indicated.

I'll update the FAQ.

Thanks for the report.

tdikarim
30 Mar 2011, 6:43 AM
Hi,

version :
Mozilla FF = 3.6
Extjs = 3.3.1
MIF = 2.1.4
desktop = qwiki

I have the next error displayed on FireBug when a messagebox disapear :-?

dom is undefined
[Break On This Error] dom.style.visibility = visible ? "visible" : HIDDEN;
multidom.js (line 754)

someone have an idea ?

25418

thanks

Karim

mivilleb
31 Mar 2011, 1:39 AM
I am a complete beginner at using extJS and I would really appreciate it if someone could please post the HTML that would make the Westside story example work: http://demos.theactivegroup.com/?demo=mif&script=treenav

I saved the treenav.js file, but not sure what other js and css files I need to use. I am using extJS 4 beta and I have a copy of MIF version 2.1.4.

I was using the extJS example for layout/complex:

http://dev.sencha.com/deploy/ext-4.0-beta1/examples/layout/complex.html

where I removed the east and south panel and replaced the accordion by a treepanel in the west panel. Then try to insert part of the treenav.js, but not sure what I need to insert and what js files I need to include.

I just need a clean HTML something like this:



<html>
<head>
<title>Testing ManagedIFrame</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="IFrame_src/mif.js"></script>
<script type="text/javascript" src="IFrame_src/multidom.js"></script>
</head>
<body>
<script type="text/javascript" src="treenav.js"></script>
</body>
</html>
That does not produce anything.

Anybody got a working HTML for the Westside story example?

xmszhang
31 Mar 2011, 6:55 PM
Anyone konw how to use this extensions?

Darklight
1 Apr 2011, 12:49 PM
Hey hendricd, do you plan on making this great extension compatible with 4.0? If yes, do you have an ETA? ;)
thanks again for the great work on this!

mivilleb
1 Apr 2011, 7:39 PM
I am still trying to make the Westside Story example to work but no luck.

I am now using extJS 3.2.1 and MIF 2.1.5 and using this HTML:


<HTML>
<HEAD>
<TITLE>Title</TITLE>
<link rel='stylesheet' type='text/css' href='../resources/css/ext-all.css' />
<script type='text/javascript' src='../adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='../ext-all-debug.js'></script>

<script type='text/javascript' src='mif.js'></script>
<script type='text/javascript' src='multidom.js'></script>

</HEAD>
<BODY CLASS=me_class>
<script type='text/javascript' src='treenav.js'></script>
</BODY>
</HTML>


I get an popup window that "MIF 2.1.4 requires multidom.js support" and nothing shows up on the screen. Using the error console I get this error the Demo is not defined in treenav.js.

How can I make the Westside story example work, what HTML do I need?

Thanks for any help.

mivilleb
2 Apr 2011, 6:04 PM
I reordered the js files and now I do not get the multidom error anymore.

The treenav strait from the Westside story demo page, still does not produce anything.


<HTML>
<HEAD>
<TITLE>Title</TITLE>
<link rel='stylesheet' type='text/css' href='../resources/css/ext-all.css' />
<script type='text/javascript' src='../adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='../ext-all-debug.js'></script>
<script type="text/javascript" src="uxvismode.js"></script>
<script type='text/javascript' src='multidom.js'></script>
<script type='text/javascript' src='mif.js'></script>
<script type='text/javascript' src='treenav.js'></script>
</HEAD>
<BODY>
</BODY>
</HTML>


I get Demo is not defined in treenav.js.

Do I need other js files to be included to get the Westside story demo to work? Or do I need to modify the treenav.js file:

http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav

Sorry, I am more a PHP, bash script person and not too familiar with object orienting JS. I have been a user of extJS for a few years, but that is it "a user" not a programmer.

scaddenp
3 Apr 2011, 8:38 PM
Ext 3.3.2 miframe 2.1

I have menus in a topbar, with mangediframe in a card layout. If managediframe is the active card, then the menus dont show (wrong z order I think, no errors showing, the dom shows an x-menu-floating div when click a menu button). If I have another card type, then menus show fine. Problem only in IE, Chrome, FF3 and 4, safari are fine.

scaddenp
4 Apr 2011, 3:27 PM
If the page loaded into the iframe has links, then clicking on the links loads the iframe with the link and the back button goes back to previous page just fine in Chrome,IE8, Safari. In FF 3.6 and FF4, instead of going back it jumps back to history of the link before the iframe was loaded. (ignores the history within the iframe).

Any fix or setting for this?

tdikarim
5 Apr 2011, 12:08 AM
Hi,

version :
Mozilla FF = 3.6
Extjs = 3.3.1
MIF = 2.1.4
desktop = qwiki

I have the next error displayed on FireBug when a messagebox disapear :-?

dom is undefined
[Break On This Error] dom.style.visibility = visible ? "visible" : HIDDEN;
multidom.js (line 754)

someone have an idea ?

25418

thanks

Karim


HI have place a Breakpoint with expression in FireBug (dom == undefined) in multidom.js at line 754
And the variable "me" doesn't contain dom
25482

When the desktop is loaded. All seems to be success. But after 5 sec, Firebug prevent an error.

Thanks for your help

tdikarim
5 Apr 2011, 1:16 AM
This error occur when the notifyWin disapear.
I don't understand why ...

tdikarim
5 Apr 2011, 4:00 AM
when I remove the bloc script no error occured
<script type="text/javascript" src="ux/mif/uxvismode.js"></script>
<script type="text/javascript" src="ux/mif/multidom.js"></script>
<script type="text/javascript" src="ux/mif/mif.js"></script>
<script type="text/javascript" src="ux/mif/miframe.js"></script>
<script type="text/javascript" src="ux/mif/mifmsg.js"></script>

But when I active it an error occur in multidom.js file

Appreciate help
Karim

qdch520
5 Apr 2011, 10:18 PM
dear Doug ,

tdikarim
6 Apr 2011, 12:07 AM
This error are produced also with 3.1.1

zerba78
20 Apr 2011, 8:52 AM
Hi all
I create an instance of Ext.ux.ManagedIFramePanel with a defaultSrc, the loadmask disappears when the page is loaded; then I change the iframe location with

iframe.getFrame().setSrc( newUrl );
but the loadmask does not disappear when the page is fully loaded.
I tried with

hideOnReady : false
but nothing changed.
Why the the loadmask does not disappear?
Thanks and best regards

hendricd
20 Apr 2011, 3:05 PM
Hi all
I create an instance of Ext.ux.ManagedIFramePanel with a defaultSrc, the loadmask disappears when the page is loaded; then I change the iframe location with

iframe.getFrame().setSrc( newUrl );
but the loadmask does not disappear when the page is fully loaded.
I tried with

hideOnReady : false
but nothing changed.
Why the the loadmask does not disappear?
Thanks and best regards

@zerba -- What is being loaded into the frame on the second attempt? A full web-page or something embedded?

zerba78
20 Apr 2011, 11:52 PM
Dear Doug
at the second attempt I reload the same web application page I loaded at the first time, but with different parameters (i.e. I refresh the iframe content according to parent window inputs). The iframe content can be considered as a full web-page, and it is Ext based.
Thanks

parsbin
2 May 2011, 11:49 PM
I have problem with MIF
extjs 3.3
MIF2.01

index codes:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf_8" />
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ux/statusbar/css/statusbar.css" />
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style>
.list {
list-style-image:none;
list-style-position:outside;
list-style-type:square;
padding-left:16px;
}
.list li {
font-size:11px;
padding:3px;
}
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="../../ext-all.js"> </script>
<script type="text/javascript" src="../ux/statusbar/StatusBar.js"> </script>
<script type="text/javascript" src="../ux/statusbar/ValidationStatus.js"> </script>
<script type="text/javascript" src="mif.js"></script>
<script type="text/javascript" src="mifmsg.js"></script>
<script type="text/javascript" src="statusbar-advanced.js"> </script>
</head>
<body style="padding:15% 35%;">
</body>
</html>statusbar-advanced.js:

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.onReady(function(){
var fp = new Ext.FormPanel({
id: 'status-form',
renderTo: Ext.getBody(),
labelWidth: 100,
width: 350,
items:[
{ text:'test', }
,
{
id: 'ciscoWeb',
title: 'Cisco Web',
height: '100%',
xtype:'iframepanel',
loadMask:true,
height:'100%',
defaultSrc: 'http://www.cisco.com'
}
],
buttons: [
{ text: 'reset' }]
});
new Ext.Panel({
title: 'Frame Test',
renderTo: Ext.getBody(),
width: 450,
defaults:{autoHeight: true},
plain:true,
layout: 'fit',
items: fp,
bbar: new Ext.ux.StatusBar({
id: 'form-statusbar',
defaultText: ' ',
plugins: new Ext.ux.ValidationStatus({form:'status-form'})
})
});
});

gorun-ul
3 May 2011, 4:57 AM
is it working with the 4.0 api ????

parsbin
3 May 2011, 10:35 PM
i`v problem with MIF
extjsExt JS 3.3.1and MIF 2.1.5
it seems, the frame not loaded completly
my part of code:

var accounts = {
id:'column-panel',
xtype: 'tabpanel',
activeTab: 2,
bodyStyle: 'padding:5px',
defaults: {bodyStyle:'padding:15px'},
items:[{
title: 'title',
id: 'ciscoWeb',
xtype:'iframepanel',
loadMask:true,
defaultSrc: 'fax/'
}]
};

hendricd
4 May 2011, 3:54 AM
@parsbin:

You'll need to work on some fundamentals first.

Load the assembled MIF library (read the readme.txt that comes with it)


<script type="text/javascript" src="build/miframe.js"></script>
<script type="text/javascript" src="mifmsg.js"></script>

Next, get your basic layout working without the IFRAME first. You are setting configs on child components that are not compatible with fit layouts (do not set width, height, autoHeight, etc on child items of any layout).

If the FormPanel is a child of the layout, do not use renderTo on it.
Why is the IFRAME a child of the FormPanel?
What are you planning to load into the IFRAME?

hendricd
4 May 2011, 4:03 AM
is it working with the 4.0 api ????

No, there is a new release planned for Ext 4.

parsbin
4 May 2011, 4:21 AM
Why is the IFRAME a child of the FormPanel?
What are you planning to load into the IFRAME?
now i have included this javascipt classes

<!-- FRAME -->
<script type="text/javascript" src="../miframe.js"></script>
<script type="text/javascript" src="../ifram/multidom.js"></script>
<script type="text/javascript" src="../ifram/mif.js"></script>
<script type="text/javascript" src="../ifram/mifmsg.js"></script>


i`v created a form in fax/index.php and a tabpanel. in tabpanel i have a child page with 3 tabs.one tabs name is accounts.
i want include form into accounts tab.

hendricd
4 May 2011, 4:38 AM
now i have included this javascipt classes

<!-- FRAME -->
<script type="text/javascript" src="../miframe.js"></script>
<script type="text/javascript" src="../ifram/multidom.js"></script>
<script type="text/javascript" src="../ifram/mif.js"></script>
<script type="text/javascript" src="../ifram/mifmsg.js"></script>


i`v created a form in fax/index.php and a tabpanel. in tabpanel i have a child page with 3 tabs.one tabs name is accounts.
i want include form into accounts tab.

@parsbin --

Did you read the readme.txt file? You are still loading too many MIF source files !

Post your current layout for review.

scaddenp
4 May 2011, 8:45 PM
Bizarre, IE7 issue (doesnt affect later IE versions nor any other browser).
I have cardlayout, menus in a toolbar, and a mif in the layout. ie



mif = new Ext.ux.ManagedIFrame.Panel({
id: 'mif',
defaultSrc: preLoadPage,
loadMask:false
});
PBE = new Ext.Container({
id :'PBE',
layout:'border',
hideMode:'offsets',
items:[mapPanel]
});

mainbody = new Ext.Panel({
layout:new Ext.layout.CardLayout({layoutOnCardChange:true}),
region:'center',
activeItem:0,
items:[mif,PBE],
tbar:toolbar
});


toolbar is full of ext button menus - many of these load different pages into the mif.
Now, if the content of the mif will fit inside the frame without scrollbars appears in the iframe, then all is well. If the scrollbars appear, then the menus vanish. Ie you click on the buttons and nothing appears.

hendricd
4 May 2011, 8:54 PM
Bizarre, IE7 issue (doesnt affect later IE versions nor any other browser).
I have cardlayout, menus in a toolbar, and a mif in the layout. ie



mif = new Ext.ux.ManagedIFrame.Panel({
id: 'mif',
defaultSrc: preLoadPage,
loadMask:false
});
PBE = new Ext.Container({
id :'PBE',
layout:'border',
hideMode:'offsets',
items:[mapPanel]
});

mainbody = new Ext.Panel({
layout:new Ext.layout.CardLayout({layoutOnCardChange:true}),
region:'center',
activeItem:0,
items:[mif,PBE],
tbar:toolbar
});


toolbar is full of ext button menus - many of these load different pages into the mif.
Now, if the content of the mif will fit inside the frame without scrollbars appears in the iframe, then all is well. If the scrollbars appear, then the menus vanish. Ie you click on the buttons and nothing appears.

Try:


mif.autoScroll = true;

Mixed-bag frames like yours may require it.

Note that : most browsers will adjust the overflow on the body of the loaded document when the frame's overflow is set -- But not all. You may have to adjust the body's of some child documents (if you own them).

parsbin
4 May 2011, 9:11 PM
Thanks
solved!
i`v included this

<!-- FRAME -->
<script type="text/javascript" src="../ux/mif/uxvismode.js"></script>
<script type="text/javascript" src="../ux/mif/multidom.js"></script>
<script type="text/javascript" src="../ux/mif/mif.js"></script>
<script type="text/javascript" src="../ux/mif/mifmsg.js"></script>

scaddenp
5 May 2011, 3:08 PM
Fixed! mif.autoscroll true, makes it work! amazing. Docs say that was default - you might want to change that.

scaddenp
5 May 2011, 4:33 PM
Spoke too soon. Works if loaded from file, not if coming from server (and yes, checked server to ensure I had the correct file on it). I'm wondering if issue with DOM not ready. I might try moving code to windows.onload instead of Ext.onready.

scaddenp
5 May 2011, 6:59 PM
Completely puzzling. Code fails (menus dont show if iframe needs a scrollbar) if running from server OR from a network drive direct. If I copy the entire webapp (ext libraries the works) to C drive and open local from their it works. Must be a timing issue. Moving code from ext.onReady to window.onload made no difference.

i'm baffled. Application at kite.gns.cri.nz/PBE/index.html

naxito
6 May 2011, 12:17 AM
Hello hendricd.
First of all, thank you for your great work, and this great extension.

I have a little problem with X-frame messaging. I have upgraded my application from Ext-2.3.0 and MIF 1.2.5 to Ext-3.3.0 and MIF-2.1.5.

All works well, except with tagged messages. Host page doesnt manage that kind of messages.

Host Code

miFrameWiw = new Ext.ux.ManagedIFrame.Panel({
defaultSrc : defaultSrc
,disableMessaging :false
,listeners:{
message: messageReceived, //works fine
'message:wiwMessage': function(srcFrame, message){
alert('testing')
} //dont work
}
});
Iframe code

sendMessage(data, 'wiwMessage');
In previous versions (Mif 1.2.5), worked fine. Although I dont really need a tagged message, I would like to know how it works for future.

Thank you for your help

andynuss
8 May 2011, 6:20 AM
Hi Doug,

I assume that the documentloaded event is equivalent to window.onload function being called. In that case, when documentloaded fires for the mif's latest src doc, the entire dom is ready and the dom elements are all in their final positions, no more browser adjustments due to images being loaded etc.

Is this true?

Andy

hendricd
10 May 2011, 5:49 PM
@andy -- Yes,

MIF's domready event is equivalent to Ext.onReady in a normal document, and documentloaded equates to window.onload for the frame document (after all resources are loaded).

pesca506SAGE
11 May 2011, 1:15 AM
Hello,

I'm using the extension ux.ManagedIframePanel to load PDF on my site with ExtJs 3.3 All right, but does not work with ExtJs 4

I modified miframe.js:

//Ext.ux.ManagedIframePanel = Ext.extend(Ext.Panel, {

Ext.define ('Ext.ux.ManagedIframePanel', {
extend 'Ext.Panel'
alias: 'widget.iframepanel'
.
.
.


I have not changed anything else
Do not believe the <iframe>

I have to change more things?
Another idea to embed the PDF viewer in a window on ExtJs 4

Thanks

NOSLOW
11 May 2011, 5:47 AM
Doug,

Do you plan on providing an update to MIF that is compatible with ExtJS 4?

I'm just starting to upgrade a rather large ExtJS 3 application that uses MIF to v4. If you do not plan on providing a MIF upgrade for v4, that's great and I'll continue to use it. Otherwise, I'll try to phase out MIF during my upgrade.

Thanks,
Gary

mitchellsimoens
11 May 2011, 9:08 AM
Doug,

Do you plan on providing an update to MIF that is compatible with ExtJS 4?

I'm just starting to upgrade a rather large ExtJS 3 application that uses MIF to v4. If you do not plan on providing a MIF upgrade for v4, that's great and I'll continue to use it. Otherwise, I'll try to phase out MIF during my upgrade.

Thanks,
Gary

I have seen a post somewhere in the Ext JS 4 forum that says some people have been able to use Component/ElementLoader to accomplish many things that they were able to do with "MIF". Kind of depends what you are wanting to do and if one of the Loaders are able to do what you want. The only problem I see with "MIF" is that it needs to be rewritten for each release so in the long run is hard to maintain. Doug did a great job on "MIF" but wish it was easier to maintain and upgrade framework.

Farkonix
13 May 2011, 8:05 AM
Hello Doug,
Wanted to ask your suggestions on the problem we're having.
We use extjs 3.2.1 and miframe 2.1.5.
In our application we put miframes into tabs of tabpanel where some pages shown by miframes are extjs screens and some are just plain JSPs. Every time User switches the tab we reload miframes in current and new tabs by calling mif.setSrc().
Everything works great except one annoying error in IE8 happening in ext-all-debug.js:
Line: 3259
Error: Permission denied
in garbageCollect() method.


if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){
if(Ext.enableListenerCollection){
Ext.EventManager.removeAll(d);
}
delete EC[eid];
}
IE debug shows:
d - object;
d.parentNode - permissions denied;
in fact all of "d" attributes have permissions denied
eid - valid ext autogenerated id.

It errors out approximately in 30 seconds after at least one of miframes containing external extjs screen is reloaded - I guess this is when garbageCollect() is executed by the main tab panel screen.
It does not happen if we disable mif reloading on tabswitch.
It does not happen if we reload only tabs containing plain non-extjs JSPs.
And it obviously does not happen if we disable garbage collect Ext.enableGarbageCollector = false.

It seems like the main tabpanel page contains in its Ext object cache some extjs objects from external extjs pages shown by miframes and they continue to stay in cache even when mif reloaded. And garbageCollect() fails to access those dead objects in IE.

I created small example which helps to replicate this issue in IE. Two files:
1. Main tabpanel page (tabTest.html) with 2 tabs - first contains a simple client form, second is a miframe pointing to the external ext page.


<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script src="extjs/adapter/ext/ext-base-debug.js"></script>
<script src="extjs/ext-all-debug.js"></script>
<script src="extjs/ext-lang.js"></script>
<script src="extjs-ux/mif/miframe-debug.js"></script>
<script>
function init() {
Ext.onReady(
function() {
var form = {xtype: 'panel', layout: 'form',
title: 'Local Form',
items: {xtype: 'textfield', fieldLabel: 'Local Field', value: 'test'}
};
var mif = {xtype: 'iframepanel', title: 'Managed IFrame', defaultSrc: 'mifTest.html'};
var tabPanel = {
xtype: 'tabpanel',
activeTab: 0,
items: [form, mif],
listeners: {
'beforetabchange': function(tabPanel, newTab, currentTab){
reloadTabFrame(currentTab);
reloadTabFrame(newTab);
}
}
};
new Ext.Viewport({id: 'viewport', layout: 'fit', items: tabPanel});
}
);
}

function reloadTabFrame(tab){
if (tab && tab.setSrc) tab.setSrc();
}
</script>
</head>
<body onload="init()">
</body>
</html>
2. External ext page - mifTest.html.


<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script src="extjs/adapter/ext/ext-base-debug.js"></script>
<script src="extjs/ext-all-debug.js"></script>
<script src="extjs/ext-lang.js"></script>
<script>
function init() {
Ext.onReady(
function() {
var form = {
xtype: 'panel', layout: 'form',
title: 'MIF Nested Form',
items: {xtype: 'textfield', fieldLabel: 'IFrame Field', value: 'test'}
};
new Ext.Viewport({id: 'viewport', layout: 'fit', items: form});
}
);
}
</script>
</head>
<body onload="init()">
</body>
</html>
Steps to replicate in IE (make sure script debugging and JS notifications are enabled):
- open tabText.html;
- click on second tab containing miframe - mif is loaded the first time;
- click on first tab showing local form - mif is reloaded;
- wait about 30 seconds for error to show up.

So far we have 2 solutions:
- Disable garbage collect on the main tabpanel page Ext.enableGarbageCollector = false, but it seems dangerous.
- Modify garbageCollect() method in ext-all.js and put that IF block on line 3259 into try-catch. However changing core ext code is not a good idea either.

Dough, we would greatly appreciate any of your suggestions on how to get rid of this IE error. Which one of 2 solutions is better? Any other thoughts?
Thank you in advance.

scaddenp
15 May 2011, 2:22 PM
Any pointers of where I could look for fixing this one. I am just head-banging for days and getting nowhere.

hendricd
15 May 2011, 6:19 PM
@scaddenp --

Nice site, vague description of the problem. Way too much code on your site to guess about what your challenge is.

Can you post only the layout code where MIF is involved and explain what you're doing?

scaddenp
16 May 2011, 1:11 PM
Thanks for looking. The problem was described in #805. Layout code here:


mif = new Ext.ux.ManagedIFrame.Panel({ id: 'mif', defaultSrc: preLoadPage, loadMask:false }); PBE = new Ext.Container({ id :'PBE', layout:'border', hideMode:'offsets', items:[mapPanel] }); mainbody = new Ext.Panel({ layout:new Ext.layout.CardLayout({layoutOnCardChange:true}), region:'center', activeItem:0, items:[mif,PBE], tbar:toolbar

The issue is IE7 only.
Application uses menus on a toolbar. Many of these load different pages into a mif.
If mif creates a scrollbar, then popups from menus are no longer visible. (ie clicking on menu button on the toolbar has no visible effect).

For further bizarreness, if I run the application in pure local mode off c:\ drive it works, but not if launched from server or from a network drive.

andynuss
20 Jun 2011, 4:41 AM
Hi Doug,

Currently, all my tomcat mif requests set no cache header information in the response, meaning that the page expires immediately. Yet I noticed that in mif that if I re-request the same url from tomcat immediately thereafter (with .setLocation) that its a nop, and the documentloaded event does not fire. Is MIF checking to see if the same url is re-requested and then effectively does not do it?

Its important to me that whether or not tomcat sets aging information on the content, that the browser be asked to refetch the content, either from the server or from its cache, because I do different dom surgery depending on state.

By the way, lets now say that I change Tomcat servlet to put certain mif pages in the cache forever. And I ask mif for a page different than its current one. But the page has been visited, and is in the browser cache. Will the documentloaded event fire?

Andy

hendricd
20 Jun 2011, 4:57 AM
Hi Doug,

Currently, all my tomcat mif requests set no cache header information in the response, meaning that the page expires immediately. Yet I noticed that in mif that if I re-request the same url from tomcat immediately thereafter (with .setLocation) that its a nop, and the documentloaded event does not fire. Is MIF checking to see if the same url is re-requested and then effectively does not do it?

Its important to me that whether or not tomcat sets aging information on the content, that the browser be asked to refetch the content, either from the server or from its cache, because I do different dom surgery depending on state.

By the way, lets now say that I change Tomcat servlet to put certain mif pages in the cache forever. And I ask mif for a page different than its current one. But the page has been visited, and is in the browser cache. Will the documentloaded event fire?

Andy

@Andy--

No, MIF makes no last/new URI comparisons using either setSrc or setLocation methods (except during IE-domready detection). Both are designed to reload the current page when called without the first argument(uri).

Try adding an exception listener alongside your documentloaded listener, and run again with something like this:


MIF.frameState = null;

MIF.setLocation(null, false, function(){
console.info(MIF.frameState);
});See if the frameState is anything other than 'complete' or 'load'.
Browser version(s)?

hendricd
1 Jul 2011, 2:04 PM
@For those monitoring--

MIF 4.0alpha2 (http://www.sencha.com/forum/showthread.php?137233-Ext.ux.ManagedIframe-4.0-alpha2-for-Ext-4.x&p=621353&viewfull=1#post621353) is now available for Ext 4.0.x.

parsbin
4 Jul 2011, 12:09 AM
how can i use AutoHeight ?
i want set height of parent div, dynamically according to the height of iframe page size.

parsbin
9 Jul 2011, 11:06 PM
not idea?

hendricd
11 Jul 2011, 5:13 AM
how can i use AutoHeight ?
i want set height of parent div, dynamically according to the height of iframe page size.
@parsbin --

Seen this (http://www.sencha.com/learn/legacy/w/index.php?title=ManageIframe:Manual:Frame_FAQ#How_can_I_size_an_Ext.Window_to_an_Iframe_document.3F) FAQ?

svdb
22 Jul 2011, 8:00 PM
[IE8 on XP, FF3.6, Extjs 3.3.3, MIF 2.1.5]

Hi,

When submitting a form from within a MIF on IE8, neither domready or documentloaded events are raised: the handlers aren't called, the console.log() they contain isn't executed. (see code below)

On FF3.6, only the domready event gets raised, but not documentloaded.

I do use eventsFollowFrameLinks: true, but that doesn't seem to help.

The sample code is extremely simple, and the problem is easy to reproduce.

index.html:
<html>
<head>
<script src="../Extjs/adapter/ext/ext-base.js"></script>
<script src="../Extjs/ext-all-debug.js"></script>
<script src="miframe-debug.js"></script>
<script>
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'iframepanel',
defaultSrc: 'page1.jsp',
eventsFollowFrameLinks: true,
listeners: {
domready: function(frame) {
console.log('domready');
},
documentloaded: function(frame) {
console.log('documentloaded');
}
}
}]
});
});
</script>
</head>
<body>
</body>
</html>

page1.jsp:
<html>
<head></head>
<body>
<form action="page2.jsp">
input: <input name="field1" id="field1" ></input>
<input type="submit" value="Submit" />
</form>
</body>
</html>

page2.jsp:
<html>
<head></head>
<body>
<p>hello world!</p>
</body>
</html>

However, when reverting back to use MIF 2.1.4 all events work again on both IE8 and FF3.6.

Thanks,
SVDB

paubach
27 Jul 2011, 5:48 AM
@For those monitoring--

MIF 4.0alpha2 (http://www.sencha.com/forum/showthread.php?137233-Ext.ux.ManagedIframe-4.0-alpha2-for-Ext-4.x&p=621353&viewfull=1#post621353) is now available for Ext 4.0.x.

Thanks Doug!!

BTW, can you add this link to 1st post of thread? It would make easier searching for it.

Rgds,
Pau

hendricd
27 Jul 2011, 2:46 PM
Thanks Doug!!

BTW, can you add this link to 1st post of thread? It would make easier searching for it.

Rgds,
Pau
Good idea, done.

tboilard
1 Aug 2011, 11:27 AM
Hello,

We are having some issues displaying PDF's inline within a miframe since upgrading to Safari 5.1 (Firefox 5.0.1 is having issue as well). After updating Safari to 5.1 PDF's no longer display inline they are treated as downloads.

You can recreate this issue by visiting the miframe demo page (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit) using Safari 5.1 and you will see that the PDF's in the demo are treated as downloads. Visiting the same demo page with Safari 5.0.1 or 5.0.5 should work fine.

Any ideas?

Any help would be greatly appreciated.

Thanks,
Tom Boilard

jbird526
1 Aug 2011, 11:48 AM
[IE8 on XP, FF3.6, Extjs 3.3.3, MIF 2.1.5]

Hi,

When submitting a form from within a MIF on IE8, neither domready or documentloaded events are raised: the handlers aren't called, the console.log() they contain isn't executed. (see code below)

On FF3.6, only the domready event gets raised, but not documentloaded.

I do use eventsFollowFrameLinks: true, but that doesn't seem to help.

The sample code is extremely simple, and the problem is easy to reproduce.

index.html:
<html>
<head>
<script src="../Extjs/adapter/ext/ext-base.js"></script>
<script src="../Extjs/ext-all-debug.js"></script>
<script src="miframe-debug.js"></script>
<script>
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'iframepanel',
defaultSrc: 'page1.jsp',
eventsFollowFrameLinks: true,
listeners: {
domready: function(frame) {
console.log('domready');
},
documentloaded: function(frame) {
console.log('documentloaded');
}
}
}]
});
});
</script>
</head>
<body>
</body>
</html>

page1.jsp:
<html>
<head></head>
<body>
<form action="page2.jsp">
input: <input name="field1" id="field1" ></input>
<input type="submit" value="Submit" />
</form>
</body>
</html>

page2.jsp:
<html>
<head></head>
<body>
<p>hello world!</p>
</body>
</html>

However, when reverting back to use MIF 2.1.4 all events work again on both IE8 and FF3.6.

Thanks,
SVDB

I have found that the issue is in the loadHandler function changes between 2.1.4 and 2.1.5. I have not figured out why but if I change the miframe-debug.js line 3279 from
this._frameAction && setTimeout( function(){frame._onDocLoaded(rstatus); }, .01);
back to
setTimeout( function(){frame._onDocLoaded(rstatus); }, 0);
the documentloaded is called. As always for domready to be called you need to call the update method. Hope someone smarter, and that isnt hard, can explain why.

ttbgwt
9 Aug 2011, 5:45 AM
How can I print the contents within my iframe?

tboilard
9 Aug 2011, 5:51 AM
Hello,

We are having some issues displaying PDF's inline within a miframe since upgrading to Safari 5.1 (Firefox 5.0.1 is having issue as well). After updating Safari to 5.1 PDF's no longer display inline they are treated as downloads.

You can recreate this issue by visiting the miframe demo page (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit) using Safari 5.1 and you will see that the PDF's in the demo are treated as downloads. Visiting the same demo page with Safari 5.0.1 or 5.0.5 should work fine.

Any ideas?

Any help would be greatly appreciated.

Thanks,
Tom Boilard

After more investigation it turns out that this is an issue with Safari 5.1 Lion. For more information visit...

https://discussions.apple.com/thread/3217657?start=0&tstart=0

Thanks,
Tom Boilard

svdb
22 Aug 2011, 9:15 AM
How can I print the contents within my iframe?
The way we did was to pop up a new window with a printer-friendly version of the content.
Using window.print() will then display the print options and allow the user to start printing.

svdb
22 Aug 2011, 9:23 AM
Thanks jbird526,
I diffed the two versions and came to the same conclusion.

Doug, could you please comment on this?
Although you recommend using 2.1.5, it seems to contain a regression.

Thanks,
Stefaan Vandenbussche

hendricd
7 Sep 2011, 4:08 AM
Thanks jbird526,
I diffed the two versions and came to the same conclusion.

Doug, could you please comment on this?
Although you recommend using 2.1.5, it seems to contain a regression.

Thanks,
Stefaan Vandenbussche

I'll be posting release 2.1.7 on code.google.com shortly. It addresses the issues you've all reported and a few more issues for IE9.

dreas
20 Sep 2011, 4:29 AM
Any news on version 2.1.7? On http://code.google.com/p/managediframe/downloads/list version 2.1.5 still is the latest release.

kavon
21 Sep 2011, 4:42 PM
how to switch the theme?

Antjac
23 Sep 2011, 4:56 AM
Hi,

I use managed Iframe to show PDF files in my project.
I want to have 2 different windows which load 2 pdf.

It's ok but I've a display issue with the header of the window which is always behing the PDF plugin.

A picture is better that a long text

28273
Do you have an idea to solve it ?

Thx

carstep
28 Sep 2011, 11:54 AM
Hi there, I try to achieve a very simple thing with sending messages to the iframes source.

I have a button which iterates over the current elements of a grid and try to pass some data over to the included site in the iframe:


new Ext.Button({
iconCls: 'map'
,handler: function(){
var fr = new Ext.Window({
modal: true
,title: 'Highlight POIs on a map'
,width: 616
,height: 490
,layout: 'fit'
,resizable: false
,items: [new Ext.ux.ManagedIFramePanel({
border: false,
bodyBorder: false,
disableMessaging :false,
defaultSrc:'poilist.html',
listeners:{
domready : {
fn: function(frame){
this.getStore().each(function(rec){
if((rec.get('longitude')!=0)&&(rec.get('latitude')!=0)){
var name = rec.get('poi_name');
var ll = {lon:rec.get('longitude'),lat:rec.get('latitude')};
frame.sendMessage('aaa');
}
});
}
,scope: this
}
,'message': function(frame, message){
console.log(message.data);
}
}
})]
})
fr.show();
}
,scope:this
})


I try to listen to the message sent over but it never fires:



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title></title>
<link rel="stylesheet" href="InterPont/OpenLayers/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="InterPont/OpenLayers/style.css" type="text/css">

<script src="InterPont/OpenLayers/lib/Firebug/firebug.js"></script>
<script src="InterPont/OpenLayers/OpenLayers.js"></script>
<script type="text/javascript">
var map = null;
var layer,markers;
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var extent = new OpenLayers.Bounds.fromArray([99.95,9.662,100.082,9.805]).transform(fromProjection,toProjection);

var receiveMsg = function(event){
// event.source.postMessage('fromFrame');
alert(event.data);
}

function init() {
var options = {
restrictedExtent: extent
}
map = new OpenLayers.Map('map', options);
var osm = new OpenLayers.Layer.OSM();

markers = new OpenLayers.Layer.Markers("zibo");
map.addLayer(osm);
map.addLayer(markers);
map.addControl(new OpenLayers.Control.LayerSwitcher());

map.zoomToExtent(extent);
}

window.addEventListener("message", receiveMsg, false);

</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</body>
</html>


It simply never arrives at the destination (ff6,7, chrome 14)

r. Sandor

bauwelp
29 Sep 2011, 4:51 AM
Hello,

I need to do the following: I generate a JSON structure in my extjs page, post this to the server and get an SVG file back. I need to show this SVG file in a panel in my extjs page.

I can do this inline, but only if my file containing the extjs code is an xhtml page, which triggers some bugs in extjs.

In Firefox, I cannot show the SVG inline in a regular html page, so I was thinking of using an iframe and your extension.

But I don't seem to find how to do this.

I can get the SVG with Ext.Ajax.request(...) but when I then try to update the Ext.ux.ManagedIFrame.Panel, the SVG is put again in an html document inside the iframe and does not render in FF.

Is there a way to set the content-type?

I cannot just use the src parameter since I need to pass this JSON.

I tried with the load method, but it seems the request is never executed...

Any help or pointers in the right direction would be appreciated.

Thanks,

Philip

hendricd
3 Oct 2011, 11:55 AM
@bauwelp --

The MIF.submitAsTarget method sounds like the way to go. Submit/POST your JSON structure as params to that method and the IFRAME will render whatever the server returns as a result.

dreas
10 Oct 2011, 2:15 AM
Any news on version 2.1.7? On http://code.google.com/p/managediframe/downloads/list version 2.1.5 still is the latest release.
A response would be very much appreciated. Thanks in advance.

siebmanb
28 Oct 2011, 5:07 AM
Hello,

Does ManagedIFrame works with Sencha Touch 1.1.1 ? And now can you display pages from foreign domain in the iFrame ?

Thanks a lot

dtex-lab
29 Jan 2012, 2:14 AM
Hi
there is a way to change the Ext.ux.ManagedIFrame.Window title from the loaded code ?
I see that from the inside code I can access the hostMIF variable.. but no way to change the ManagedIFrame Window (or at least I haven't fount a way..)
ty

hendricd
29 Jan 2012, 5:41 PM
@dtex --

For the MIF.Window instance title (from within the frame document), it's simply:


window.hostMIF.ownerCt.setTitle('Something New');

dtex-lab
29 Jan 2012, 11:46 PM
ty hendricd

if it can be useful for others... to manage the related button on the taskbar it is enough to access the variable taskButton ont he ownerCt


window.hostMIF.ownerCt.taskButton

e.g. I used it in order to change the taskButton title and tooltip

ty again.

brookd
3 Mar 2012, 11:55 AM
First, thank you Doug for a great component. I use it alot in our app and just bought a license!

I have this one issue where Ext.Window's are missing some slices of the border/graphics when shown over top a managed iframe with a PDF.

I have tried:

Ext.useShims = true;

Setting shim:true on the window and manually calling showShims(). Nothing works so far.

My Code is pretty simple:



{
xtype : 'iframepanel',
style : 'padding:0px;',
defaultSrc : formManager.getFormUrl(this.node.id,'preview'),
autoDestroy : true,
autoScroll : true
}


You can see exactly what I mean here:
http://screencast.com/t/o5xjwCoROnq

We are launching a beta version of our app on Monday and trying to get this little issue worked out..

Brook

brookd
9 Mar 2012, 7:16 AM
*bump* - anybody?

hendricd
13 Mar 2012, 5:24 PM
@brook --

This is not an MIF-specific feature, but a tricky Ext configuration puzzle ;)

Have a look at http://demos.theactivegroup.com/demodesk.html?demo=media&script=acrobat
examining the source and differences between rendering the PDF natively vs hosted in an iframe.

brookd
13 Mar 2012, 8:50 PM
Hey Hendricd,

Thanks for the reply. I checked out the demo and tried adding the visibility mode plugin to my code, I tried adding the shadow:false on the window and anything else I could find that was different from my code. But no luck.

I also tried using the uxmedia class instead of the miframe classes but I got the same result. I think I have all the same settings you have in your demo.

So the question is what would cause this behavoir? I even created a new window using your exact code and had the same issues on the corners.

32708

1. I have the visibility plugin defined on the parent tabPanel
2. Ext.useShims = true
3. Window has shim=true / shadow = false
4. My config looks like:



{
xtype : 'mediapanel',
id : 'pdfplaything',
mediaCfg:{
mediaType : 'PDF',
url : lf.app.formManager.getFormUrl(this.node.id,'preview'),
autoSize : true,
autoScroll :true
}


This element is a child of the tabPanels tab. Could that be an issue?

Also when I drag my window over the PDF it disapears whereas in your demo the outline is still visible. So I guess the shim is not being applied. But when I trace the code I can see the classes being applied to the shim div..

brookd
19 Mar 2012, 2:56 PM
*bump* really stuck on this....

Antjac
21 Mar 2012, 4:17 AM
Yep, I've the same issue, not very nice but i've not found a solution...

brookd
17 Apr 2012, 9:05 PM
Hendric,

Any chance you could shed some light on this? I am willing to pay you for your time if you want to contact me offlist or pm me...

alexeiberkov
10 May 2012, 6:14 AM
Does anyone know why on `focus` event does not work for minframe component ?


this.add({
xtype: 'iframepanel',
border: false,
...
listeners: {
focus: function(a, g) {
alert('1');
}
}
});

hendricd
14 May 2012, 7:16 AM
Does anyone know why on `focus` event does not work for minframe component ?


this.add({
xtype: 'iframepanel',
border: false,
...
listeners: {
focus: function(a, g) {
alert('1');
}
}
});


@alexei --

Such events would only work for same-origin frames ;)

hendricd
5 Jun 2012, 10:38 AM
@brookd:

Try one or more of these overrides for Ext.Layer. Your focus should be there. The Visibility plugin, MIF, or uxMedia have nothing to do with your symptoms. The z-order of Window framing and Shadowing are the real issue.




(function(){

var isDocRe= /#document|body/i,
supr = Ext.Element.prototype;

Ext.override ( Ext.Layer, {
// private
constrainXY : function(){
if(this.constrain){
//honor the Layer's parentNode instead of simply document
var container = Ext.fly( this.dom.parentNode, '_constrain'),
isTop = isDocRe.test(container.dom.nodeName),
vw = isTop ? Ext.lib.Dom.getViewWidth() : container.getWidth(),
vh = isTop ? Ext.lib.Dom.getViewHeight() : container.getHeight();

var s = container.getScroll();

var xy = this.getXY();
var x = xy[0], y = xy[1];
var so = (this.shadowOffset || 0) * 2;
var w = this.dom.offsetWidth+so, h = this.dom.offsetHeight+so;
// only move it if it needs it
var moved = false;
// first validate right/bottom
if((x + w) > vw + s.left){
x = vw - w - so;
moved = true;
}
if((y + h) > vh+s.top){
y = vh - h - so;
moved = true;
}
// then make sure top/left isn't negative
if(x < s.left){
x = s.left;
moved = true;
}
if(y < s.top){
y = s.top;
moved = true;
}
if(moved){
if(this.avoidY){
var ay = this.avoidY;
if(y <= ay && (y+h) >= ay){
y = ay-h-5;
}
}
xy = [x, y];
this.storeXY(xy);
supr.setXY.call(this, xy);
this.sync();
}
}
return this;
},

// private
destroy : function(){
this.hideShim();
this.shadow && this.shadow.hide();
this.dom && Ext.Layer.superclass.remove.call(this);
},

remove : function(){
this.destroy();
}
});

// Private utility class that manages the internal Shadow cache
Ext.Shadow.Pools = function(){
var p = [];
var markup = Ext.isIE ?
'<div class="x-ie-shadow"></div>' :
'<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
return {
pull : function(){
var sh = p.shift();
if(!sh){
sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
sh.autoBoxAdjust = false;
}
return sh;
},

push : function(sh){
p.push(sh);
},
destroy : function(){
!!p.length && Ext.destroy(p);
}
};
}();
}();



And, ANYTIME you call for the floating window you must let the WindowManager do it's job (yet forcefully):



yourButton = {
text : 'Show Shimmed Popup Window',
scope : this,
handler : function(button){
Ext.useShims = true; //enable IFRAME shims
var shimmedWindow = Ext.getCmp('shimWin') || //Re-use it!
new Ext.Window({
id: 'shimWin',
width : 200,
height: 200,
title : 'Shimmed Window',
html: 'test',
closeAction: 'hide',
shadow : true,
shim : true //IFRAME-shim the window

});

shimmedWindow.isVisible() ? shimmedWindow.toFront() :
shimmedWindow.show(button.el.dom);
}
}


I would not enable: Ext.useShims until you absolutely need it for this purpose, otherwise every component in your layout will get an IFRAME shim behind it ! Expensive!

Good Luck ;)

zboris
10 Jun 2012, 6:01 PM
I have asked this question in wrong forum, but I believe it should be rather posted here.

Using miframe within border layout causes CSS styling problems.
Basically all my buttons within miframe loaded content keeping x-btn-over state even after mouse pointer leaves button. Clicking on grid column options - displaces popup menu position. This menu stays permanently on top of grid. Sometimes that menu appears at random positions on the screen...
If i reload iframe content second time - everything is fine.
Hope image below can describe the nature of my problem in better words.

Has anyone experienced similar?

PS: if I load content without miframe, everything renders/ behaves perfectly fine.
Stale x-btn-over class
36106

Misplaced grid column menu:
36107

kamalraj
18 Jun 2012, 9:57 PM
Hi All,

Going through this thread,

If my understanding is right, ux.ManagedIFrame 2.x can be used with Ext 3x.

I am using Ext js 4.1.

Is there a latest MIFrame available which is compatible with the Ext js 4.1?

Please guide me with this.

--Kamal

zboris
19 Jun 2012, 3:10 AM
Kamalraj.
have a look here
http://www.sencha.com/forum/showthread.php?137233-Ext.ux.ManagedIframe-4.0-alpha2-for-Ext-4.x&p=621353&viewfull=1#post621353

sidthegooner
23 Aug 2012, 11:43 PM
Hi doug,
I'm using the release 2_1_5 and the application i'm working on uses ext 3.4..I've included miframe-debugging.js only as i require only the basic features provided by miframe in rendering an iframe..I find the setSrc() not working,in the sense when i want to refresh the iframe panel by simply calling setSrc(),the load Mask fills the panel and never disappears.I was using an earlier cersion of Miframe which was working properly..

I've done something like this to create an iframe

iportal.view.iframepanel = Ext.extend(Ext.Panel, {
viewConf : null,
conf : null,
uri : null,
initComponent : function (){
var defaultConfig = {
xtype:'Panel',
items:[{
xtype : 'iframepanel',
height : this.height,
defaultSrc : this.uri,
loadMask : true
}]
};
Ext.apply(this, defaultConfig);
iportal.view.iframepanel.superclass.initComponent.apply(this);

});

when i click the refresh button in my application,i'm doin something like this

this.getComponent(0).getComponent(0).getComponent(0).setSrc();

sidthegooner
24 Aug 2012, 1:06 AM
Its a load mask issue rather than a refresh issue..when i commented out loadMask : true,the refresh actually happens

sidthegooner
24 Aug 2012, 1:42 AM
had to change
hideOnReady : true,

which defaulted to false...

Would it have any side impacts??

sidthegooner
16 Sep 2012, 10:05 PM
Hi,
I'm using Ext 3.4..And i find autoscroll : false not working in IE..Firefox renders the iframe without any scrollbar..But IE doesn't..Is there any workaround to disable the scrollbar???
Code Snippet :

var mif = new Ext.ux.ManagedIFrame.Panel({
defaultSrc : this.uri,
height : this.height,
autoScroll : false,
frameborder : 0,
border : false,
loadMask : {
msg : this.loadMask
}
}

hendricd
18 Sep 2012, 4:00 AM
Hi,
I'm using Ext 3.4..And i find autoscroll : false not working in IE..Firefox renders the iframe without any scrollbar..But IE doesn't..Is there any workaround to disable the scrollbar???


@sid --

It would be best if you let the hosted page (in the frame) control scrolling of it's <body> tag. IE does not permit overriding the overflow features of a nested document.

sidthegooner
28 Sep 2012, 8:05 PM
I find not the nested document having the scroll,but the iframe panel itself having it!!!If i size the document inside, 4 pixels lesser than that of the available height,this scroll bar disappears...Could anything be done??

FanOfExt
9 Jan 2013, 5:52 PM
Is this component compatible with ext 4.1.x ? The original thread says "Ext 3.1.1 higher"

ironandsteel
26 Jan 2013, 10:16 AM
I have a simple php page that contains a form and lets me read in and update a record in a database.

I am trying to enclose this is a modal popup from an Ext 3.4 application.

I am using Managed IFrame 2.1.5. I am using the example code from the MIF wiki. The code opens the MIF and displays my php file just fine.

I am trying to figure out how to close the window when I click the cancel or ok button on my form on my php page.

Here is my code that creates the MIF and opens the window. editProject is a method in my editablegrid object.

I've looked at every mif wiki and doc site that still works and I can't locate any examples or docs on how to close the window, or specifically how to access the containing window from within the iframe.

Thanks!
Lynn Kasdorf




,editProject: function() {
//this.projectForm.show(record, grid.getView().getCell(row, col), this.store);
var MIF = new Ext.ux.ManagedIFramePanel({
border: false,
bodyBorder: false,
defaultSrc:'editProject.php?projectId=' + this.projectId,
listeners:{
domready : function(frame){
var fbody = frame.getBody();
var w = Ext.getCmp('myFrameWin');
if(w && fbody){
//calc current offsets for Window body border and padding
var bHeightAdj = w.body.getHeight() - w.body.getHeight(true);
var bWidthAdj = w.body.getWidth() - w.body.getWidth(true);
//Window is rendered (has size) but invisible
w.setSize(Math.max(w.minWidth || 0, fbody.scrollWidth + w.getFrameWidth() + bWidthAdj) ,
Math.max(w.minHeight || 0, fbody.scrollHeight + w.getFrameHeight() + bHeightAdj) );
//then show it sized to frame document
w.show();
}
}
}
});

var windowFrame = new Ext.Window({
title: name,
width: 600, //give it something to start with until the frame renders
height: 400,
hideMode:'visibility',
id:'myFrameWin',
hidden : true, //wait till you know the size
title: 'Sized To Frame Document',
plain: true,
constrainHeader: true,
minimizable: true,
ddScroll: false,
border: false,
bodyBorder: false,
layout: 'fit',
plain:true,
maximizable: true,
buttonAlign:'center',
items:MIF,
modal: true
});
windowFrame.show();
}

litou
25 Feb 2013, 1:24 AM
the web site of api document couldn't open, and demo too!!
is there api document anywhere else?

http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.ManagedIFrame.Component

i'm sad about the web site

Waltzy
25 Mar 2013, 4:16 AM
The CDL License link (http://licensing.theactivegroup.com/)is broken, could you fix this or link to another page detailing the License?

Cheers.

Antjac
4 Apr 2013, 12:43 AM
Hi,

I've got a problem when i try to load a PDF file into an iframePanel with IE10 (Working on IE9, FF, etc...)
In fact, when I load a PDF, the pdf is shown in the iframe with Foxit or Acrobat Reader.
But if i want to change the pdf in the iframe or hide it, the PDF still showed...
This issue is known (http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/8ff26bbd-9471-4137-ac6a-ff34ee02ab74/);

My solution in mirame.js



setLocation : function(url, discardUrl, callback, scope) {

var src = url || this.src || this.resetUrl;
var O = this._observable;
this._unHook();
Ext.isFunction(callback) && O.addListener('_docload', callback, scope||this, {single:true});
this.showMask();
var s = this._targetURI = (Ext.isFunction(src) ? src() || '' : src);
if (discardUrl !== true) {
this.src = src;
}
try {
this._frameAction = true; // signal listening now
this.getWindow().location.replace(s);
this.checkDOM();
} catch (ex) {
O.fireEvent.call(O,'exception', this, ex);
};
this.setSrc(""); //TO ADD
return this;

},

Antjac
26 Nov 2013, 1:32 AM
Another issue with IE11, by closing an iframe with PDF, I get a white screen...

I added this line in miframe.js

/** @private */
beforeDestroy : function() {
var F;
if(F = this.getFrame())
{
F.setSrc("about:blank"); //AA : Bug IE 11; (Ecran blanc);
F.remove();
this.frameEl = this.frameShim = null;
}
this.relayTarget && (this.relayTarget.frameEl = null);
MIF.Component.superclass.beforeDestroy.call(this);
}

wildweasel
18 Apr 2014, 12:41 PM
Bump. Interested in using the ManagedIFrame in our commercial project.

This thread says there is a dual license, but the project page https://code.google.com/p/managediframe/ only mentions a single GNU GPL v3 license. If this thread is correct, then we'll need the information from the CDL link that is broken at the moment.

Thanks.

SebTardif
8 Dec 2014, 10:56 AM
Anyone having something that work in Ext JS 5 and could share the class?