PDA

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



Pages : 1 2 [3] 4

florin.raicu
9 Feb 2010, 6:39 AM
You should not load the EXTJS Framework in the iFrames. Then you have no freezing problems. Access to Ext is possible through parent.ext .

Hope this helps. For me it fixed all freezing issues.

I'm not using iframes. I'm using mif in order to use the tinyMCE.

When I'm using MIF and also a form in a tab (form with property uplod set to true) the IE is freezing

mschwartz
9 Feb 2010, 8:24 AM
doug,

Ext-3.1.1 (just downloaded), mif-2.1 (just downloaded from your repo).



region: 'center',
layout: 'card',
activeItem: 0,
items: [
...
{
xtype: 'iframepanel',
id: 'myframe',
url: 'blank.html'
}
...
]


Much later in the program execution:



var myframe = Ext.getCmp('myframe');
myframe.getFrameDocument().write('');


myframe.getFrameDocument() is null

(the function exists, but returns null)

Steping into getFrameDocument():


getFrameDocument : function() {
return this.getFrame() ? this.frameEl.getFrameDocument() : null;
},


and into getFrame():


getFrame : function(){
if(this.rendered){
if(this.frameEl){ return this.frameEl;}
var f = this.items && this.items.first ? this.items.first() : null;
f && (this.frameEl = f.frameEl);
return this.frameEl;
}
return null;
},


this.frameEl is null.

Additional info:

Set a breakpoint at line ~2012 in mif.js in the onRender() function and it's never called.

tester1
9 Feb 2010, 9:25 AM
I'm not using iframes. I'm using mif in order to use the tinyMCE.

When I'm using MIF and also a form in a tab (form with property uplod set to true) the IE is freezing

MIF ist simply an Iframe with some additional logic. You simply should not load any EXTJS Scripts in the Pages that you load in an MIF Panel. That is documented on the MIF Page as well.

muratyildiz
10 Feb 2010, 1:16 PM
I am able to resolve the problem by referencing miframe.js instead of mif.js. But I am getting 'this.dom.readyState is null or not an object' error in IE when closing a Iframe window. Window is closing but then browser locking.

I am not getting this error in FF. But locking too.




var winMenuItem = new Ext.ux.ManagedIFrame.Window( {
title : baslik,
width : genislik,
height : yukseklik,
maximizable : true,
collapsable : true,
id : tabId + "Win",
constrain : true,
modal : showModal,
closeAction : 'hide',
onEsc : Ext.emptyFn(),
closable : true,
loadMask : {
msg : 'Loading...'
},
autoScroll : true,
defaultSrc : adres,
});
winMenuItem.show();


close method




closeWindow : function(winId) {
var win = window.parent.Ext.getCmp(winId);
if (win) {
win.close();
}

yugho
11 Feb 2010, 1:19 AM
Hi..

I have several problems here with miframe. I need to use iframe.

ExtJS : 3.1.1.
Test case: webpage containing javascript with only 2 panels(collapsible), and include miframe extension
miframe: 2 and 2_01

IE: javascript error: _elCache.$_doc is null, row 31 of miframe.js

var f=function(){};f.prototype=El.prototype;var docEl=new f();docEl.dom=el;docEl._isDoc=true;return cache._elCache['$_doc']=docEl;}
Firefox: page successfully loaded, but when upper panel is collapsed, lower panel won't relocated its position.

I need to solve both problems.... I've checked the codes and several resources, but still can't figure out the problem. Please give me some clue. Thank you..

massimo
12 Feb 2010, 12:40 AM
I have the problem that you can see in the attached image.
When the menu float over the iFrame (a page with a java applet) the menu item is totally visible but the underlying panel is not visible.

I try setting z-order for the menu but I'm not able to solve the problem.

Can someone help me?

Sorry for my poor english, thank you.

TheBerliner
12 Feb 2010, 6:05 AM
Hello Doug,

I am currently having a hard time getting link clicks out of an iFrame following your examples. I just don't understand how it works but I will spend a fourth day trying on my own before bugging you.

But while reading through the documentation and sources I noticed one little error that might confuse others. The source comment for eventsFollowFrameLinks contains some wrong comment when I believe what is said here in the learning part (http://www.extjs.com/learn/ManageIframe:Manual:Frame_Using#ManagedIFrame:config:eventsFollowFrameLinks).

It's exactly the same comment that seems to be correct for disableMessaging.

Just as a little hint.

Regards

richgoldmd
12 Feb 2010, 8:33 AM
I have the problem that you can see in the attached image.
When the menu float over the iFrame (a page with a java applet) the menu item is totally visible but the underlying panel is not visible.

I try setting z-order for the menu but I'm not able to solve the problem.

Can someone help me?

Sorry for my poor english, thank you.


This is not an MIF problem. This is an old problem with Ext. See this thread: http://www.extjs.com/forum/showthread.php?t=27515
I am still using this fix in Ext3.1.1 - but the css changes are no longer needed.

Here is my current override for this problem:



// Note +2 adjustments below... seems to solve shimming in IE7+ - needs further research
// This appears to still be required in Ext 3.1.x The underlying code has not really changed.
if (Ext.isIE) {
Ext.Layer.prototype.sync = function(doShow){
var sw = this.shadow;
if(!this.updating && this.isVisible() && (sw || this.useShim)){
var sh = this.getShim();

var w = this.getWidth(),
h = this.getHeight();

var l = this.getLeft(true),
t = this.getTop(true);

if(sw && !this.shadowDisabled){
if(doShow && !sw.isVisible()){
sw.show(this);
}else{
sw.realign(l, t, w, h);
}
if(sh){
if(doShow){
sh.show();
}
// fit the shim behind the shadow, so it is shimmed too
var a = sw.adjusts;
var sa = Ext.isIE ? 2 : 0;
sh.setSize(w+a.w+sa, h+a.h+sa);
sh.setLeftTop(Math.min(l, l+a.l)+sa, Math.min(t, t+a.t)+sa);
}
}else if(sh){
if(doShow){
sh.show();
}
sh.setSize(w, h);
sh.setLeftTop(l, t);
}
}
};
}

mystix
12 Feb 2010, 10:01 AM
This is not an MIF problem. This is an old problem with Ext. See this thread: http://www.extjs.com/forum/showthread.php?t=27515
I am still using this fix in Ext3.1.1 - but the css changes are no longer needed.


@richgoldmd:
i've moved your original bug report from the 2.x Bug forum to the 3.x Bug forum, and bumped it as well to get things back on the radar.

@jamie is requesting a test case for the issue, so if you could provide one, it would help speed things along.

bocockli
12 Feb 2010, 2:40 PM
Hi

I've got a basic setup of a modal window with a single iframe panel in it.

If I resize the window horizontally and vertically, then click the magnifying glass over the image, the image will zoom and the panel bring in vertical and horizontal scrollbars as expected.

However the image will only stretch horizontally to fill the increased panel size, not vertically. So I end up with a blank area at the bottom of the panel, rather than the image.

Looking the the HTML for the iframe, you can see the width value changes on a resize, the height doesn't. Is this normal or a bug?

Thanks, Len

armagedon
14 Feb 2010, 6:28 AM
MIF ist simply an Iframe with some additional logic. You simply should not load any EXTJS Scripts in the Pages that you load in an MIF Panel. That is documented on the MIF Page as well.

I do not understand, why it should be not possible to load EXT JS Scripts in the Pages that are loaded by MIF Panel. (I also didn´t found the resource, where is written, that this is not possible)

On MIF Google Code there is the first sentence


Ever try to use an Iframe element as a '''writable''' body to Ext.Panel? Perhaps to render your own content in isolation from the rest of the host page, or just load another website in a tab panel.
So then there is some mismatch in the strategy and logic. Could the developer please bring some light in this problem?

However, it is true, that loading EXT JS Scripts in the MIF Pages causes strange Problems.

Today I was trying to load several MIFs in Tabs with Ext 3.1.1 and MIF 2.1 (SVN rev 80,81,82). Loading the Pages was not a Problem. But as I try to close the Tab, my applications freezes. This only occurs in FF 3.0.XX, IE 7 (3.5 not tested). Chrome and IE 8 are working well. Opening "http://www.google.com" in e.g. 5 MIFs doesn`t causes any problems. By removing ext-all.js from my loaded pages everything works fine, but the application is gone.
Is this a known problem/restriction? It will be nice to discuss this "problem?!".

p.s. I have been using several EXT JS pages with MIF in EXT 3 and MIF 2 with success!

armagedon
14 Feb 2010, 6:42 AM
You should not load the EXTJS Framework in the iFrames. Then you have no freezing problems. Access to Ext is possible through parent.ext .

Hope this helps. For me it fixed all freezing issues.


I am going to try this....

Why there is a problem with loading EXT Framework in the MIF Page?

muratyildiz
14 Feb 2010, 6:49 AM
Try this.
http://www.extjs.com/forum/showthread.php?t=92040

armagedon
14 Feb 2010, 7:19 AM
Try this.
http://www.extjs.com/forum/showthread.php?t=92040


Dear murytyildiz,

you are my hero :-)

It works very nice!

I just suggest to add


style="height: 100%;" or


style="height: '+this.height+'px;"Otherwise the IFRAME has small default height.



header :this.header,
html: '<div id="divTab-'+this.id+'" style="height: 100%;"><iframe id="frameTab-'+this.id+'" style="overflow:auto;width:100%;height:100%;" frameborder="0" src="'+this.url+'"></iframe></div>',
width : this.width,
This is very nice piece of code and the best - very simple and light.

Thank you very much!

muratyildiz
14 Feb 2010, 7:46 AM
Thanks for help.


Dear murytyildiz,

you are my hero :-)

It works very nice!

I just suggest to add


style="height: 100%;" or


style="height: '+this.height+'px;"Otherwise the IFRAME has small default height.



header :this.header,
html: '<div id="divTab-'+this.id+'" style="height: 100%;"><iframe id="frameTab-'+this.id+'" style="overflow:auto;width:100%;height:100%;" frameborder="0" src="'+this.url+'"></iframe></div>',
width : this.width,
This is very nice piece of code and the best - very simple and light.

Thank you very much!

njw
15 Feb 2010, 11:29 AM
We are using ExtJS 3.1.0 (release) and MIF2.1

When uploading a file using IE, the browser crashes on File Upload due to DEP.

To remedy this problem, I changed line 6382 in ext-all-debug from



if(!me.debugUploads){
setTimeout(function(){Ext.removeNode(frame);}, 100);
}
to



if(!me.debugUploads){
//setTimeout(function(){Ext.removeNode(frame);}, 100);
setTimeout(function(){
var myIframe = Ext.get(frame.id);
myIframe.remove();
}, 100);
}
Couple of questions:
1) Should I be required to do this?
2) I feel very vulnerable overwriting Ext.data.Connection. Would any other components might be affected by this change? If so, what components. I did some testing with our forms. They seemed okay.

Thanks,
Albert

I get the same issue with MIF 2.1 and Ext 3.1.1. A simple Ext form panel used for a file upload works fine if the MIF extension isn't included on the page. Include MIF and the same upload code crashes IE with a DEP/Data Execution Prevention error. Upload works fine, it appears to be as above, the Ext.removeNode after the upload completes.

Anyone have any ideas on this?

hendricd
15 Feb 2010, 11:51 AM
MIF 2.1.1 (for Ext 3.1.1+ ONLY) is available in code.google trunk and zip !

Please report any issues you encounter ASAP. ;)

massimo
15 Feb 2010, 11:57 PM
This is not an MIF problem. This is an old problem with Ext. See this thread: http://www.extjs.com/forum/showthread.php?t=27515
I am still using this fix in Ext3.1.1 - but the css changes are no longer needed.

Here is my current override for this problem:

[...]



Thank you very much! It works fine.

njw
16 Feb 2010, 12:48 AM
MIF 2.1.1 (for Ext 3.1.1+ ONLY) is available in code.google trunk and zip !

Please report any issues you encounter ASAP. ;)

Thanks. Just tried the update, unfortunatly IE is still crashing with a DEP error after a File Upload.

I had some more time to test today and have located the error. In the MIF's override of Ext.removeNode, the error occurs at line 380:



delete el.dom;


Thanks

SunWuKung
16 Feb 2010, 5:19 AM
I am trying to get an element in a managed iframe but so far no luck.

this finds it but it does not return the Extjs element
var element = document.getElementById('name');

this doesn't find it
var element =Ext.getCmp('name');

How do I do this?
Thanks for the help.
SWK

Sorry - found that document.getElementById works for me fine.

hendricd
16 Feb 2010, 8:23 AM
Thanks. Just tried the update, unfortunatly IE is still crashing with a DEP error after a File Upload.

I had some more time to test today and have located the error. In the MIF's override of Ext.removeNode, the error occurs at line 380:



delete el.dom;
Thanks

@njw -- Any specific IE version?

mcouillard
16 Feb 2010, 12:49 PM
We've used MIF since Ext 2.2 and it's worked great. But since Ext 3.1.1 and MIF 2.1 (and later 2.1.1) we're no longer able to wrap MIF panels inside each other. In other words...

Top parent page - a viewport - uses MIF for the center region
Center region page - a viewport - uses MIF for a portal or tabpanels
Third level page - the one inside a portlet or tabpanel item - works fine

Once the center region page is loaded and then the page is changed (like you navigate to a different center region page, or a different third level page) multiple events fail to work. For instance, the top parent page's menu fails to be clickable. The center region page's tabpanels are no longer clickable. Etc.

This happens in both IE7 and FF3.6

Our workaround is to remove the use of MIF in the top parent page. Now that MIF is only used at "one level" without any nesting, everything works like it should.

hendricd
16 Feb 2010, 1:41 PM
We've used MIF since Ext 2.2 and it's worked great. But since Ext 3.1.1 and MIF 2.1 (and later 2.1.1) we're no longer able to wrap MIF panels inside each other. In other words...

Top parent page - a viewport - uses MIF for the center region
Center region page - a viewport - uses MIF for a portal or tabpanels
Third level page - the one inside a portlet or tabpanel item - works fine

Once the center region page is loaded and then the page is changed (like you navigate to a different center region page, or a different third level page) multiple events fail to work. For instance, the top parent page's menu fails to be clickable. The center region page's tabpanels are no longer clickable. Etc.

This happens in both IE7 and FF3.6

Our workaround is to remove the use of MIF in the top parent page. Now that MIF is only used at "one level" without any nesting, everything works like it should.

Thanks for the report Michael. I'll give the eventManagement yet another look. :-?

mcouillard
17 Feb 2010, 5:07 AM
this finds it but it does not return the Extjs element
var element = document.getElementById('name');

this doesn't find it
var element =Ext.getCmp('name');

I would guess your element isn't an Ext component, so try this instead:
var element = Ext.get('name');

matmosis
17 Feb 2010, 5:53 AM
Hi,
i think my problem is similar to the one mcouillard (http://www.extjs.com/forum/member.php?u=38928) exposes!
i use MIF 2.1 with ExtJs 3.1.0 (from CDN)

in my case:


i use Ext.ux.ManagedIFrame.Window to open a modal window that point to a web page of another site (not under my control)
in this page user can click a button and go to another page (this one under my control) where i put a button with "parent.Ext.getCmp('mif_win').close();" to close the modal window
window close correctly, modal effect dissappear, but all ext element on the parent page (a form panel with some button and an edit box) still fails to be clickable

have an idea?

thx
Mat

matmosis
18 Feb 2010, 1:15 AM
i found that if i remove reference to extjs from my page with the close button (parent.Ext.getCmp('mif_win').close()) making it a simple html page, MIF window close correctly and the parent's elements are clickable
...

marcoas
18 Feb 2010, 5:30 AM
IE: javascript error: _elCache.$_doc is null, row 31 of miframe.js

var f=function(){};f.prototype=El.prototype;var docEl=new f();docEl.dom=el;docEl._isDoc=true;return cache._elCache['$_doc']=docEl;}


I have a similar error....can somebody say me a solution for this ?
My error is:


if(cache._elCache['$_doc']){return cache._elCache['$_doc'];} ... miframe.js (línea 30)



Thanks

jbones
18 Feb 2010, 9:48 AM
Hi,
i think my problem is similar to the one mcouillard (http://www.extjs.com/forum/member.php?u=38928) exposes!
i use MIF 2.1 with ExtJs 3.1.0 (from CDN)

in my case:


i use Ext.ux.ManagedIFrame.Window to open a modal window that point to a web page of another site (not under my control)
in this page user can click a button and go to another page (this one under my control) where i put a button with "parent.Ext.getCmp('mif_win').close();" to close the modal window
window close correctly, modal effect dissappear, but all ext element on the parent page (a form panel with some button and an edit box) still fails to be clickable

have an idea?

thx
Mat

I have also updated to Ext 3.1.1 and MIF 2.1.1 and am seeing the same issue. I have a Main viewport with a border layout using an accordion layout for simple navigation on the west. Any link I click on opens a page in the center region just fine, but then kills the events on the west panel. Even if the page loaded does not contain nested MIF panels, the links in my accordion panel are no longer responding to events.

mschwartz
19 Feb 2010, 10:52 AM
Doug,

Check this out:

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

If you use document.write() (in IE) content that includes <script src="..."> tags, those scripts are loaded asynchronously in the iframe!

What an abortion.

mschwartz
19 Feb 2010, 2:47 PM
Doug,

I load the iframe either with setSrc or update (it doesn't matter). The iframe has some jquery inside it.

At the top of the code in the iframe is a function like:


function highlightEl(elId) {
$(elId).css('border', 'red');
}


If I call the function like this, from a button handler in the ExtJS side of things:

iframe.getFrame().getWindow().highlightEl(elId);

Everything stops working in ExtJS. Click on the button, no handler called. Click on close box to close a tab, nada. Buttons with menus don't show the menus. The buttons do press, visually, just no events.

I have a tree with a node with a handler that calls the highlightEl() function as above. After stepping in and out of the highlightEl() function (it does get called!), I click on any other tree node and get an Ext.fly(...) not defined error.

In the iframe's JS code, there are jQuery hover handers. Just hovering and executing the highlightEl() function without clicking on any Ext elements produces the same error. Ext buttons stop responding, etc.

Only in IE8.

I suspect it's something to do with your event handling in the iframe code?

I'm using your SVN code, latest build from 4 days ago.

Please advise on how to make this work ;)

hendricd
20 Feb 2010, 9:34 AM
The latest SVN/Trunk (http://code.google.com/p/managediframe/source/browse/#svn/trunk/source/build)and zip (http://managediframe.googlecode.com/files/miframe2_1_1.zip)download availabe on google.code should (finally) address the elCache corruption issues you've encountered when the IFRAME's URL changes.

@mschwartz -- See if that addresses your previous JQuery issue as well.. :-?

matmosis
22 Feb 2010, 3:32 AM
Hi,
is possible to communicate between MIF frame and child page if they are on different domain? (cross-domain environment)

i need to close MIF frame (window) from the child page but "parent.Ext.getCmp('mif').close();" does not work on a cross-domain situation..

maybe with mifmsg?
can someone send me an example or a link to an example?

thx

mschwartz
22 Feb 2010, 6:16 AM
The latest SVN/Trunk (http://code.google.com/p/managediframe/source/browse/#svn/trunk/source/build)and zip (http://managediframe.googlecode.com/files/miframe2_1_1.zip)download availabe on google.code should (finally) address the elCache corruption issues you've encountered when the IFRAME's URL changes.

@mschwartz -- See if that addresses your previous JQuery issue as well.. :-?

If it doesn't, I'll build you an example to reproduce the problem.

yugho
22 Feb 2010, 8:47 PM
The latest SVN/Trunk (http://code.google.com/p/managediframe/source/browse/#svn/trunk/source/build)and zip (http://managediframe.googlecode.com/files/miframe2_1_1.zip)download availabe on google.code should (finally) address the elCache corruption issues you've encountered when the IFRAME's URL changes.

@mschwartz -- See if that addresses your previous JQuery issue as well.. :-?


Dear hendricd,

I've tried the latest version and elCache issues SOLVED,

BUT there's still another problem.... here is my test case:
I have a JSP that contains a PANEL that contains an IFRAME (below: iframe code)

var mif1 = new Ext.ux.ManagedIframe({
defaultSrc : 'abc.jsp',
loadMask : {
hideOnReady : false,
msg : 'Loading...'
},
height : 150
});

abc.jsp contains only very simple html code

Result:
page can't be loaded
IE 6.0: dom.style is null
FF 3.6: g.dom is undefined
ext-all.js (line 7)
Ext.DomHelper=function(){var s=null,j=/^...S.remoting=Ext.direct.RemotingProvider;\n

Please help. Thanks a lot.

mschwartz
23 Feb 2010, 11:05 AM
Doug,

I've tried everything I can think of for the past 3 or 4 days, working on nothing but this. It's the darnedest thing...

No matter how I load this certain HTML into the iframe, using setSrc() or update(), as soon as the HTML is loaded, every single button in my UI stops functioning. The iframe is in a tab in a tabpanel and the closebox for the tab works. Once the tab is removed, the buttons start working again.

The buttons highlight and push, but it seems like no event is being fired. The handlers aren't being called, that's for certain.

I completely rewrote the javascript I was running in the iframe so it uses Ext Core instead of jQuery, but that didn't change anything.

(And yes, I'm using the version from your svn repo from 3-4 days ago)


In the frame, I have javascript that calls a top.function() that opens a dialog window, and even the buttons on that dialog press but the handlers aren't called.

To the left of the tab panel I have a tree. When I click on one of those nodes, IE stops because multidom's listen function (actually the h() function) calls delegateClick (ext-all-debug.js) which calls beforeEvent() which calls TreeEventModel.getNode() which calls e.getTarget() and in there this.target = null so there's a JS error.

This is only an issue in IE8 (I haven't tried IE7 or IE6).

So I'm really getting the idea that there's a serious problem in multidom.js working with IE...

hendricd
23 Feb 2010, 4:35 PM
@mschwartz -- Zip up your 'certain' HTML PM it over, and I take a gander at it when I can.
I suspect it might be related to IE's current-document-in-focus foolery, but who knows?

hendricd
23 Feb 2010, 4:37 PM
Dear hendricd,

I've tried the latest version and elCache issues SOLVED,

BUT there's still another problem.... here is my test case:
I have a JSP that contains a PANEL that contains an IFRAME (below: iframe code)

var mif1 = new Ext.ux.ManagedIframe({
defaultSrc : 'abc.jsp',
loadMask : {
hideOnReady : false,
msg : 'Loading...'
},
height : 150
});abc.jsp contains only very simple html code

Result:
page can't be loaded
IE 6.0: dom.style is null
FF 3.6: g.dom is undefined
ext-all.js (line 7)
Ext.DomHelper=function(){var s=null,j=/^...S.remoting=Ext.direct.RemotingProvider;\n

Please help. Thanks a lot.

@yugho -- I'll need a bit more to go on than that. Can you POST your simple page?
Why not use ext-all-debug.js (to see observe the call stack to see what's going on)?

hendricd
23 Feb 2010, 4:41 PM
Hi,
is possible to communicate between MIF frame and child page if they are on different domain? (cross-domain environment)

i need to close MIF frame (window) from the child page but "parent.Ext.getCmp('mif').close();" does not work on a cross-domain situation..

maybe with mifmsg?
can someone send me an example or a link to an example?

thx

@matmosis -- Generally speaking, NO.
If you were to say that your requirement allowed a modern browser only (IE8+) and Firefox then, maybe.

yugho
23 Feb 2010, 6:25 PM
@yugho -- I'll need a bit more to go on than that. Can you POST your simple page?
Why not use ext-all-debug.js (to see observe the call stack to see what's going on)?

Hi,

Here's all my code :)
I've changed to ext-all-debug.js, and the error is..
me.dom is undefined
me.dom.style.width=me.addUnits(width);\r\n ext-all-debug.js (line 6253)
Thanks a lot for your help.

index.jsp

<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../lib/ext-3.1.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../css/basicStyle.css" />

<!-- LIBS -->
<script type="text/javascript" src="../lib/ext-3.1.1/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../lib/ext-3.1.1/ext-all-debug.js"> </script>
<script type="text/javascript" src="../lib/ext-3.1.1/examples/ux/miframe/miframe.js"></script>
<script type="text/javascript" src="test.js"></script>

</head>
<body>
</body>
</html>test.js

Ext.onReady(function() {

var mif1 = new Ext.ux.ManagedIframe({
defaultSrc : 'abc.jsp',
loadMask : {
hideOnReady : false,
msg : 'Loading...'
},
height : 150
});

var panl1 = new Ext.Panel({
height : 200,
items : [mif1]
});

var all = new Ext.Panel({
renderTo : document.body,
items : [panl1]
});

});abc.jsp

<%@ page language="java" contentType="text/html; charset=BIG5"
pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Title</title>
</head>
<body>
abc
</body>
</html>

hendricd
23 Feb 2010, 8:08 PM
@yugho-- Ext.ux.ManagedIframe is little more than a namespace. Simplify, and try this:

Ext.onReady(function() {

var mif1 = new Ext.ux.ManagedIframe.Panel({
defaultSrc : 'abc.jsp',
renderTo : Ext.getBody(),
loadMask : {
hideOnReady : false,
msg : 'Loading...'
},
height : 150
});

mschwartz
24 Feb 2010, 6:34 AM
@mschwartz -- Zip up your 'certain' HTML PM it over, and I take a gander at it when I can.
I suspect it might be related to IE's current-document-in-focus foolery, but who knows?

Doug,

I tried to create a minimal example program that demonstrates the problem, but haven't been able to do so. However, debugging through the code in my application, it is quite clear the problem lies somewhere in multidom.js.

I'd like to propose a change to mif in general. Please make multidom an optional plugin. I see in the code that you detect it and if not present show an error. Since I'm loading Ext Core into the frame, I don't have any use for the quite nifty features of multidom. At the same time, if I could disable it, it might show that the problem is related to it.

I actually tried creating my own panel with bodyCfg an iframe. I was surprised to see the same issues with that. Then I saw that multidom stuff was still being called even though my iframe has nothing to do with mif. :-?

This is a serious front burner problem for me right now.

mschwartz
24 Feb 2010, 7:07 AM
Doug,

More information.

The multidom code overrides some of the Ext base code, especially for event handling, and that is breaking things as well. I reported a bug in ExtJS in the bug forum, not realizing what I know now - that it's multidom code executing, not ExtJS core code.

Specifically, I have an HtmlEditor with vinylfox' editor plugins in a popup window. When the window is closed, the plugins' event handlers are not being removed. And sure enough, the bug shows up with a stack trace of h() in multidom.listen() function, firing an event for the plugin that's been destroyed.

It all seems to point to your element cache maintaining a reference to components that have been destroyed.

mschwartz
24 Feb 2010, 7:36 AM
Doug,

One more bit of news.

Until 3.1, I've been using a version of your mif 1.2 from 8/22/2008 that I've patched over time to keep it working.

I just plugged that in instead of multidom and the latest mif and it works!

;-)

I could zip up the miframe-src.js file I'm using and attach it, if you like.

edykstra
3 Mar 2010, 1:42 PM
Hello everyone,

Not sure I have the most appropriate thread to post this on ... I was searching on 'multidom' to narrow the results.

I have this code on a test page.



Ext.addBehaviors({
'div.editable@mouseover': function(e, target){
alert("mouseover");
}
});


It correctly triggers the alert when I mouse over a div with class="editable".

However, I also need it to do the same for a div on a page that is inside a ManagedIframe.

I understand that functionality requires the multidom.js code, which is 'bundled' in the miframe-debug.js source.

The question is, how do I then get the test 'alert' to trigger when I hover over div's with the editable class that are inside the MIF?

I think I've got a completely incorrect analogy in my head on how this should work - and it is sending me in the wrong directions. But, I'm not sure. Maybe I am making this way more complicated than it is? Can someone point me to an appropriate thread so I can figure it out myself?

Thanks,

Eric

yugho
3 Mar 2010, 10:28 PM
Thanks Doug, it works.. sorry for not being careful.


@yugho-- Ext.ux.ManagedIframe is little more than a namespace. Simplify, and try this:

Ext.onReady(function() {

var mif1 = new Ext.ux.ManagedIframe.Panel({
defaultSrc : 'abc.jsp',
renderTo : Ext.getBody(),
loadMask : {
hideOnReady : false,
msg : 'Loading...'
},
height : 150
});

gelleneu
4 Mar 2010, 1:55 AM
I've a question: Is there a roadmap for the further development and planned features of managediframepanel?

Especially I'm waiting for the Cross-browser DD Feature, and It's planned for Mif2.x or so, but I don't know if it's still "work in progress" or not.

What could be a useful workaround for such a feature? Generally it should work, I've seen it in the Demonstration of the day.com CQ5 WebCMS..

hendricd
5 Mar 2010, 4:57 AM
Doug,

One more bit of news.

Until 3.1, I've been using a version of your mif 1.2 from 8/22/2008 that I've patched over time to keep it working.

I just plugged that in instead of multidom and the latest mif and it works!

;-)

I could zip up the miframe-src.js file I'm using and attach it, if you like.
@mschwartz --

Sure, send it over. But, the real compatibility issues lie in multidom and is VERY Ext-release specific.

hendricd
5 Mar 2010, 5:08 AM
Hello everyone,

Not sure I have the most appropriate thread to post this on ... I was searching on 'multidom' to narrow the results.

I have this code on a test page.



Ext.addBehaviors({
'div.editable@mouseover': function(e, target){
alert("mouseover");
}
});
It correctly triggers the alert when I mouse over a div with class="editable".

However, I also need it to do the same for a div on a page that is inside a ManagedIframe.

I understand that functionality requires the multidom.js code, which is 'bundled' in the miframe-debug.js source.

The question is, how do I then get the test 'alert' to trigger when I hover over div's with the editable class that are inside the MIF?

I think I've got a completely incorrect analogy in my head on how this should work - and it is sending me in the wrong directions. But, I'm not sure. Maybe I am making this way more complicated than it is? Can someone point me to an appropriate thread so I can figure it out myself?

Thanks,

Eric

@Eric --

Using MIF, you would accomplish the same goal using Event Delegation:


var newFrame = yourTabPanel.add({
xtype : 'iframepanel',
id : 'mifp_1',
title : 'Loading...',
loadMask : true,
defaultSrc : 'assets/someURL.html',
listeners: {
domready : function(frame){ //only raised for "same-origin" documents

var container= frame.get('someContainer') || frame.getDoc();
if(container){
container.on('mouseover' , frame.ownerCt.onHover, frame.ownerCt, {delegate : 'div.editable'});
}

}
},
onHover : function(e, target){

}
});
if(yourTabPanel.rendered){ //if TabPanel is already rendered
yourTabPanel.doLayout();
yourTabPanel.setActiveTab(newFrame);
}

mschwartz
5 Mar 2010, 6:25 AM
@mschwartz --

Sure, send it over. But, the real compatibility issues lie in multidom and is VERY Ext-release specific.

multidom is a brilliant concept, it just needs to work ;-)

See attachment.

The thing is, I don't have a use for the multidom stuff at this point, so it'd be really nice to make it optional?

canxss
7 Mar 2010, 12:03 PM
Hi,

I'm struggling with the same problem as mschwartz did in this post (http://www.extjs.com/forum/showthread.php?p=440505#post440505). And I even don't use any plugins in my HtmlEditor. But still, after I open and close the form using an HtmlEditor I start to get errors inside UpdateToolbar function triggered by onEditorEvent handler.

Can you check out this problem?

And same as mschwartz, multidom scares me too :) I don't know what it does but I've seen that it overrides so many Ext JS functions.

Thanks in advance

benwg
9 Mar 2010, 8:24 PM
You need use frameConfig and set disableMessaging=false to send message from client frame,the document is not descript it,and i viewed the source to find this.pardon my poor english ,i'm chinese.

iframePanel = new Ext.ux.ManagedIFrame.Panel({
id : url,
title : title,
defaultSrc : url,
closable:true,
fitToParent:true,
frameConfig:{disableMessaging:false},
listeners:{
'message' : function(srcFrame, message){
if(message.data == "closeFrame")
centerPanel.remove(this);
}
}
});

Hi,

I'm trying to upgrade from Ext 2.3.0 to 3.1.0 and uses miFrame to send messages from open tabs back to the viewport.

But I'm stocked, because it dosn't work anymore and I have tried a lot but nothing seems to work :-(

Can anybody plase give me a hint, I think I don't get the iframe defined as an manageble Iframe

Tanks

My new versions are
EXT JS 3.1.0 rev 5770-119 dec 14,2009
miframe2_1




V 2.3.0 Code:

<script src="/ExtJs/ux/Ext.ux.miframe.js"></script>

VIEWPORT CENTER REGION
----------------------
,new Ext.TabPanel({
// Region Center
region:'center'
,id:'center-region'
,xType:'tabpanel'
,deferredRender:false
,activeTab:0
,margins:'0 5 5 0'
,autoScroll:true
,enableTabScroll:true
,animScroll:true
,defaultType:'iframepanel'
,items:[{
defaultSrc:'<% welcome %>'
,id:'welcome'
,title:i18n('Welcome')
,autoScroll:true
,closable:false
}]
})

OPEN NEW TAB IN VIEWPORT
------------------------
// Open Tab in an iFrame if not found
if(!tab) {
tabs.add({
title:title
,id:nodeId
,defaultSrc:src
,closable:true
,fitToParent:true
,disableMessaging:false
// Start listener for close action message from iFrame
,listeners: {
'message:close':function(srcFrame, message){
tabs.items.each(function(c){if (c.id != nodeId) {return};tabs.remove(c, true);});
}
}
}).show();
}
// Activate tab
tabs.doLayout();
tabs.setActiveTab(tab);
};

CODE IN TAB PANEL
-----------------
,cancel:function() {
// iFrame communication
window.sendMessage(
{message: 'Signals to parent viewport listener to close the current tab'
}
,'close');
}



V 3.1.0 code:

<script src="/ExtJs/ux/miframe.js"></script>
<script src="/ExtJs/ux/mifmsg.js"></script>

// Region Center
,new Ext.TabPanel({
region:'center'
,id:'center-region'
,xType:'tabpanel'
,deferredRender:false
,activeTab:0
,margins:'0 5 5 0'
,autoScroll:true
,enableTabScroll:true
,animScroll:true
,defaultType:'iframepanel'
,items:[{
defaultSrc:'<% welcome %>'
,id:"welcome"
,name:"welcome"
,xType:"iframepanel"
,title:i18n('Welcome')
,autoScroll:true
,closable:false
}]
})


// Open Tab in an iFrame if not found
if(!tab) {
tabs.add({
title:title
,name:nodeId
,id:nodeId
,xType:"iframepanel"
,frame:true
,frameConfig:{autoCreate:{id: 'frame-' + nodeId}}
,defaultSrc:src
,closable:true
,fitToParent:true
,disableMessaging:false
// Start listener for close action message from iFrame
,listeners: {
'message:close':function(srcFrame, message){
tabs.items.each(function(c){if (c.id != nodeId) return};tabs.remove(c, true);});
}
}
}).show();
}
// Activate tab
tabs.doLayout();
var tab = tabs.items.find(function(i){return i.id === nodeId;});
tabs.setActiveTab(tab);

CODE IN TAB PANEL
-----------------
,cancel:function() {
// iFrame communication
window.sendMessage( // gives is not a function
sendMessage( // gives is no defined
{message: 'Signals to parent viewport listener to close the current tab'
}
,'close');
}

Dumbledore
9 Mar 2010, 11:46 PM
Hi,

currently i try my application with the new beta of Ext 3.2 and it seems that the the mif source affected the accordion layout :-|

The problem is the setVisible method in multidom.js.

When i include the mif source the expanding and collapsing of each panel inside the accordion have an extra unwanted fadein and fadeout of the body.

For correct understanding: I only include the miframe-debug source and nothing more.

Steps to reproduce:

Start the accodion example: ext/examples/layout/accordion.html, include the miframe.js und there is the unwanted effect.

Any help?

mschwartz
10 Mar 2010, 6:44 AM
Try the mif in the attachment to this post:

http://www.extjs.com/forum/showthread.php?p=443799#post443799

dobberph
10 Mar 2010, 7:11 AM
Hello,

how can I "install" the ManagedIFrame-Plugin?
I find no guide anywhere.
I've downloaded the two files but where do I have to unzip them and is there a miniscript to test it?

Thanks a lot,
Tobias

Dumbledore
10 Mar 2010, 9:03 AM
@mschartz

thanks, i will try it...


@dobberph

read the first page, of this topice. There you find the documentation and a link to a sample page...

dobberph
10 Mar 2010, 12:32 PM
I'm sorry.
I read the page several times and I don't find a hint where I have to extract the files to be able to use the examples.

Can anyone help me please ;D?

nicki
11 Mar 2010, 1:32 PM
I'm a complete newbie at ExtJs, so please bear with me - especially if this has been asked before.

I've got to the point of creating a center panel as a card layout. I have defined a number of items and worked out how to change between them.
I want one of my items to be an iframe for which I'm using managediframe - but when it loads an external html page, I get a two-tone blue bar across the top. How do I remove that? I just want the html file displayed with autoscrolling (which is ok) but nothing else.

Thanks,
nicki.

gelleneu
15 Mar 2010, 1:17 AM
I have a problem with the drag drop extension:

I use Ext 3.1.1 and the MIF 2.1.1, and additionally the mifdd.js from the MIF2.0 SVN (mifdd release: October 2009)

My Javascript looks like this:




var iframe = new Ext.ux.ManagedIFrame.Panel({
renderTo: document.body,
defaultSrc: 'test.html',
width: 500,
height: 500,
listeners: {

'documentloaded':function(frame){

dd = new Ext.ux.ManagedIFrame.DD(frame, 'test', "group1");
dd2 = new Ext.ux.ManagedIFrame.DD(frame, 'test2', "group1");

dd2.onDragDrop = function(e, id) {
alert("dd was dropped on " + id);
}
}
}

});


My HTML looks like this:




<html>
<head>

<title>Test</title>
</head>
<body>
<div id="test">Test1</div>
<div id="test2">Test2</div>
</body>
</html>



The Divs are not draggable. If I try the same outside a MiF Panel with the normal "Ext.dd.DD" function, the code works correctly. But trying to do this inside a frame, it causes some errors like:

Ext is not defined
[Break on this error] e = Ext.EventObject.setEvent(e);\r\n

in multidom.js

jfa
15 Mar 2010, 2:38 AM
Try the mif in the attachment to this post:

http://www.extjs.com/forum/showthread.php?p=443799#post443799

Hi, i note the same problem as Dumbledore about MIF and accordion layout with Ext3.2b.
Sorry, but I do not understand what I should do with this file, which seems to be an older version of MIF ?

Eric24
15 Mar 2010, 8:08 AM
@Doug: When using MIF, uxMedia, and base-x together in the same app, is there a preferred include order (when not using JIT)? I noticed too in the later versions of MIF and uxMedia that both include a slightly different uxvismode.js--any preference?

PS - Great work on these components!

Eric24
15 Mar 2010, 4:35 PM
I'm sure this question has been asked before, but I can't find anything definitive (probably not searching right)...

Let's say I have two/multiple windows that contain MIF panels. By default, clicking on the MIF panel does not bring the parent window to the front. Does MIF support (or can it be made to support) this functionality?

Eric24
15 Mar 2010, 5:06 PM
@Doug, I'm having the same problem as mschwartz and canxss, where the htmleditor toolbar update fails, with doc is null in the following code:


if(this.enableFont && !Ext.isSafari2){ var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
if(name != this.fontSelect.dom.value){
this.fontSelect.dom.value = name;
}
}

It is clearly caused by something in multidom.js (just not sure what). I have created a sandbox site that can reproduce the error on-demand (always with multidom.js included, and never without). That's probably not telling you anything new, but if you'd like to access the sandbox, let me know and I'll send you the URL in a PM.

To echo a question from mschwartz, is it absolutely necessary to use multidom with MIF if I'm not doing any cross-domain stuff? Can it be optional? Or does it really do more than cross-domain, in spite of its name?

--Eric

gelleneu
16 Mar 2010, 5:14 AM
I think, I've found a solution.

I changed the following inside mifdd.js:


getEl: function() {
if (!this._domRef) {
this._domRef = this.frame.getDom(this.id); // <--- DELETE
this._domRef = this.frame.get(this.id).dom; // <--- REPLACE
}
return this._domRef;
},

/**
* Returns a reference to the actual element to drag. By default this is
* the same as the html element, but it can be assigned to another
* element. An example of this can be found in Ext.dd.DDProxy
* @method getDragEl
* @return {HTMLElement} the html element
*/
getDragEl: function() {
return this.frame.getDom(this.dragElId); <-- DELETE
return this.frame.get(this.dragElId).dom; <-- DELETE
},

Now it seems to work correctly. The source-error should be in the getDom method of
miframe.js

supercharge2
18 Mar 2010, 7:52 AM
I usually only work with IE but my application runs so fast in Firefox/Chrome that I am starting to work in that direction. I have a large application that uses tabbing. Most of these tabs are set to hide instead of close. In IE it works fine, I can hide tabs and reopen them with all of the contents ready to go. I also have a few panels using the ManagedIFrame to display a couple of websites and a web based email. In Firefox/Chrome, once I open any one of these ManagedIFrame tabs, any and all of the tabs that I hide are blank when I un-hide them. Has anyone run in to this and could you let me know what I could be doing wrong?

hendricd
18 Mar 2010, 3:43 PM
I usually only work with IE but my application runs so fast in Firefox/Chrome that I am starting to work in that direction. I have a large application that uses tabbing. Most of these tabs are set to hide instead of close. In IE it works fine, I can hide tabs and reopen them with all of the contents ready to go. I also have a few panels using the ManagedIFrame to display a couple of websites and a web based email. In Firefox/Chrome, once I open any one of these ManagedIFrame tabs, any and all of the tabs that I hide are blank when I un-hide them. Has anyone run in to this and could you let me know what I could be doing wrong?

@supercharge2 --
What you are encountering is what occurs to IFRAMES/Flash objects with most browsers except IE.

Start by setting:


hideMode : 'nosize'
on ALL tabs in your tabPanel. (MIF adds a new hideMode to Ext to support the fix).

supercharge2
18 Mar 2010, 3:57 PM
Works great, thank you so much!

SunWuKung
19 Mar 2010, 11:15 AM
Hi,
I have an application using miframe.
It used to work fine in https in all browsers using Ext 3.0. and the old version of miframe.
Now I switched to Ext 3.1.1 and the newer version of miframe (all other things remained the same).
It still works fine in FF and IE8 but it doesn't load its content in IE6 (no js error is thrown though).
It probably has to do with the https warning that IE6 throws - page contains both secure and nonsecure elements.

Is there any known issue with miframe in IE6 that maybe causing this?
Thanks for the help.

SWK

pkli
21 Mar 2010, 9:01 AM
Hello hendricd.

great work !

i'm using MIF in EXT3.1.1 and i'm just trying MIF with 3.1.2 beta.

i just want inform you that there is a little trouble when I use 3.1.2 / collapse region and uxvismode.js

i'm using a simple viewport (layout border) west,center,east.
mif is on east side with collapsible on.

on load : all fine...
collapse the region : all fine...

but when I trying to expand again : the split bar reduce to the right and the is no way to re-expand the region.



region : "east"
,id : "edit_vp"
,xtype : 'iframepanel'
,layout : 'fit'
,width : 530
,title : "editor"
,loadMask : true
,frame : false
,frameConfig : {autoCreate:{id:"edit_mif"}}
,defaultSrc : "edit.php"
,split : true
,collapsible : true
,stateful : false

Regards
Phil

zombeerose
22 Mar 2010, 8:38 AM
@hendricd
I noticed that you have modified some of the code in the reset function (line 602) when testing the window.location. However, it still causes a "permission denied" error in IE8 when running on an HTTPS site.

BTW, this is a reiteration of the problem that started here (http://www.extjs.com/forum/showthread.php?p=415031#post415031).

Do you have any other suggestions or do I need to continue to trap the exception? Thanks!

MIF version 2.11
Ext version 3.1.1

Eric24
26 Mar 2010, 12:05 PM
@Doug--Any insight on the multidom question (from 3/15)? A fix for the htmleditor bug and/or some clarification on whether it's possible to run without multidom?

ccherrett
26 Mar 2010, 6:54 PM
I am upgrading Managed Iframe to work with EXT 3.1.1. So I installed the latest version of miframe.

I am getting errors that I am having trouble solving:

window.sendMessage is not a function

I am calling it like this:


window.sendMessage('Open WOSearch', 'schedule-search');

This all worked in 2.2.1. Any ideas on what is going wrong?

Thanks!

nick.shrayer
29 Mar 2010, 10:55 AM
Dear hendricd,
I'm new to both extjs and ManagedIframe but have an extensive experience with JS/HTML/DHTML/DOM/XML. I need to fulfil following requirements. We're building RIA with the UI requirements similar to those demonstrated at "WEB Desktop" sample @ extjs site (http://www.extjs.com/deploy/dev/examples/desktop/desktop.html). I mean we need MDI (multidocument interface) where each window could represent separate application module (screen) totally independent from other windows and desktop itself. What I want is any new window to be opened as extjs Window with IFrame that represents it's content. That IFrame should navigate to application URL and bring module-specific UI which is also extjs driven. And here follow my questions:
1. I want desktop to host extjs library (with MIF) and supply rendering services to any hosted window. That hosted window would load some very small JS that is responsible for finding desktop-hosted library (window.parent) and instantiating required extjs objects in scope of new window. Is it possible to do with help of MIF?
2. That hosted window (represented by it's IFRAME) will be able to have any extjs controls inside it. This includes for instance toolbars and dropdowns. The issue here is that unlike toolbar itself that is rendered inside hosted IFRAME and should always be in boundaries of window, toolbar's pull-down menus could visually get out of window boundaries (think of right-most toolbar item with pull-down menu - there is good chance it's pull-down menu will need to be partially displayed outside of window frame). This is even more relevant for drop-downs, calendars, tooltips and other popping elements. They all should be rendered in context of desktop rather than in context of window in order to be able to make use of the space outside of window. At the same time they should be able to visually position themself so to look like they belong to window (toolbar's pull-down menu should pop just below appropriate toolbar item although toolbar is rendered in context of IFRAME's window and pull-down menu in context of desktop window)...
Do you think it will be possible to do with current MIF implementation (or do you have anything to simplify such thing in your plans)?

Eric24
31 Mar 2010, 6:46 AM
Can anyone give me some feedback on the multidom question (http://www.extjs.com/forum/showthread.php?p=447080#post447080)? It seemed like this was affecting others besides me, but there have been no additional posts on the topic.

dtex-lab
1 Apr 2010, 12:40 AM
I believe there is at least 1 incompatiblity with ExtJS 3.2.0 (final release)

It create an incompatiblity with animCollapse = false

This is a simple test case:



<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ux/miframe-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
width: 200,
collapsible: true,
animCollapse: false,
items: [{
xtype: 'textfield',
value: 'west'
}]
},
{
xtype: 'panel',
region: 'center',
items: [{
xtype: 'textfield',
value: 'center'
}]
}]
});
})
</script>
</head>
</body>
</body>
</html>


You can see that when you collapse the west panel the animate collapse occurs also If i force it to false.
If you remove the import of the managedIframe js.. it is working.
It happends only with extjs 3.2

Ty

completej
1 Apr 2010, 7:11 AM
I'm having difficulties searching for this, possibly due to the length of "MHT" and most forum search restrictions.

This plugin currently works to load a .MHT / .MHTML file in Firefox 3.6.2 with the following extension:

https://addons.mozilla.org/en-US/firefox/addons/policy/0/8051/77195?src=addondetail

What do I need to do for the MIF plugin to correctly display .MHT files inside IE7?

Code below, and it works with PDFs and regular URLs



function load_framed(url){
//
Ext.getCmp('mif-browser-shortcut').fireEvent('click');
var MIF = Ext.getCmp('mif-browser-frame');
MIF.enable();
MIF.rendered ? MIF.setSrc(url) : (MIF.defaultSrc = 'http://www.google.com');
}


var mif_browser_frame = {
xtype: 'iframepanel'
, id: 'mif-browser-frame'
, defaultSrc: 'http://www.google.com'
, title: test_field
, loadMask: false
, autoScroll:true
, closable:false
, frameConfig: {
autoCreate:{
id:'google-framed-inner'
}
}
};


var mif_browser_window = {
xtype: 'window'
, id: 'mif-browser-window'
, title: 'Web Browser'
, layout: 'fit'
, iconCls: 'bogus'
//
, frame: true
, border: false
, plain: true
, maximizable: true
, resizable: true
, shim: true
, animCollapse: false
, constrainHeader: true
, stateful: false
, autoDestroy: false
, autoHeight: false // odd
, autoScroll: true
, height: 800
, width: 900
, items: mif_browser_frame
};


and this is a Desktop App snippet from a "Weblinks" folder for other favorited items in my application



{
text: 'AAD Usage'
, iconCls: 'html'
, handler : function(){
load_framed('http://webserver_address_omitted/YesterdayUsage.mht');


}
}

hendricd
1 Apr 2010, 1:46 PM
I believe there is at least 1 incompatiblity with ExtJS 3.2.0 (final release)

It create an incompatiblity with animCollapse = false

This is a simple test case:



<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ux/miframe-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
width: 200,
collapsible: true,
animCollapse: false,
items: [{
xtype: 'textfield',
value: 'west'
}]
},
{
xtype: 'panel',
region: 'center',
items: [{
xtype: 'textfield',
value: 'center'
}]
}]
});
})
</script>
</head>
</body>
</body>
</html>
You can see that when you collapse the west panel the animate collapse occurs also If i force it to false.
If you remove the import of the managedIframe js.. it is working.
It happends only with extjs 3.2

Ty

@dtex--

Try adding animFloat : false to that config

hendricd
1 Apr 2010, 1:51 PM
@eric --

Sure I'll take a look at any working sample of the problem.

Regarding multidom; it is (and likely will-be) to corner-stone of MIF future support of x-frame drag-drop, HTML5 plans, and other features. Removing it now (or making it optional), would be catastrophic on many fronts and would require an entirely different approach.

If you don't need all the things MIF has/will offer, consider some of the lighter-weight BoxComponent derivatives available here on the forums.




@Doug, I'm having the same problem as mschwartz and canxss, where the htmleditor toolbar update fails, with doc is null in the following code:


if(this.enableFont && !Ext.isSafari2){ var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
if(name != this.fontSelect.dom.value){
this.fontSelect.dom.value = name;
}
}It is clearly caused by something in multidom.js (just not sure what). I have created a sandbox site that can reproduce the error on-demand (always with multidom.js included, and never without). That's probably not telling you anything new, but if you'd like to access the sandbox, let me know and I'll send you the URL in a PM.

To echo a question from mschwartz, is it absolutely necessary to use multidom with MIF if I'm not doing any cross-domain stuff? Can it be optional? Or does it really do more than cross-domain, in spite of its name?

--Eric

dtex-lab
1 Apr 2010, 10:18 PM
@dtex--

Try adding animFloat : false to that config

I try it, but nothing change. It doesn't works.


...
region: 'west',
width: 200,
collapsible: true,
animCollapse: false,
animFloat: false,
...


I tested it under Chrome, FF and IE (latest stable releases)

Any idea?
ty

dtex-lab
3 Apr 2010, 3:41 AM
@hendricd

I debug a little bit and maybe I found the reason of the incompatibility.

mifram-debug.js overrides the function "setVisible : function(visible, animate)"
using 3.2.0 "animante" argument can be also a "string" so it create the problem.

The function setVisible should be fixed.. get a look to the original setVisible at Ext.Element.

I don't know why this function was overridden by the miframe component...

I hope this information can be useful in order to make niframe compatible with 3.2

Thanks

hendricd
3 Apr 2010, 6:50 AM
@dtex --

Thanks for the report. I'll take a look at it.


@hendricd

I debug a little bit and maybe I found the reason of the incompatibility.

mifram-debug.js overrides the function "setVisible : function(visible, animate)"
using 3.2.0 "animante" argument can be also a "string" so it create the problem.

The function setVisible should be fixed.. get a look to the original setVisible at Ext.Element.

I don't know why this function was overridden by the miframe component...

I hope this information can be useful in order to make niframe compatible with 3.2

Thanks

nick.shrayer
3 Apr 2010, 8:51 AM
Hendricks,
anything to say regarding my question (second post on this page) ???

hendricd
3 Apr 2010, 9:39 AM
Hendricks,
anything to say regarding my question (second post on this page) ???

@nick--
Sure,

First, learn to be patient. (Multiple private messages concerning your dream won't elicit a faster response and might even get you banned).

That said, what you are proposing would be non-trivial at best. Competing document event models will be your major stumbling block. Some of what you seek is possible but not all.

Why try to bite off such a complex architecture?

nick.shrayer
3 Apr 2010, 10:12 AM
Hendricks,
thanks for the answer.
What do you mean by complexity in that architecture? Is this the fact I want every (or almost every) window to be separate IFRAME? If so, I want each and every page to be as independent as possible and (specifically) not to depend on windows around. Say I want some module to have it's own linked stylesheets (separate CSS files) and separate JS files. When you load such things into existing window DOM it would most probably affect other windows (even by mistake). More than that, IFRAME would serve as an unit of error-affecting. Say you have some erroneous JS that causes misbehaviour. Just purging IFRAME will release all associated resources/fix the situation without affecting anything around.
For me the architecture where each independent unit (ASPX, JSP, PHP whatever) is loaded into it's separate "sandbox" (IFRAME) is the most obvious one. Don't you agree?
You meantioned your multidom to target rendering controls into IFRAME. Don't you mean the situation I describe?

P.S. Sorry to be inpatient. I'm really interested to know your opinion

hendricd
3 Apr 2010, 11:11 AM
Hendricks,
thanks for the answer.
What do you mean by complexity in that architecture? Is this the fact I want every (or almost every) window to be separate IFRAME? If so, I want each and every page to be as independent as possible and (specifically) not to depend on windows around. Say I want some module to have it's own linked stylesheets (separate CSS files) and separate JS files. When you load such things into existing window DOM it would most probably affect other windows (even by mistake). More than that, IFRAME would serve as an unit of error-affecting. Say you have some erroneous JS that causes misbehaviour. Just purging IFRAME will release all associated resources/fix the situation without affecting anything around.
For me the architecture where each independent unit (ASPX, JSP, PHP whatever) is loaded into it's separate "sandbox" (IFRAME) is the most obvious one. Don't you agree?
You meantioned your multidom to target rendering controls into IFRAME. Don't you mean the situation I describe?

P.S. Sorry to be inpatient. I'm really interested to know your opinion

@nick--
Yes, I would agree that IFRAMEs do provide a high degree of isolation.

But, the complexity I was referring to was targeted at your desire to render menus, Tooltips, etc activated by frame-nested components into the parent document context (likely to avoid the undesirable clipping behavior).

Ext, out-of-the-box, is tightly bound to the document context into which it was loaded. You would need to override several classes to get them to interact with the 'true owner document context' of the related (nested) Component that created them (tooltips, menus, etc).

multidom.js is a step in that direction, but you would need much more to pull it off for full cross-browser support.

nick.shrayer
3 Apr 2010, 12:59 PM
@Hendricks,

I understand what you mean. Any way, does multidom.js currently solve that task of rendering controls into external frame? Or, in other words, if I would give up that desire regarding rendering popup elements into topmost document, how realistic the architecture would be than?

hendricd
3 Apr 2010, 1:41 PM
@Hendricks,

I understand what you mean. Any way, does multidom.js currently solve that task of rendering controls into external frame? Or, in other words, if I would give up that desire regarding rendering popup elements into topmost document, how realistic the architecture would be than?

@nick --
multidom provides the necessary document methods to target any context for creating/managing DOM elements/events from other document contexts.

But currently, all Ext UI classes are bound to 'document' for creating other elements (like Panel.header, footer etc).

With multidom in place, the following override (for Ext.Panel) would represent just the start of what would be required:


Ext.Panel.override({
// private
createElement : function(name, pnode){
if(this[name]){
pnode.appendChild(this[name].dom);
return;
}

if(name === 'bwrap' || this.elements.indexOf(name) != -1){
if(this[name+'Cfg']){
this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']);
}else{
var el = pnode.getDocument()document.createElement('div');
el.className = this[name+'Cls'];
this[name] = Ext.get(pnode.appendChild(el));
}
if(this[name+'CssClass']){
this[name].addClass(this[name+'CssClass']);
}
if(this[name+'Style']){
this[name].applyStyles(this[name+'Style']);
}
}
}

});

As you can hopefully see, it requires a totally different way of thinking about "where you are rendering things to" across the entire UI framework. :-?

nick.shrayer
3 Apr 2010, 9:52 PM
@Hendericks,

Thanks a lot for your clartificatuons. I do understandad the complexity of the task. Unfortunately I'm new to Ext. It will most probably take me some time to get in, understand things and than try to implement what I want. Interesting thing (for me) is that others do not try to implement such things. IFRAME is such a good mechanism to provide robust base for a large-scale browser-based application!

fff398
6 Apr 2010, 6:47 AM
Is it possible to close a mif window from the aspx page I load? Like if I open a window with a mifPanel, can I close it with a button on the aspx page? Right now I get a reference error that I cannot find the window.

here is some code for more understanding



var mifPanel = new Ext.ux.ManagedIFrame.Panel({
rendorTo: Ext.getBody(),
title: 'Test',
height: 800,
defaultSrc: 'test.aspx'
});

//some other code here

handler: function() {
var mifWin = new Ext.Window({
title: 'Target Information',
plain: true,
border: true,
resizable: true,
width: 1200,
height: 900,
modal: true,
items: [mifPanel],
y: 0

});
mifWin.show();
}
then i have this on my aspx page



<script type="text/javascript">
function closeWindow() {
var windowToClose = document.getElementById("mifWin");
mifWin.close();
}
</script>

<input id="Button3" type="button" value="button" onclick="closeWindow()" />

hendricd
6 Apr 2010, 2:50 PM
@fff398--

MIF Components inject a reference (to itself) into the nested window object. Access the MIF instance from the embedded page this way:



<script type="text/javascript">
function closeWindow() {
window.hostMIF.ownerCt.close();
}
</script>

<input id="Button3" type="button" value="button" onclick="closeWindow()" />

alien3d
7 Apr 2010, 7:30 PM
Extjs version 3.2
MIF Version : 2_1_2 version (latest patch from code.google.com)
Testing Browser : Ie8 version 8.0.7600.16385( Windows 2008 and Windows 7 64 bit ),
: Firefox : 3.6.3(Windows 2008)
: Firefox : 3.5.9(Fedora 11)
: Chrome : 4.249.1045



Testing method added to iframe page.


<body onload="function testing()">
<script language="javascript">
function testing() {
alert("loading page");
}
</script>
</body>


Seems the Internet explorer 8 load the page after the 2 tab not the first tab.

http://img26.imageshack.us/img26/7289/iframec.th.png (http://img26.imageshack.us/i/iframec.png/)

My Code



function AddCenterTabIF(tabTitle,tabUrl) {
tabUrl='http://www.yahoo.com';
var tab = tabPanel.add({
xtype : 'iframepanel',
title : tabTitle,
defaultSrc : tabUrl,
loadMask : false,
closable : true,
autoScroll : true
});
tabPanel.rendered && tabPanel.doLayout();
tabPanel.setActiveTab(tab);
return tab;
}

Solve by removing deferredRender : false,

malstroem
8 Apr 2010, 3:03 AM
Hi there,

Is there already a recommended workaround or solution for the MIF / Fileupload interfearance that keeps crashing IE8? I´ve been browsing this thread but did not quite find an answer to that.

Kind regards
Thomas

P.S. I use Ext 3.1 with ux.ManagedIFrame for ExtJS Library 3.1+

hendricd
8 Apr 2010, 4:32 AM
Hi there,

Is there already a recommended workaround or solution for the MIF / Fileupload interfearance that keeps crashing IE8? I´ve been browsing this thread but did not quite find an answer to that.

Kind regards
Thomas

P.S. I use Ext 3.1 with ux.ManagedIFrame for ExtJS Library 3.1+

@Thomas --
Give the latest build MIF 2.1.2 from SVN (http://code.google.com/p/managediframe/source/browse/#svn/tags/mif2.1/build%3Fstate%3Dclosed)/trunk (or tags) a try.

fff398
8 Apr 2010, 6:02 AM
im getting

window.hostMIF.ownerCt.close is not a function in firebug


@fff398--

MIF Components inject a reference (to itself) into the nested window object. Access the MIF instance from the embedded page this way:



<script type="text/javascript">
function closeWindow() {
window.hostMIF.ownerCt.close();
}
</script>

<input id="Button3" type="button" value="button" onclick="closeWindow()" />

hendricd
8 Apr 2010, 6:31 AM
im getting

window.hostMIF.ownerCt.close is not a function in firebug

@fff398 --
As you are nesting an MIFPanel inside an Ext.Window, walk up a bit further:



<script type="text/javascript">
function closeWindow() {
window.hostMIF.ownerCt.ownerCt.close();
}
</script>

<input id="Button3" type="button" value="button" onclick="closeWindow()" />

or just use a ux.ManagedIFrame.Window instead and use:



function closeWindow() {
window.hostMIF.ownerCt.close();
}

swarm
8 Apr 2010, 7:59 AM
@fff398 --
As you are nesting an MIFPanel inside an Ext.Window, walk up a bit further:



<script type="text/javascript">
function closeWindow() {
window.hostMIF.ownerCt.ownerCt.close();
}
</script>

<input id="Button3" type="button" value="button" onclick="closeWindow()" />

or just use a ux.ManagedIFrame.Window instead and use:



function closeWindow() {
window.hostMIF.ownerCt.close();
}



I am trying to do exactly the same thing here...

Sadly firebug throws window.winMIF is undefined. I've set the id of the MIF.window to "winMIF" am I doing something wrong?

I've tried it with:

function closeWindow() {
window.hostMIF.ownerCt.close();
}

and get the same error "window.hostMIF is undefined"

hendricd
8 Apr 2010, 8:05 AM
I am trying to do exactly the same thing here...

Sadly firebug throws window.winMIF is undefined. I've set the id of the MIF.window to "winMIF" am I doing something wrong?

@swarm--

Where is this winMIF coming from? Post your MIF config.

Understand too, that an IFRAME is a separate document context.

swarm
8 Apr 2010, 8:06 AM
var winMIF = new Ext.ux.ManagedIFrame.Window({

title: 'iBooklet Payment',
width: 845,
height: 469,
maximizable: true,
collapsible: true,
id: 'winMIF',
constrain: true,
closeAction: 'hide',
loadMask: {
msg: 'Loading...'
},
autoScroll: true,
defaultSrc: response.NextURL
}).show();

hendricd
8 Apr 2010, 8:14 AM
var winMIF = new Ext.ux.ManagedIFrame.Window({

title: 'iBooklet Payment',
width: 845,
height: 469,
maximizable: true,
collapsible: true,
id: 'winMIF',
constrain: true,
closeAction: 'hide',
loadMask: {
msg: 'Loading...'
},
autoScroll: true,
defaultSrc: response.NextURL
}).show();



@swarm--

You have two choices:

Reference the MIFComponent directly from the nested page context:



//in parent page ensure MIF instance is globally visible to other frames:
window.winMIF = new Ext.ux.ManagedIFrame.Window({.....});

//in nested page
parent.winMIF.close();or (don't worry about parent references) use the one MIF provides for you within the window context of the nested page:

window.hostMIF.ownerCt.close();Of course either of these will only work with same-origin frames.

swarm
8 Apr 2010, 11:55 AM
@Doug

Wow! How embarrassing - I was blind to that - clearing been at a computer for too long today.

Thanks for your help - it's a great extension! You were right - extremely easy to implement.

hendricd
8 Apr 2010, 1:08 PM
This update finalizes support for the optional mifmsg.js package. It also adds postMessage support for browsers that support it. sendMessage still works for all browsers.

Subtle API changes for messaging.
It is no longer required to passed disableMessaging:false cfg option in the components' frameConfig options. Instead, specify that and other options directly on the Component level (applies to MIF.Component/Panel/Portal/Window):


tabs.add({
xtype : 'iframepanel',
disableMessaging : false,
focusOnLoad : Ext.isIE,
listeners : {
domready : function(frame){
frame.postMessage('Are you awake?');
},
message : function(frame, e){
console.log(e.data);
}
}
});For a demo of MIF messaging features, see the heartbeat (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=heartbeat) example.

multidom.js -- Core changes relax Element conversion for IFRAMEs just a bit, Ext 3.2 compatible (should resolved issues with HTMLEditor and Ext.History Object).

andynuss
14 Apr 2010, 5:56 PM
Hi Doug,

I have a grid from an array store in my 'south' border and a mif with complex xhtml doc in 'center'. When loading a book in the mif whose associated grid has 214 rows (or thereabouts), the grid takes 1 sec to load, but more than 13 seconds to resize when the browser window resizes. That's an issue with ext-3.2.0. However, I noticed that when this happens, there is an interaction with the mif code (2.1.1) that brings up a firefox alert indicating that it things the program is no responding and should the script be stopped. It complains about line 1089 and 1593 in miframe-debug.js and lines 6224 and 6089 in ext-all-debug.js.

I have a simple test case with the same grid and an mif that loads hello.html and the javascript alert does not come up, though the resize of the frames still takes 13 secs because of grid scalability. So I think its something about the xhtml that is being loaded in the mif in conjunction with the 214 row grid and the resize.

Is this a problem I should worry about?

Andy

lwarring
15 Apr 2010, 8:27 AM
Hi, I am configuring a ManagedIframePanel, which is in a border layout, to initally be 'collapsed'. When the panel first renders, I see the collapsed panel header, but when I click on it to expand the panel, it disappears. There aren't any javascript errors. I've tried setting defaultSrc and also tried not loading the panel until it is expanded, but I get the same behavior either way. If I change the config to 'collapsed: false', then the panel loads correctly and I am able to expand and collapse the panel without any issues. Any idea what I am doing wrong? Thanks!


var MyPanel = Ext.extend(Ext.ux.ManagedIFramePanel, {

constructor: function(config) {
config = Ext.apply(config, {
id: 'sb-scratch-pad-panel',
title: 'Scratch Pad Editor',
region: 'south',
collapsible: true,
collapsed: true,
cmargins: '5 5 5 5',
height: 200,
minSize: 200,
maxSize: 200,
split: true,
animFloat: false,
autoHide: false,
useSplitTips: true,
floatable: false,
titleCollapse: false,
autoScroll: true,
bodyStyle: 'border-left: none; border-right: none; border-bottom: none;',
frameConfig: {
autoCreate: {
id: 'my-iframe',
height:200,
width: 400
}
},
listeners: {
expand: function(panel) {
panel.updateIframe();
}
}
});

Ext.ABC.EventBus.subscribe('other.panel.loaded', this.updateIframe, this);

MyPanel.superclass.constructor.call(this, config);
},

updateIframe: function() {
if (!this.collapsed) {
this.setSrc("http://myurl");
}
}

});

theCodingChimp
18 Apr 2010, 10:36 AM
I am in the process of upgrading my application from ExtJs 2.1 to 3.2.

Current setup/versions:
ext-all (2.1)
miframe.js (1.2)
ext-basex.js (sorry, looks old, not sure which version. pre version 3)

New target setup/versions:
ext-all (3.2)
miframe.js (ux.ManagedIFrame for ExtJS Library 3.1+)
ext-basex 4.0 (with $JIT)

Currently, I have an iframepanel contained within a Viewport along with some cached scripts using Ext.ux.ModuleManager. The page is based around the adviframe.js example from the demoPack. I exec all of my scripts and then exec a "postLoad" function, which is contained within my own pages. This replaces Ext.onReady and since I cache all of the Ext related scripts I don't need to import my scripts for every page I create.

The problem I am having is. The "ExtFixes" at the top of my page (same as adviframe.js) seem to break ExtJs 3.2. I get an "Ext is not defined" message in FireBug. Would these ExtFixes be expected to live in harmony with Ext 3.2? I am wondering if these fixes are now a part of the Ext Core library.

If I remove the ExtFixes, then my page loads up. But, then I have an issue with my scripts not being cached in the ModuleManager. My "postLoad" function is called but it doesn't have access to the other cached scripts (e.g. Ext scripts).

I have attached some code in case anyone needs to see.

Any help/guidance would be much appreciated. Thanks in advance.

hendricd
25 Apr 2010, 7:44 AM
Hi, I am configuring a ManagedIframePanel, which is in a border layout, to initally be 'collapsed'. When the panel first renders, I see the collapsed panel header, but when I click on it to expand the panel, it disappears. There aren't any javascript errors. I've tried setting defaultSrc and also tried not loading the panel until it is expanded, but I get the same behavior either way. If I change the config to 'collapsed: false', then the panel loads correctly and I am able to expand and collapse the panel without any issues. Any idea what I am doing wrong? Thanks!


var MyPanel = Ext.extend(Ext.ux.ManagedIFramePanel, {

constructor: function(config) {
config = Ext.apply(config, {
id: 'sb-scratch-pad-panel',
title: 'Scratch Pad Editor',
region: 'south',
collapsible: true,
collapsed: true,
cmargins: '5 5 5 5',
height: 200,
minSize: 200,
maxSize: 200,
split: true,
animFloat: false,
autoHide: false,
useSplitTips: true,
floatable: false,
titleCollapse: false,
autoScroll: true,
bodyStyle: 'border-left: none; border-right: none; border-bottom: none;',
frameConfig: {
autoCreate: {
id: 'my-iframe',
height:200,
width: 400
}
},
listeners: {
expand: function(panel) {
panel.updateIframe();
}
}
});

Ext.ABC.EventBus.subscribe('other.panel.loaded', this.updateIframe, this);

MyPanel.superclass.constructor.call(this, config);
},

updateIframe: function() {
if (!this.collapsed) {
this.setSrc("http://myurl");
}
}

});

@lwarring -- MIF has specific visibilityMode enhancements to prevent your frame from 'going to sleep' when collapsed. Try adding:


hideMode : 'nosize'

to your configuration.

hendricd
25 Apr 2010, 7:56 AM
I am in the process of upgrading my application from ExtJs 2.1 to 3.2.

Current setup/versions:
ext-all (2.1)
miframe.js (1.2)
ext-basex.js (sorry, looks old, not sure which version. pre version 3)

New target setup/versions:
ext-all (3.2)
miframe.js (ux.ManagedIFrame for ExtJS Library 3.1+)
ext-basex 4.0 (with $JIT)

Currently, I have an iframepanel contained within a Viewport along with some cached scripts using Ext.ux.ModuleManager. The page is based around the adviframe.js example from the demoPack. I exec all of my scripts and then exec a "postLoad" function, which is contained within my own pages. This replaces Ext.onReady and since I cache all of the Ext related scripts I don't need to import my scripts for every page I create.

The problem I am having is. The "ExtFixes" at the top of my page (same as adviframe.js) seem to break ExtJs 3.2. I get an "Ext is not defined" message in FireBug. Would these ExtFixes be expected to live in harmony with Ext 3.2? I am wondering if these fixes are now a part of the Ext Core library.

If I remove the ExtFixes, then my page loads up. But, then I have an issue with my scripts not being cached in the ModuleManager. My "postLoad" function is called but it doesn't have access to the other cached scripts (e.g. Ext scripts).

I have attached some code in case anyone needs to see.

Any help/guidance would be much appreciated. Thanks in advance.

@theCodingChimp -- MUCH has changed since Ext 2.1!

Start by removing all the overrides that were specific to Ext 2.

Regarding your layout, things are unnecessarily overnested a bit (center region without a fit layout). Simplify, and let MIF do it's job (AS the center region):


Ext.onReady(function()
{
if (direct != "" && direct != 'null')
defaultSource = direct;

var tb = new Ext.Toolbar();
var vp = new Ext.Viewport({
layout:'border',
hideBorders:true,
listeners:{ render: Demo.init,
scope : Demo,
single : true},
items:[
{
region:'north',
autoHeight: true,
html: '<div style="text-align:center"><div style="float: right;color:gray;font-size:50%">' + username + ' on ' + servername + '</div><div>BCS MX&trade;</div></div>',
bbar: tb,
border: false
},
{
region:'center',
border: false,
xtype :'iframepanel',
id :'mainFramePanel',
loadMask:{msg:'Loading...'},
autoScroll : true,
defaultSrc: defaultSource,
listeners:{
scope : Demo
,domready : Demo.transform
},
frameConfig:{ id: 'mainFrame'}
}
]
});

buildMenu(tb);
vp.doLayout();
});

function printFrame()
{
try{
Ext.getCmp('mainFramePanel').getFrame().print();
}catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);}
};


Although there has been some enhancements in Ext 3.2's EventManager to assist in loading Ext after a document has been rendered, I'm not quite sure it's handling the required onREady state properly to support what was possible with the EventManager overrides I provided for Ext 2.x.

I'll examine that feature a bit more and get back to you....

hendricd
25 Apr 2010, 8:05 AM
Hi Doug,

I have a grid from an array store in my 'south' border and a mif with complex xhtml doc in 'center'. When loading a book in the mif whose associated grid has 214 rows (or thereabouts), the grid takes 1 sec to load, but more than 13 seconds to resize when the browser window resizes. That's an issue with ext-3.2.0. However, I noticed that when this happens, there is an interaction with the mif code (2.1.1) that brings up a firefox alert indicating that it things the program is no responding and should the script be stopped. It complains about line 1089 and 1593 in miframe-debug.js and lines 6224 and 6089 in ext-all-debug.js.

I have a simple test case with the same grid and an mif that loads hello.html and the javascript alert does not come up, though the resize of the frames still takes 13 secs because of grid scalability. So I think its something about the xhtml that is being loaded in the mif in conjunction with the 214 row grid and the resize.

Is this a problem I should worry about?

Andy

@Andy -- Tough to say without seeing a working example.

What Ext release does this apply to?
Using the latest MIF build from SVN?

theCodingChimp
26 Apr 2010, 7:22 AM
I'll examine that feature a bit more and get back to you....

Thank you :)...

lwarring
27 Apr 2010, 5:40 AM
Hi Doug, I tried adding the hideMode: 'nosize' to the managedIframePanel config, but I am still seeing the same issue - if I initialize the mip to the 'collapsed: true' state, it seems to disappear, but if I initialize it to 'collapsed: false' it works fine. Thanks!

andynuss
30 Apr 2010, 10:40 AM
Hi Doug,

When I do an mif.getFrame().get('some_page_elem_id'), does this element get automatically destroyed when I source another mif document? Also, lets say I attach a ToolTip to the Ext.Element for 'some_page_elem_id', do I have to track this tooltip instance, and then manually destroy it when I source another document to the mif?

Andy

hendricd
2 May 2010, 11:53 AM
Hi Doug,

When I do an mif.getFrame().get('some_page_elem_id'), does this element get automatically destroyed when I source another mif document? Also, lets say I attach a ToolTip to the Ext.Element for 'some_page_elem_id', do I have to track this tooltip instance, and then manually destroy it when I source another document to the mif?

Andy

@Andy --
MIF maintains listener and Element caches for the document context currently loaded in the frame (clearing such caches between page loads).

However, it will be up to you to safely clear any references to those elements before the frame is reloaded with another document.

canxss
3 May 2010, 9:08 AM
Hi,

Previously I've posted the same problem in this post (http://www.extjs.com/forum/showthread.php?71961-3.0.x-3.1.1-ux.ManagedIFrame-2.x&p=444210#post444210). Now I'm trying to upgrade to Ext 3.2.1 with the latest ManagedIFrame code from svn but the same problem still exists. I prepared a simple example with a Window using an HtmlEditor. Create the window by clicking the button and then close it. After first (and sometimes second) close I start to get following errors in the Firebug console. And also try to move the window after first close and reopen, you will also get "doc is null" errors:

1. this.fontSelect.dom is undefined
this.fontSelect.dom.disabled = disabled; ext-all-debug.js (line 41656)

2. doc is null
var name = (doc.queryComma...e')||this.defaultFont).toLowerCase(); ext-all-debug.js (line 41985)

The sample code is here:



<head runat="server">
<title id="title">HtmlEditor</title>
<link rel="stylesheet" type="text/css" href="../../ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="multidom.js"></script>
<script type="text/javascript" src="mif.js"></script>

<script type="text/javascript">

Ext.onReady(function() {

Ext.QuickTips.init();

var win;
var button = Ext.get('show-btn');

button.on('click', function(){
win = new Ext.Window({
width: 450,
height: 300,
layout: 'fit',
items: [{
xtype: 'form',
layout: 'border',
items: [{
region: 'north',
autoHeight: true,
layout: 'form',
bodyStyle: 'padding:5px 3px 5px 3px',
border: false,
items:[{
xtype: 'textfield',
fieldLabel: 'Code',
name: 'Code',
width: 200
},{
xtype: 'textfield',
fieldLabel: 'Description',
name: 'Description',
width: 300
}]
},{
region: 'center',
layout: 'fit',
title: 'Notes',
//border: false,
items:[{
xtype: 'htmleditor',
fieldLabel: 'Notes',
name: 'Note'
}]
}]
}]
});

win.show(this);
});

});

</script>
</head>
<body>
<input type="button" id="show-btn" value="Show Window" /><br /><br />
</body>


I hope this sample code helps to detect and fix the problem.

Thanks in advance

andynuss
4 May 2010, 12:58 PM
Doug,

I have a request to implement detection of a scroll event when the scroll icon in the iframe is depressed and the iframe document window is already at the bottom of the html. I realize that there is no way to do this when using autoScroll, and using the native browser scrollable iframe. So what I was wondering, is whether there is a way to go about turning off autoScroll in the mif, and putting in my own scroll bar, and take over scrolling myself? If so, how would one go about doing that within mif?

Andy

hallikpapa
4 May 2010, 7:23 PM
<edit> I am going to try cURL on the server, and see if I can return everything I need to the ManagedIFrame that way, together.

This is a great plugin. I create a heatmap for my website, and the way it works is it first loads the page I want (or I can make the call to create the images first; doesn't matter), then it queries the DB, and creates images that overlay the webpage, and I use a slider to adjust the transparency if I need to show/hide more of the website behind the click map.

Is it possible, and if so, what methods could I use to overlay my images after the webpage is finished loading? I see it as:
1) load page in Iframe window
2) after loading, make request to build images
3) receive images
4) overlay them in same iframe window

Is that possible?

This is what I have so far, and trhe function in my documentloaded is never called. Thought I would start there to query the DB. Just not sure how to call it, then render it on top of this iframe...



function loadedDoc(e) {
console.log(e);
}

var desktop = this.app.getDesktop();
var win = desktop.getWindow('tab-win');
if(!win){
win = desktop.createWindow({
id: 'tab-win',
title:'TabPanel\/Iframe Window',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,

layout: 'fit',
items: {
title: 'Google',
id:'igoogle',
xtype:'iframepanel',
defaultSrc:'http://www.domain.com'
},
listeners : {
documentloaded : loadedDoc
}
}
});

s2xi
9 May 2010, 6:40 AM
Hi, is there a way to set a transparency or opacity to the iframe panel?

asp3ctus
17 May 2010, 8:35 PM
Hi,
the link for demos http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit
doesn't seem to work ....
Any other demos??? I needed the file upload sample

UPDATE:

I have managed to get to demo file .... but i can't figure out , how to upload a file crossdomain... anyone can please provide a sample

hoggy
17 May 2010, 11:22 PM
Hi Doug,

Any news on DragDrop?
...I see it in the docs but not in the code yet....

hendricd
18 May 2010, 2:13 PM
Hi, is there a way to set a transparency or opacity to the iframe panel?

@s2xi --
Give this config a try to start:

(transparentMIF = new Ext.ux.ManagedIFrame.Panel({

title : 'Transparent Frame Sample',
width : 745,
height : 369,
renderTo : Ext.getBody(),
collapsible : true,
autoScroll : true,
animCollapse : false,
html : 'transparent.js',
frameConfig : {
allowtransparency : 'true',
style : {"background-color" :"lightgreen"}
}
})).show();

hendricd
18 May 2010, 2:14 PM
Hi Doug,

Any news on DragDrop?
...I see it in the docs but not in the code yet....

@hoggy--

As soon as as I get MIF settled down for Ext 3.3, I'll resume work on that...

hendricd
18 May 2010, 2:36 PM
Hi,
the link for demos http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit
doesn't seem to work ....
Any other demos??? I needed the file upload sample

UPDATE:

I have managed to get to demo file .... but i can't figure out , how to upload a file crossdomain... anyone can please provide a sample

@asp3ctus--

MIF's submitAsTarget method will post cross-domain, but the ability to read the response is solely up to the server that responds. It must set the document.domain of the IFRAME document response to a mutually agreed upon value. If you don't own the server you're posting to, that likely won't happen.

The demo site issue has been resolved.

canxss
20 May 2010, 7:18 AM
Hi Doug,

Did you find time to check the sample code that I've sent about HtmlEditor problem (http://www.extjs.com/forum/showthread.php?71961-3.0.x-3.1.1-ux.ManagedIFrame-2.x&p=463842#post463842). This is the major problem that I have in order to upgrade to Ext 3.2.1.

Thanks in advance

hendricd
20 May 2010, 2:00 PM
@canxss--
If it's your intent to re-use the Window, then set it up for that. (See Window:closeAction for more details):

By default the window is being destroyed when closed, so your 'win' var holds a worthless reference to several destroyed DOM elements.

(Not MIF related at all).





Ext.onReady(function() {

Ext.QuickTips.init();

var win;
var button = Ext.get('show-btn');

button.on('click', function(){
win = win || new Ext.Window({
width: 450,
height: 300,
layout: 'fit',
closeAction : 'hide',
items: [{
xtype: 'form',
layout: 'border',
items: [{
region: 'north',
autoHeight: true,
layout: 'form',
bodyStyle: 'padding:5px 3px 5px 3px',
border: false,
items:[{
xtype: 'textfield',
fieldLabel: 'Code',
name: 'Code',
width: 200
},{
xtype: 'textfield',
fieldLabel: 'Description',
name: 'Description',
width: 300
}]
},{
region: 'center',
layout: 'fit',
title: 'Notes',
//border: false,
items:[{
xtype: 'htmleditor',
fieldLabel: 'Notes',
name: 'Note'
}]
}]
}]
});

win.show(this);
});

});

mark.lozano
20 May 2010, 2:18 PM
I seem to be having issues upgrading to the new MIF from the old one. Seems as though simply including the miframe.js worked for version 1.x, but it doesn't seem to be working for the new one.

I've even included the multidom and mif scripts to no avail.

I keep getting the following errors:

From IE: "Object doesn't support this action".
From Firefox (in Firebug): "Ext.ux.ManagedIFrame is not a constructor"


Here is my page:



<html>

<head>
<title>Test Page</title>
<link rel="stylesheet" title="Default Style" type="text/css" href="<%=request.getContextPath()%>/js/ext-3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" title="Default Style" type="text/css" href="<%=request.getContextPath()%>/js/ext-3.2.1/resources/xtheme-gray.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ux/mif/multidom.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ux/mif/mif.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ux/mif/miframe-debug.js"></script>
<%--<script type="text/javascript" src="<%=request.getContextPath()%>/js/ext/miframe.js"></script>--%>
<script type="text/javascript">

Ext.onReady(function()
{
// The action
var action = new Ext.Action(
{
text: 'Create Managed Iframe',
handler: function()
{
var contextName = "/" + location.pathname.split("/")[1];
var win = new Ext.Window({
title : 'Managed Frame'
,closable : true
,width : 875
,height : 500
,border : false
,layout : 'border'
,items :
[
{
region:'center',
contentEl: new Ext.ux.ManagedIFrame(
{
autoCreate:
{
id:'dynamicIframe'
,src:contextName + '/index.jsf'
}
})
}
]
});

win.show(Ext.get('header'));
}
});

var panel = new Ext.Panel(
{
bodyStyle: 'padding:3px;',
items:
[
new Ext.Button(action)
],
renderTo: Ext.get('header')
});

});
</script>
</head>

<body>
<div id="header">

</div>

<div id="content">

</div>
</body>

</html>


Please note that if I remove the three "/js/ux/mif/*" lines, and replace them with the currently commented script line (which is the 1.x miframe script), then this page works as-is.

Thoughts?

hendricd
20 May 2010, 2:39 PM
@mark.lozano -- All things evolve, and hopefully get simpler as we age ;)


<html>

<head>
<title>Test Page</title>
<link rel="stylesheet" title="Default Style" type="text/css" href="<%=request.getContextPath()%>/js/ext-3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" title="Default Style" type="text/css" href="<%=request.getContextPath()%>/js/ext-3.2.1/resources/xtheme-gray.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ux/mif/miframe-debug.js"></script>
<%--<script type="text/javascript" src="<%=request.getContextPath()%>/js/ext/miframe.js"></script>--%>
<script type="text/javascript">

Ext.onReady(function()
{
// The action
var action = new Ext.Action(
{
text: 'Create Managed Iframe',
handler: function()
{
var contextName = "/" + location.pathname.split("/")[1];
var win = new Ext.ux.ManagedIFrame.Window({
title : 'Managed Frame'
,closable : true
,width : 875
,height : 500
,border : false

, defaultSrc: contextName + '/index.jsf'

});

win.show(Ext.get('header'));
}
});

....
</script>
</head>

canxss
22 May 2010, 12:44 AM
Thanks for the reply Doug!

I've understood the changes you've made in order to reuse the window. But in my case I don't want to reuse the window! I want to create a new window and assign it to the same variable everytime the user clicks the button. But I can't do it without getting errors. The default closeAction for window, which is "close", should destroy the window and its all descendant components.

How can I do that while not reusing and without getting errors?

Thanks in advance

squ3lch
28 May 2010, 12:13 PM
In IE7, the following simple implementation throws an error "nodeType is null or not an object." Firefox works correctly.

[EDIT] The problem appears to occur when the iframe gains or loses focus. The error thrown is in the prototype.js library (version 1.6.1), line 4349.

Your help is appreciated; thanks for a great extension!

Ext 3.2.1, IE7, WinXP


Ext.onReady(function(){

Ext.QuickTips.init();

var mainTopWindow = new Ext.Viewport({
layout:'border',
items:[
{
region:'north',
html:'<img src="common_images/mail_logo.gif">',
bodyStyle:'padding:5px;',
bbar:[
{
text:'Home',
handler:function(){
mainIFrame.setLocation('welcome.html');
}
}
,'-'
,{
text:'Log Out',
handler:function(){
window.location.href='index.php?action=logout';
}
}
]
},
mainIFrame = new Ext.ux.ManagedIFrame.Panel({
region:'center',
autoload:true,
border:false,
defaultSrc:'welcome.html',
focusOnLoad:true,
frameConfig:{
name: 'main_frame',
frameborder: 0,
id: 'mainframe'
}
}),
{
region:'south',
height:20,
html:'Footer'
}
]
});

mainTopWindow.doLayout();

});

bigice
2 Jun 2010, 11:38 AM
How can i access DOM elements that are inside iframe?
is this possible? im talking about other Domains not mine.

hendricd
2 Jun 2010, 1:40 PM
How can i access DOM elements that are inside iframe?
is this possible? im talking about other Domains not mine.

@bigice --

Sorry, document access from 'foreign-domains' are off-limits. Today's browsers forbid it. ;)

mihaip007
8 Jun 2010, 12:12 AM
Hi there...!

I am using mif for my application layout. The idea is to have a tree on the left hand side and a tab content on the righ hand side. It works like a charm. I even managed to send a js variable through to a page loaded in the content. Which is brilliant.

However just one thing I need help with, because I cannot find anywhere anything about it (or maybe I missed it)...!

I have a menu toolbar on top with sub-menus. They render perfectly, The go OVER the mif frame which is great. But when i click anywhere in the mif frame itself, the menu does not dissapear.

Is there an onclick event which I can fire to force the menu to dissapear.

Thanks in advance...
Mihai

mihaip007
8 Jun 2010, 12:22 AM
Hi there...!

I am using mif for my application layout. The idea is to have a tree on the left hand side and a tab content on the righ hand side. It works like a charm. I even managed to send a js variable through to a page loaded in the content. Which is brilliant.

However just one thing I need help with, because I cannot find anywhere anything about it (or maybe I missed it)...!

I have a menu toolbar on top with sub-menus. They render perfectly, The go OVER the mif frame which is great. But when i click anywhere in the mif frame itself, the menu does not dissapear.

Is there an onclick event which I can fire to force the menu to dissapear.

Thanks in advance...
Mihai

OHHHHH - okay : got it hehehehe! I overlooked it! The answer is at : http://www.extjs.com/learn/w/index.php?title=ManageIframe:Manual:Frame_FAQ#My_Ext.Menu_does_not_disappear_when_it_overlays_an_Iframe_and_I_click_on_the_document_contained_in_the_Iframe.


Thanks you guys! :)

mihaip007
8 Jun 2010, 12:30 AM
Help what is happening now?
Nothing is clickable inside the frame anymore if I use the faq9 example...

squ3lch
9 Jun 2010, 3:15 AM
In IE7, the following simple implementation throws an error "nodeType is null or not an object." Firefox works correctly.

[EDIT] The problem appears to occur when the iframe gains or loses focus. The error thrown is in the prototype.js library (version 1.6.1), line 4349.

Your help is appreciated; thanks for a great extension!

Ext 3.2.1, IE7, WinXP


Ext.onReady(function(){

Ext.QuickTips.init();

var mainTopWindow = new Ext.Viewport({
layout:'border',
items:[
{
region:'north',
html:'<img src="common_images/mail_logo.gif">',
bodyStyle:'padding:5px;',
bbar:[
{
text:'Home',
handler:function(){
mainIFrame.setLocation('welcome.html');
}
}
,'-'
,{
text:'Log Out',
handler:function(){
window.location.href='index.php?action=logout';
}
}
]
},
mainIFrame = new Ext.ux.ManagedIFrame.Panel({
region:'center',
autoload:true,
border:false,
defaultSrc:'welcome.html',
focusOnLoad:true,
frameConfig:{
name: 'main_frame',
frameborder: 0,
id: 'mainframe'
}
}),
{
region:'south',
height:20,
html:'Footer'
}
]
});

mainTopWindow.doLayout();

});

Nothing?

andynuss
9 Jun 2010, 4:15 AM
Hi Doug,

I sometimes (for user annotations) get the DOM html span element directly from the mif window. Then add/modify .onclick, or .onmouseover or .onmouseout of that element with a function that has closure. Can I be sure that when I load a diffferent frame page (with setLocation) that browsers will will GC that closure function reference?

Andy

hendricd
9 Jun 2010, 2:26 PM
@andy --

MIF takes great pains in removing any listeners you set (using Ext methods) from the internal caches when the page changes. It cannot catch poor closure use, tho. ;)

hendricd
9 Jun 2010, 2:28 PM
@squ3lch--

FRAME event management is not supported with ANY adapter except ext-base..

rule3
13 Jun 2010, 5:45 AM
Is this project still active?
I do not find licensing information about commercial usage?
I need this for my commercial project? Do I need to donate money to get rights to use this on commercial closed source project?

wvx10
15 Jun 2010, 1:04 AM
please help

i'm trying to overwrite CSS theme
i'm using mif 2.1.2 and extjs 3.2.0

i try to get ext component in iframe


var iframeExt = iframe.getFrameWindow().Ext;
iframeExt.util.CSS.swapStyleSheet('theme','new-theme.css');

but no working
thanks in advance

hendricd
15 Jun 2010, 2:46 PM
please help

i'm trying to overwrite CSS theme
i'm using mif 2.1.2 and extjs 3.2.0

i try to get ext component in iframe


var iframeExt = iframe.getFrameWindow().Ext;
iframeExt.util.CSS.swapStyleSheet('theme','new-theme.css');but no working
thanks in advance

@wvx10 --

Swapping the sheet that way will require a css url relative to the nested page's URL, or use the the MIF.CSS object to do the same thing:


iframe.CSS.swapStyleSheet('theme', 'themes/new-theme.css');

hendricd
15 Jun 2010, 2:52 PM
Is this project still active?
I do not find licensing information about commercial usage?
I need this for my commercial project? Do I need to donate money to get rights to use this on commercial closed source project?
Indeed it is. My head-end servers went down on the way to a client. All better now.

Visit http://licensing.theactivegroup.com for further information.

wvx10
16 Jun 2010, 7:04 PM
@wvx10 --

Swapping the sheet that way will require a css url relative to the nested page's URL, or use the the MIF.CSS object to do the same thing:


iframe.CSS.swapStyleSheet('theme', 'themes/new-theme.css');

hi hendricd

i tried your code but got error:

iframe.CSS is undefined

to be specific, here my content panel set as iframe


var contentPanel = {
id: 'iframe',
region: 'center',
xtype: 'iframepanel',
defaultSrc: 'home.html'
}

after that i call my iframe component as 'iframe'


var iframe = Ext.getCmp('iframe');

then i try to swap iframe CSS using your code


function setIframeTheme(t) {
iframe.CSS.swapStyleSheet('theme',t);
}

please help
thanks

andynuss
24 Jun 2010, 7:48 AM
Hi Doug,

I have a bug in executing:



tree.selectPath(node.getPath(), null, function(success, node) {
if (success)
node.ensureVisible();
});


where the tree is in a subpanel of an accordion in the west region, and an mif is in the center region. The accordion can get very corrupted due to this snippet, when on expanding the tree, this snippet is executed, and then the accordion gets messed up. The problem does not happen when there is no mif code.

Support has indicated that the mif code makes changes to core extjs classes. I have a reproducible test case in a zip file. It appears that the bug depends on how big the tree is in the accordion subpanel. The bigger the tree, the worse the problem, and happens more often when the node being selected in the tree is far down the tree.

NOTE: the test code sources a page in the mif on load, and then does nothing else with the mif. The problem also does not appear if ensureVisible code is not called to autoselect a node in the tree, nor does it appear if there is a huge delay enforced between expand event for the tree subpanel, and the call of ensureVisible.

Andy

mailme_gx
29 Jun 2010, 4:27 AM
Hi Im using a ManagedIFrame and its causing gridpanel to scroll to top when I change tabs, both the gridpanel and the iframe are children of the same tabpanel. Is this normal? what should I look out for to prevent this behavior? Regards GX

hendricd
1 Jul 2010, 7:11 AM
@Andy -- Send over a zip, and I'll take a look at it.

hendricd
1 Jul 2010, 7:12 AM
Hi Im using a ManagedIFrame and its causing gridpanel to scroll to top when I change tabs, both the gridpanel and the iframe are children of the same tabpanel. Is this normal? what should I look out for to prevent this behavior? Regards GX

A sample of tabPanel layout might shed some more light on that...

Antjac
1 Jul 2010, 11:47 PM
Hi,

Is there a way to integer a Word/Excel file in an ManagedIFrame ?

Thx,

Jangla
5 Jul 2010, 2:27 AM
Apologies is this has already been answered in this thread but I couldn't find anything with a search, but how can I close the iframe window with a button that's on a form in the content of the iframe. So I have a url that loads a bunch of ext controls with a close button as a footer bar and want that button to be able to close the parent iframe window.

karthik085
8 Jul 2010, 7:54 AM
Hi,

Scenario:
· Search results of foreign domain, say Google is getting loaded into an iframe
· New query is issued and want new search results from Google loaded into the same iframe, i.e. new URL is sent to the iframe

Problem: Once the page of Google gets loaded into iframe, access to the frame is not possible as the access action violates the browsers “same-origin” policy.

http://www.sencha.com/learn/ManageIframe:Manual:Frame_Security
http://www.sencha.com/forum/showthread.php?71961-3.0.x-3.1.1-ux.ManagedIFrame-2.x&p=384867&highlight=access+denied#post384867 (http://www.sencha.com/forum/showthread.php?71961-3.0.x-3.1.1-ux.ManagedIFrame-2.x&p=384867&highlight=access+denied#post384867)

One possible solution is to remove the old iframe & add new iframe.

Any better solutions or workarounds?

Thanks,
K

hendricd
8 Jul 2010, 8:17 AM
@karthik --

Have you looked at the Google search API products? That would be the best way to iterate the search results directly.

hendricd
8 Jul 2010, 8:20 AM
Apologies is this has already been answered in this thread but I couldn't find anything with a search, but how can I close the iframe window with a button that's on a form in the content of the iframe. So I have a url that loads a bunch of ext controls with a close button as a footer bar and want that button to be able to close the parent iframe window.

Have a look at this: http://www.sencha.com/forum/showthread.php?77579-Ext.ux.ManagedIFrame.Window&highlight=hostmif

karthik085
8 Jul 2010, 9:20 AM
Yes, that's a good solution. But, urls from hidden web (i.e., not visible to search engines) might be used. Also, some of the urls are queries to organization's internal search engines which are more focused & specialized towards a certain area.


@karthik --

Have you looked at the Google search API products? That would be the best way to iterate the search results directly.

wensa
10 Jul 2010, 4:58 PM
Hallo,

i have a Problem with accessing / reloading a Store in an miframe in a TabPanel from the main Page. I know, there is still the solution for my Problem here in the Forum, but i couldn't find it. I searched the whole day.

parent.nameofmyiframe.Ext.getCmp('myGrid').getStore().reload() won't work.

The main Page and the Page in the miframe are from the same Domain.

Best regards

Sascha

SOLVED: Sorry, im stupid. I write it here and didn't figure it out exactly.

parent.nameofmyiframe.Ext.getCmp('myGrid').getStore().reload() works!

PS: Sorry for my bad english

ironandsteel
13 Jul 2010, 5:47 PM
I used this wonderful extension about 2 years ago with Extjs 2, and it worked well.

Now, I have a project using Extjs 3.2.1 in which I need to pop up a window with a web page in it. Here is where I include MIF:


...
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></scr
<script type="text/javascript" src="./ext/ext-all-debug.js"></script>
<script type="text/javascript" src="./ext/miframe2_1_3/multidom.js"></sc
<script type="text/javascript" src="./ext/miframe2_1_3/mif.js"></script>
...
Here is the js where I am attempting to open the MIF (came from mif wiki):


var MIF = new Ext.ux.ManagedIFrame(
{ autoCreate: {src:'http://www.extjs.com',height:350,width:'100%'},loadMask :false });
The problem is, when that code is executed, I get "Ext.ux.ManagedIFrame is not a constructor" in firebug.

I have tried MIF 2.0.1, 2.1.2, and 2.1.3.

One problem is that I've yet to see a working example that I can look it- the examples in the first post (Doug's demo desk) do not open for me- they just show a white page.

I can look in the DOM tab of firebug and navigate the tree, and I see Ext->ux-ManagedIFrame. So- it seems to be there.

So- I'm kinda getting nowhere on this...any ideas?
Thanks!

hendricd
14 Jul 2010, 5:19 AM
@ironandsteel --

Clearly, the Wiki needs some updating. :(

You are copying the low-level Iframe Element class rather than using one of the high-level components available. (Ext.ux.ManagedIframe.Window would be your likely target)

See this post: http://www.sencha.com/forum/showthread.php?71961-3.0.x-3.1.1-ux.ManagedIFrame-2.x&p=440231#post440231

Also, you should use miframe-[debug].js instead of the individual files. The latest zip can be found here:
http://code.google.com/p/managediframe/downloads/list

ironandsteel
14 Jul 2010, 7:46 AM
@ironandsteel --

Clearly, the Wiki needs some updating. :(

You are copying the low-level Iframe Element class rather than using one of the high-level components available. (Ext.ux.ManagedIframe.Window would be your likely target)

See this post: http://www.sencha.com/forum/showthread.php?71961-3.0.x-3.1.1-ux.ManagedIFrame-2.x&p=440231#post440231

Also, you should use miframe-[debug].js instead of the individual files. The latest zip can be found here:
http://code.google.com/p/managediframe/downloads/list

Doug- thanks SO MUCH for responding. However, still no joy in mudville...
I made a simple test program based on your correction to the above referenced post. I still get "Ext.ux.ManagedIframe.Panel is not a constructor".


Here is all the code:
miftest.html


<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"> </script>
<script type="text/javascript" src="ext/ux/miframe/miframe-debug.js"></script>
<script>
Ext.onReady(function() {

var mif1 = new Ext.ux.ManagedIFrame.Panel({
defaultSrc : 'mifcontent.html',
renderTo : Ext.getBody(),
loadMask : {
hideOnReady : false,
msg : 'Loading...'
},
height : 150
});

});
</script>
</head>
<body>
MIF Test
</body>
</html>
and mifcontent.html is the simplest possible html page- but it never gets that far.

I have verified that miframe-debug.js is getting loaded by placing a debugger statement in it (which has been removed). What the heck am I missing here?

Thanks!
ironandsteel

hendricd
14 Jul 2010, 9:52 AM
Ext.ux.ManagedIFrame.Panel

ironandsteel
14 Jul 2010, 10:19 AM
THANK YOU! Its all better now...

You may want to edit your post which has the lower case "f"- I had just snagged that code (which you had copied from the previous post and modified- thus the error got propagated).

http://www.sencha.com/forum/showthread.php?71961-3.0.x-3.1.1-ux.ManagedIFrame-2.x&p=440231#post440231

Anyway, I really appreciate this great extension, AND your quick responses!
Cheers
ironandsteel

ironandsteel
14 Jul 2010, 10:34 AM
Doug-
Thanks for the quick replies!

I got the above referenced code to work, which creates Ext.ux.ManagedIFrame.Panel.

However, the following yields the "Ext.ux.ManagedIFrame is not a constructor" error.


var MIF = new Ext.ux.ManagedIFrame('frame1',{src:'http://www.extjs.com', loadMask:true });
So, from your comment that the wiki needs updating, I guess you cannot do this anymore?

I simply want to pop up a modal widow which contains an html page. The window needs to be draggable, resizeable, and closable. What is the right way to accomplish this?

Thanks!
ironandsteel

hendricd
14 Jul 2010, 10:48 AM
Then, that would be:


var mif1 = new Ext.ux.ManagedIFrame.Window({
defaultSrc : 'mifcontent.html',
loadMask : {
hideOnReady : false,
msg : 'Loading...'
},
height : 350,
width : 500
});
mif1.show();

MIF comes in many component flavors: http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.ManagedIFrame.Window

jbird526
16 Jul 2010, 9:10 AM
I have an issue that I hope someone has has figured out before. I am using Ext3.2.1 and MIF 2.1.2. I have an iframepanel embedded in a south panel of a layout. In the center panel is a grid which the user can select a row and display the full note contents in the iframe. Most of the content is simple data posted from a text editor. I am allowing users to enter scripts in their posts. Currently I am using this to catch any instances of links to make sure they open in a new browser window.


this.on('domready', function(frame){
frame.select('a').set({target: '_blank'});
});

Sometimes users are entering scripts that call for a page to be loaded. Because of this the anchor target is not getting set and the page is being opened in the iframe. This can cause issues for me because when I select a note to display the content of the iframe is not updated. Any ideas would be extremely helpful. I have tried eventsFollowFrameLinks:true but that does not work.

hendricd
16 Jul 2010, 11:07 AM
@jbird --
Event delegation would work equally well:



this.on('domready', function(frame){ //same-origin only !
frame.getDoc().on('click', function(e, target){
Ext.fly(target).set({target: '_blank'});
}, this, {delegate:'a'});
}


but, neither will work if the frame doc is not same-origin. :-?

jbird526
16 Jul 2010, 12:24 PM
Ah thats what I was looking for. Thank you for writing the event correctly for me, I couldnt get it correct when I tried to write it last time.

jbird526
16 Jul 2010, 12:45 PM
@jbird --
Event delegation would work equally well:



this.on('domready', function(frame){ //same-origin only !
frame.getDoc().on('click', function(e, target){
Ext.fly(target).set({target: '_blank'});
}, this, {delegate:'a'});
}


but, neither will work if the frame doc is not same-origin. :-?

Actually i have found that using event delegation works much better and fixes alot of quirks with anchor tags that I have seen.

Michael A.
19 Jul 2010, 11:59 PM
Dear Doug and all other forum members, maybe you could help me: I'm using a collapsible Panel (collapsible:true, titleCollapse:true) within a Viewport with border layout. This Panel ("details-panel") contains a TabPanel ("details-tabpanel"). Each tab gets a ManagedIFrame assigned with
tab = new Ext.ux.ManagedIFrame.Panel({ ... });
In case the "details-panel" is collapsed and I click on the title bar to expand the panel again, it issues a HTTP request for each source URL of the ManagedIFrames. This behaviour occours in Firefox, Chrome, Safari but not in Internet Explorer. It also doesn't occur if I press the collapse / expand button on the "details-panel".

I couldn't figure out why it is reloading the content instead of just expanding it in this situations. I don't know either if it is related with the ManagedIFrame or Ext JS. I'm using Ext JS 3.0.0 and MIF 2.0.1.

Thanks in advance for your help,
Michael

hendricd
20 Jul 2010, 7:30 AM
Dear Doug and all other forum members, maybe you could help me: I'm using a collapsible Panel (collapsible:true, titleCollapse:true) within a Viewport with border layout. This Panel ("details-panel") contains a TabPanel ("details-tabpanel"). Each tab gets a ManagedIFrame assigned with
tab = new Ext.ux.ManagedIFrame.Panel({ ... });
In case the "details-panel" is collapsed and I click on the title bar to expand the panel again, it issues a HTTP request for each source URL of the ManagedIFrames. This behaviour occours in Firefox, Chrome, Safari but not in Internet Explorer. It also doesn't occur if I press the collapse / expand button on the "details-panel".

I couldn't figure out why it is reloading the content instead of just expanding it in this situations. I don't know either if it is related with the ManagedIFrame or Ext JS. I'm using Ext JS 3.0.0 and MIF 2.0.1.

Thanks in advance for your help,
Michael

@Michael --

You are encountering DOM reflow that occurs during animated collapse/expand.

Add


animCollapse : Ext.isIE

to your outer collapsible Panel, and:


defaults : {
hideMode : 'nosize'
}

to your tabPanel config.

MIF adds a new hideMode to prevent IFRAMEs from resetting during visibility changes.

Michael A.
22 Jul 2010, 5:44 AM
@Michael --
You are encountering DOM reflow that occurs during animated collapse/expand.


Thanks a lot for your answer Doug! But the problem seems to be different and not the animation. In fact there is no collapse or expand event triggered when I click at the collapsed panel beside the expand button (see attached image). On click the state remains collapsed and the windows slides out with animation. At this point each ManagedIFrame in the TabPanel sends again a HTTP request and reloads its content. Any ideas?

sosy
24 Jul 2010, 9:26 PM
I would like to see the demos, but first the site is loading and loading (slow) and after the extjs loading symbol the site stays white.

I am using FF 3.6.8, is that the problem?

Regards
Sosy

hendricd
26 Jul 2010, 6:09 AM
Thanks a lot for your answer Doug! But the problem seems to be different and not the animation. In fact there is no collapse or expand event triggered when I click at the collapsed panel beside the expand button (see attached image). On click the state remains collapsed and the windows slides out with animation. At this point each ManagedIFrame in the TabPanel sends again a HTTP request and reloads its content. Any ideas?
@Michael --
The title-collapse behavior of border regions still uses animation effects in that scenario. The effects will cause DOM reflow (and the IFRAME to re-initialize).

Add:


animFloat : Ext.isIE,
animCollapse : Ext.isIE

to your surrounding problematic regions (and all items within a tabPanel).


I would like to see the demos, but first the site is loading and loading (slow) and after the extjs loading symbol the site stays white.

I am using FF 3.6.8, is that the problem?

Regards
Sosy
@Sosy --
Give the site another try. I was adding some new Media behaviours to the site.

sosy
26 Jul 2010, 9:26 PM
@Doug, thanks i will..

cobnet
27 Jul 2010, 5:42 PM
Is anyone else receiving the error message?



Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1)
Timestamp: Wed, 28 Jul 2010 01:41:34 UTC


Message: 'style' is null or not an object
Line: 725
Char: 21
Code: 0
URI: http://cobnet.com/lib/ux/mif/multidom.js

ibet
27 Jul 2010, 11:36 PM
my page code is below,the page in iframe don't show at once in IE8,but in Firefox3.5 it work fine.
next,the page in the iframe have something wrong when click a button and do "Ext.Msg.alert('xxx, "------");"
,the iframe is blank. but in FF3.5 it's no problem.

Ext.onReady(function() {
var MyViewport=new Ext.Viewport({
layout:"border",
items:[
{
title:"我的面板",
region:"north",
header:false,
contentEl:'topx',
margins: '0 20 0 20',
bbar:[
'->',
{text:'<div style="font: bold 15px;">首页</div>',width:60,
//style:'background:#ff9900;border:1px solid #ff6600',
scale: 'medium',handler:function(){Ext.getCmp('id_main').setSrc('indexx.jsp');}
},' ','-',
{text:'<div style="font: bold 15px;">科研项目</div>',width:100,
scale: 'medium',handler:function(){location.href='#';}
},' ','-',
{text:'<div style="font: bold 15px;">外协项目</div>',width:100,
scale: 'medium',handler:function(){Ext.getCmp('id_main').setSrc('allxmlist.jsp');}
},' ','-',
{text:'<div style="font: bold 15px;">查询</div>',width:60,
scale: 'medium'
,menu: [
{text: '报表查询'},
{text:'成果查询',handler:function(){location.href='html/query/main_cgcx.jsp';}}
]
},' ','-',
{text:'<div style="font: bold 15px;">系统管理</div>',width:100,
scale: 'medium',handler:function(){location.href='html/manage/main_msg.jsp'}
},' ','-',{xtype: 'tbspacer', width: 50}
]
},
{
margins: '0 20 1 20',
region:'center',
xtype:'iframepanel',
autoScroll:false,
id:'id_main',
header:false,
focusOnLoad :true,
defaultSrc :'indexx.jsp'
},
{
title:"我的面板",
header:false,
region:"south",
margins: '0 20 1 20',
contentEl: 'footx'
}
]
});
});

ibet
28 Jul 2010, 12:03 AM
I use Ext3.1.1,miframe 2.1.3,
my page code is below,it's don't work in IE 8,but in FF3.5 is fine.
three problems:
1.the page in iframe don't show at once when loaded,but click somewhere show.
2.click a button in iframe page and do Ext.Msg.alert() ,the page also change to blank.
3.MIF.setSrc(url) load another page,it don't show at once.


Ext.onReady(function() {
var MyViewport=new Ext.Viewport({
layout:"border",
items:[
{
title:"我的面板",
region:"north",
header:false,
contentEl:'topx',
margins: '0 20 0 20',
bbar:[
'->',
{text:'<div style="font: bold 15px;">首页</div>',width:60,
//style:'background:#ff9900;border:1px solid #ff6600',
scale: 'medium',handler:function(){Ext.getCmp('id_main').setSrc('indexx.jsp');}
},' ','-',
{text:'<div style="font: bold 15px;">科研项目</div>',width:100,
scale: 'medium',handler:function(){location.href='#';}
},' ','-',
{text:'<div style="font: bold 15px;">外协项目</div>',width:100,
scale: 'medium',handler:function(){Ext.get('id_main').src='allxmlist.jsp';}
},' ','-',
{text:'<div style="font: bold 15px;">查询</div>',width:60,
scale: 'medium'
,menu: [
{text: '报表查询'},
{text:'成果查询',handler:function(){location.href='html/query/main_cgcx.jsp';}}
]
},' ','-',
{text:'<div style="font: bold 15px;">系统管理</div>',width:100,
scale: 'medium',handler:function(){location.href='html/manage/main_msg.jsp'}
},' ','-',{xtype: 'tbspacer', width: 50}
]
},
{
margins: '0 20 1 20',
region:'center',
//xtype:'iframepanel',
autoScroll:false,
id:'id_main',
header:false,
//focusOnLoad :true,
//disableMessaging :false,
//defaultSrc :'indexx.jsp'
//useShim :true
html:"<div align=center><iframe width='100%' id='id_main' height='100%' align=center src='indexx.jsp' allowtransparency='no' frameborder='0' marginheight='no' scrolling='no'></iframe></div>"
//border :false,
},
{
title:"我的面板",
header:false,
region:"south",
margins: '0 20 1 20',
contentEl: 'footx'
}
]
});
});

Michael A.
28 Jul 2010, 6:17 AM
@Doug --
Thanks a lot! Finally with the animFloat option together it's solved!


@Michael --
The title-collapse behavior of border regions still uses animation effects in that scenario. The effects will cause DOM reflow (and the IFRAME to re-initialize).

Add:


animFloat : Ext.isIE,
animCollapse : Ext.isIE
to your surrounding problematic regions (and all items within a tabPanel).

karthik085
28 Jul 2010, 12:27 PM
Hi,
I have a TabPanel where each tab is a ManagedIFrame. A dark blue block (below the tab panel) as shown in the image gets added whenever a new tab (also a maangediframe) gets added. It happens only in IE 8. It does not happen in Firefox. Any suggestions?

21711


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

(Current Release 2.1)

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.1 is only supported on Ext 3.1.1 higher. (For more on Ext 3.1 compatibility, read this (http://www.extjs.com/forum/showthread.php?p=426151#post426151))

The latest build is also available on code.google/svn/tags (http://code.google.com/p/managediframe/source/browse/).

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 (http://licensing.theactivegroup.com/) 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 (http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.ManagedIFrame.Component).

Demos:
- Simple MIF.Window (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsimple).
- By popular demand: A Westside Story (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav) (Treepanel-based URLs drive a MIF-filled TabPanel, with page link <a> interception samples. ;) )
- PDFSubmit (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit)(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.1 will ONLY work on Ext 3.1.1 or higher ! (For more on Ext 3.1 compatibility, read this (http://www.extjs.com/forum/showthread.php?p=426151#post426151))

Downloads for MIF 2.1.1 (and Ext 3.1.1+) are only available from google/code/downloads (http://code.google.com/p/managediframe/downloads/list).

karthik085
29 Jul 2010, 6:59 AM
Found the solution to the problem - hideMode was set to 'nosize' and causing this problem.
If it is IE, I found out it should be 'display'.

Can someone explain why it needs to be 'display' for IE - Why setting 'display' causes it to work correctly?




Hi,
I have a TabPanel where each tab is a ManagedIFrame. A dark blue block (below the tab panel) as shown in the image gets added whenever a new tab (also a maangediframe) gets added. It happens only in IE 8. It does not happen in Firefox. Any suggestions?

21711

jbird526
2 Aug 2010, 9:19 AM
I have a design issue that I hope someone can help. I am using a managed iframe window which is plotting content using an Xtemplate. The content is a series of user created notes and can number from a few to a few hundred. Initially I was building a window and building an ext panel for each note. In time I discovered how long it takes to build all these panels. If I had 100 notes it would take more than a minute to build all the panels. To allow the user to print the entire collection of notes I have been using a hidden managed iframe with the content populated in that window. As far as the user knew they were printing the panels. Anyway what I am trying to do now is only build the content in the managed iframe window and allow the user to respond to the note and forward the note to an email address. Currently I can build the window and populate it with the notes. What I am having trouble with is event listeners on the Reply and Forward buttons. I am not sure if my overall design is completely flawed or not setting the event listeners. The event listeners work intermittently in FF but not at all in IE.

http://mysite.verizon.net/vzevn2mf/ext_forum/readAll.JPG


Ext.namespace('Ext.umuc');
//global var to add unread for mark all unread
var noteIDArray = [];

Ext.umuc.ConferenceReadAllExtend = Ext.extend(Ext.ux.ManagedIFrame.Window, {

initComponent : function() {

var config = {
iframeTemplate: new Ext.XTemplate(
'<head><link rel="stylesheet" type="text/css" media="all" href="/tycho/Conference/css/note.css"/>',
Ext.isIE ? '<link rel="stylesheet" type="text/css" media="print" href="/ext-lib/css/ieprint.css"/>' : '<link rel="stylesheet" type="text/css" media="print" href="/ext-lib/css/altprint.css"/>',
'</head><body>',
'<div class="note-wrapper">',
'<div id="toolbar" class={unread:this.formatUnread}>',
'<div id="respond-{id}" class="note-respond">Respond</div>',
'<div id="forward-{id}" class="note-forward">Forward</div>',
'</div>',
'<div id="note-data-id" class="note-data-readall">',
'<div class="note-date">{date}</div>',
'<div class="note-title">{title}</div>',
'<div class="note-number">Note # {ordinal}</div>',
'<div class="note-author">by {author}</div>',
'<tpl if="typeof modifiedBy != \'undefined\'">',
'<div class="note-modified">Note edited by {modifiedByDisplayName} on {modifiedDate}</div>',
'</tpl>',
'<tpl if="typeof modifiedBy == \'undefined\'">',
'</tpl>', '<tpl if="typeof attachments != \'undefined\'">',
'<tpl for="attachments">',
'<div class="note-attachment"><a href="{[tychoContext]}conference/getAttachment.tycho?attachId={attachId}&noteId={parent.id}"> {attachName} ({attachSize})</a> </div>',
'</tpl>',
'</tpl>',
'<tpl if="typeof ratingSystem != \'undefined\'">',
'<div id="ratingdiv" class="note-rated">{ratingValue:this.formatRating} - {ratingText}</div>',
'</tpl>',
'<tpl if="typeof ratingSystem == \'undefined\'">',
'</tpl>', {
formatRating: function(ratingValue) {
var val = parseInt(ratingValue);
var buffer = [];
var img = '<img src="/ext-lib/images/starImg.png"/>';
for (var i = 0; i < val; i++) {
buffer.push(img)
}
return buffer.join('');
},
formatUnread: function(unreadValue){
if(unreadValue == true){
return "note-toolbar-unread";
}else{
return "note-toolbar";
}
}
},

'</div>',
'<div class="note-body-readall">{body}</div></body>',
'</div>').compile(),



bbar : ['->',
{
id:'print',
text:'Print All Notes',
iconCls:'print-page',
scope: this,
handler: this.printFunction
},

{
id : 'markAllReadClose',

// start disabled in case there are no unread notes
disabled: true,

text : 'Mark All Read & Close Window',
iconCls : 'edit-page',

scope : this,
handler : function(btn, pressed) {
var idJoin = noteIDArray.join(",");
Ext.Ajax.request({
url : tychoContext + 'conference/markAllNotesRead.tycho',
method : 'POST',
scope : this,
params : {
noteList : idJoin,
confId : this.confID
},

success : function(response, options) {
var tabPanel = Ext.getCmp('conference-tabs').getActiveTab();
tabPanel.viewClearUnreadStatus(tabPanel);

this.close();
},

failure : function(response, options) {
extUmucErrorMsg.run(response, 'Mark read request failed. Please try again.');

}
}); // end Ajax request

}

},

{
id : 'closeWindow',
text : 'Close Window',
iconCls : 'conf-cancel',
scope : this,
handler : function(btn, pressed) {
this.close();
}
}]

};//eo config
Ext.apply(this, Ext.apply(this.initialConfig, config));

Ext.umuc.ConferenceReadAllExtend.superclass.initComponent.apply(this,arguments);
this.on('afterlayout', function(MIF){
if(MIF){
var frame = MIF.getFrame();
if(frame){
var frameDoc = frame.getDoc();
//var e = frame.query('div.note-respond');
/* var e = Ext.select('div.note-respond', true, MIF);
for(var i = 0; i < e.length; i++){
e[i].on('click', function(e,t){
var noteId = t.id.substring(t.id.lastIndexOf('-')+1);
this.getNote(noteId, 'respond');
}, this);
}*/

frameDoc.on({
click:{
scope:this,
fn:function(e, t){
Ext.fly(t).set({target:'_blank'});
},
delegate:'a'
}
});

frameDoc.on({
click:{
scope:this,
fn:function(e, t){
var noteId = t.id.substring(t.id.lastIndexOf('-')+1);
this.getNote(noteId, 'respond');

},
delegate:'div.note-respond'
}
});

frameDoc.on({
click:{
scope:this,
fn:function(e, t){
var noteId = t.id.substring(t.id.lastIndexOf('-')+1);
this.getNote(noteId, 'forward');

},
delegate:'div.note-forward'
}
});
}
}
},this, {single:true});
}, // eo function initComponent

onRender : function() {

// before parent code
Ext.Ajax.request(
{
url: tychoContext + this.buttonInfo.actionURL,
params: {confId: this.buttonInfo.confID},
method: "GET",
scope: this,

success: function(response, options)
{
this.getEl().unmask();

var thread = Ext.decode(response.responseText);
var threadNotes = thread.rows;
if (threadNotes[0].length == 0) {
if(this.title == 'Read/Print Full Unread Text'){
this.body.insertHtml('afterBegin','<div style="font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; padding:5px; font-size:14px;">There are no viewable unread notes in this conference.</div>');
return this;
}else{
this.body.insertHtml('afterBegin','<div style="font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; padding:5px; font-size:14px;">There are no viewable notes in this conference.</div>');
return this;
}
}
var viewerHiddenIframe = this;
//set button visibility for response
var buttonStatus = this.updateButtons(thread);
var viewerTemplate = this.iframeTemplate;
if(buttonStatus == false){
viewerTemplate = this.iframeTemplateNoResp;
}

//var viewerHiddenIframe = this;
//var viewerTemplate = this.iframeTemplate;


var printPanel = renderMarkup(threadNotes, viewerTemplate);

function renderMarkup(threadNotes, viewerTemplate){
//var iframeWindow = Ext.getCmp('read-all-window');
var printContent = [];
Ext.each(threadNotes, function(record) {
var y = printContent;
printContent.push(viewerTemplate.apply(record));
var x;
});
var joined = printContent.join('');

viewerHiddenIframe.updateBodyReadAll(joined);
//return this;
};

// loop through notes in thread and display
for (i = 0; i < threadNotes.length; i++)
{
// if the note is unread, add it to the list for marking all unread
if (threadNotes[i].unread)
noteIDArray[noteIDArray.length]=threadNotes[i].id;

} // end for

// check if there are any unread notes, if so enable the markAll button
if (noteIDArray.length > 0)
{
var btn = Ext.getCmp('markAllReadClose');
btn.enable();
}
// update the window display
this.doLayout();
},

failure: function(response, options)
{
this.getEl().unmask();
extUmucErrorMsg.run(response, 'Read all notes failed');

}
});
// call parent
Ext.umuc.ConferenceReadAllExtend.superclass.onRender.apply(this, arguments);



}, // eo function onRender

hendricd
2 Aug 2010, 10:30 AM
@jbird --
For template-based updates to the frame, always use the 'domready' event to signal when it's safe to access the DOM of the frame (to set listeners etc)..

jbird526
3 Aug 2010, 6:02 AM
@jbird --
For template-based updates to the frame, always use the 'domready' event to signal when it's safe to access the DOM of the frame (to set listeners etc)..

I had tried using 'domready' previously and it wasnt working for me. I found a post that you had made about the afterlayout but now I think it did not have to do with updating a frame. Anyway I changed to 'domready' but had to add "delay:500" for it to work. It will work in IE now but it still seems to only work if I dont click the respond or forward button too quickly after the window loads.

hendricd
3 Aug 2010, 6:38 AM
@jbrid -- What versions of what are involved here?

jbird526
3 Aug 2010, 7:11 AM
I am sorry I forgot to mention versions.
Ext 3.2.1
MIF 2_1_3

I have actually been able to remove the delay. Perhaps you can explain why this works. I moved the unmask from before the notes are built in the template and updated to the frame. I now have the unmask moved to after the doLayout(); at the bottom of the success response.


onRender : function() {

// before parent code
Ext.Ajax.request(
{
url: tychoContext + this.buttonInfo.actionURL,
params: {confId: this.buttonInfo.confID},
method: "GET",
scope: this,

success: function(response, options)
{
//this.getEl().unmask();

var thread = Ext.decode(response.responseText);
var threadNotes = thread.rows;
if (threadNotes[0].length == 0) {
if(this.title == 'Read/Print Full Unread Text'){
this.body.insertHtml('afterBegin','<div style="font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; padding:5px; font-size:14px;">There are no viewable unread notes in this conference.</div>');
return this;
}else{
this.body.insertHtml('afterBegin','<div style="font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; padding:5px; font-size:14px;">There are no viewable notes in this conference.</div>');
return this;
}
}
var viewerHiddenIframe = this;
//set button visibility for response
var buttonStatus = this.updateButtons(thread);
var viewerTemplate = this.iframeTemplate;
if(buttonStatus == false){
viewerTemplate = this.iframeTemplateNoResp;
}

//var viewerHiddenIframe = this;
//var viewerTemplate = this.iframeTemplate;


var printPanel = renderMarkup(threadNotes, viewerTemplate);

function renderMarkup(threadNotes, viewerTemplate){
//var iframeWindow = Ext.getCmp('read-all-window');
var printContent = [];
Ext.each(threadNotes, function(record) {
var y = printContent;
printContent.push(viewerTemplate.apply(record));
var x;
});
var joined = printContent.join('');

viewerHiddenIframe.updateBodyReadAll(joined);
//return this;
};

// loop through notes in thread and display
for (i = 0; i < threadNotes.length; i++)
{
// if the note is unread, add it to the list for marking all unread
if (threadNotes[i].unread)
noteIDArray[noteIDArray.length]=threadNotes[i].id;

} // end for

// check if there are any unread notes, if so enable the markAll button
if (noteIDArray.length > 0)
{
var btn = Ext.getCmp('markAllReadClose');
btn.enable();
}
// update the window display
this.doLayout();
//save unmask until the end
this.getEl().unmask();
},

failure: function(response, options)
{
this.getEl().unmask();
extUmucErrorMsg.run(response, 'Read all notes failed');

}
});

hendricd
3 Aug 2010, 8:16 AM
Can you describe/show what this:


viewerHiddenIframe.updateBodyReadAll(joined);
actually does?

jbird526
3 Aug 2010, 9:03 AM
Can you describe/show what this:


viewerHiddenIframe.updateBodyReadAll(joined);
actually does?


This is the method that updates the frame, but Im sure you could figure that out without my explanation. :)

updateBodyReadAll: function(data)
{
var updateFrame = this.getFrame();
updateFrame.update(data);
},

nak1
3 Aug 2010, 10:08 AM
I'm now receiving an error in FireFox 3.6.8 when I use the iframe object to render out content. Any thoughts?


Permission denied for <http://localhost.z.com> (document.domain=<http://localhost.z.com>) to get property HTMLDocument.dom from <http://localhost.z.com> (document.domain has not been set).

hendricd
3 Aug 2010, 11:08 AM
Got an MIF config you can share?

nak1
3 Aug 2010, 11:13 AM
Got an MIF config you can share?

It would look like this:

{
xtype: 'iframepanel',
id:obj.iframeid,
loadMask: true,
defaultSrc: '/index.cfm?page_type=page&pageid=191'
}

hendricd
3 Aug 2010, 11:30 AM
It would look like this:

{
xtype: 'iframepanel',
id:obj.iframeid,
loadMask: true,
defaultSrc: '/index.cfm?page_type=page&pageid=191'
}

@nak1 --

Hmm. Certainly can't garner much from that.

What's in the embedded page?
Is it trying to access the parent/top?
What versions of Ext/MIF does all this apply?

nak1
3 Aug 2010, 11:37 AM
@nak1 --

Hmm. Certainly can't garner much from that.

What's in the embedded page?
Is it trying to access the parent/top?
What versions of Ext/MIF does all this apply?


What's in the embedded page? It's a JavaScript process that renders out HTML using XTemplates
Is it trying to access the parent/top? Nope.
What versions of Ext/MIF does all this apply? Ext:3.0.0 MIF:2.0.1

jbird526
5 Aug 2010, 7:26 AM
I was trying to add a listener to the "domready" in initComponent. The MIF is populated by templated content with two buttons. Listeners are added to those for when the user clicks or mouseovers them. Using the domready was inconsistent, maybe adding it to initComponent wasnt the correct location. With long lists of data it seemed to add the listeners most of the time but if it was short they would not be added. What I decided to do was create a callback in the update iframe function. It works everytime now. I decided to do this based on Dougs documentation stating "A callback function invoked when the frame document has been written and fully loaded".

My question is how to refine and rewrite the addition of the listeners. Adding all those on click, mouseover, etc on different delegates doesnt look, for lack of a better word, clean. The code of interest is marked in red.


onRender : function() {

// before parent code
Ext.Ajax.request(
{
url: tychoContext + this.buttonInfo.actionURL,
params: {confId: this.buttonInfo.confID},
method: "GET",
scope: this,

success: function(response, options)
{

var thread = Ext.decode(response.responseText);
var threadNotes = thread.rows;
if (threadNotes[0].length == 0) {
if(this.title == 'Read/Print Full Unread Text'){
this.body.insertHtml('afterBegin','<div style="font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; padding:5px; font-size:14px;">There are no viewable unread notes in this conference.</div>');
return this;
}else{
this.body.insertHtml('afterBegin','<div style="font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; padding:5px; font-size:14px;">There are no viewable notes in this conference.</div>');
return this;
}
}
var readAll = this;
//set button visibility for response
var buttonStatus = this.updateButtons(thread);
var viewerTemplate = this.iframeTemplate;
if(buttonStatus == false){
viewerTemplate = this.iframeTemplateNoResp;
}

var printContent = [];
Ext.each(threadNotes, function(record) {
var y = printContent;
printContent.push(viewerTemplate.apply(record));
});
var joined = printContent.join('');

function icallback(readAll){
var frameDoc = readAll.getDoc();
if(frameDoc){
frameDoc.on({
click:{
scope:this,
fn:function(e, t){
var noteId = t.id.substring(t.id.lastIndexOf('-')+1);
this.getNote(noteId, 'respond');

},
delegate:'div.note-respond'
}
});

frameDoc.on({
click:{
scope:this,
fn:function(e, t){
var noteId = t.id.substring(t.id.lastIndexOf('-')+1);
this.getNote(noteId, 'forward');

},
delegate:'div.note-forward'
}
});

frameDoc.on({
mouseover:{
scope:this,
fn:function(e, t){
var item = t.id;
var x = Ext.fly(t);
x.addClass('note-respond-overclass');
},
delegate:'div.note-respond'
}
});

frameDoc.on({
mouseover:{
scope:this,
fn:function(e, t){
var item = t.id;
var x = Ext.fly(t);
x.addClass('note-forward-overclass');
},
delegate:'div.note-forward'
}
});

frameDoc.on({
mouseout:{
scope:this,
fn:function(e, t){
var item = t.id;
var x = Ext.fly(t);
x.removeClass('note-respond-overclass');
},
delegate:'div.note-respond'
}
});

frameDoc.on({
mouseout:{
scope:this,
fn:function(e, t){
var item = t.id;
var x = Ext.fly(t);
x.removeClass('note-forward-overclass');
},
delegate:'div.note-forward'
}
});

frameDoc.on({
click:{
scope:this,
fn:function(e, t){
Ext.fly(t).set({target:'_blank'});
},
delegate:'a'
}
});
}
};


readAll.getFrame().update(joined, false, icallback, this);

// loop through notes in thread and display
for (i = 0; i < threadNotes.length; i++)
{
// if the note is unread, add it to the list for marking all unread
if (threadNotes[i].unread)
noteIDArray[noteIDArray.length]=threadNotes[i].id;

} // end for

// check if there are any unread notes, if so enable the markAll button
if (noteIDArray.length > 0)
{
var btn = Ext.getCmp('markAllReadClose');
btn.enable();
}

this.getEl().unmask();
},

failure: function(response, options)
{
this.getEl().unmask();
extUmucErrorMsg.run(response, 'Read all notes failed');

}
});
// call parent
Ext.umuc.ConferenceReadAll.superclass.onRender.apply(this, arguments);

MrSparks
12 Aug 2010, 6:54 AM
Hi,

I'm seeing a positioning issue on Firefox 3.6 when the Border layout is created. (or at least I think its something to do with the border layout creation)
e.g.

When you load the page for the first time or refresh the page....
--under IE and Chrome when the border layout (west and centre panels) are shown in the viewport at the same time.
--under Firefox the west and centre panels are initially shown stacked then a second later assume the proper border layout.


To me it looks like the layout: border is being applied at the wrong point under FireFox?


Any suggestion appreciated, its driving me nuts trying to find a fix for this! :o)

ExtJS: 3.21
MIF: 213




Ext.onReady(function(){
alert('ext.onready')

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',

items:[{
region:'west',
id:'west-panel',
title:'West',
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
html: 'some content'

},{

xtype:'tabpanel',
region:'center',
activeTab : 0,
items: [{
title: 'tab1',
items: [{
xtype:'portal',
margins:'35 5 5 0',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',


items: new SampleGrid([0, 2, 3])
},{
title: 'Another Panel 1',

html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',

html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 2',

html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Panel 3',
width:200,
height:200,
frame:true,
animCollapse:false,
xtype: 'iframepanel',
draggable:true,
defaultSrc : 'http://www.google.co.uk'
},{
title: 'Another Panel 3',
html: Ext.example.shortBogusMarkup
}]
}]
}]
}]

}]


});
});

estesbubba
12 Aug 2010, 10:09 AM
Hi,

I've searched and haven't found a definitive answer. I have a MIF panel that loads a page from another domain. That page tries to run a script that causes a permission denied error:


Permission denied for <https://xyz.com> to get property Window.fraLeftNav from <http://localhost:9080>.
top.fraLeftNav.document.location = "../../../Content/left_nav.aspx";Script where it blows up



<script>
window.onload = function() {
top.fraLeftNav.document.location = "../../../Content/left_nav.aspx";
document.location = "../../Email/EmailEdit.aspx?eid=6043915&cid=213566"; }
</script>
Is there something in my code I can do to fix this? Am I stuck because I can't control the third-party page's content?

Thanks.

hendricd
12 Aug 2010, 1:31 PM
Yep, the same-origin policy applies to BOTH documents (which is why the remote is failing as well).

That's why it's not a good idea to load remote content (with questionable motives) into your FRAMES.

hendricd
12 Aug 2010, 1:32 PM
Hi,

I'm seeing a positioning issue on Firefox 3.6 when the Border layout is created. (or at least I think its something to do with the border layout creation)
e.g.

When you load the page for the first time or refresh the page....
--under IE and Chrome when the border layout (west and centre panels) are shown in the viewport at the same time.
--under Firefox the west and centre panels are initially shown stacked then a second later assume the proper border layout.


To me it looks like the layout: border is being applied at the wrong point under FireFox?


Any suggestion appreciated, its driving me nuts trying to find a fix for this! :o)

ExtJS: 3.21
MIF: 213


@MrSparks --

Have you tried it without the state-management (or cleared your cookies)?

MrSparks
12 Aug 2010, 10:53 PM
@MrSparks --

Have you tried it without the state-management (or cleared your cookies)?

@Doug

Just tried this without "Ext.state.Manager.setProvider" and cleared my cookies but i'm still seeing the same problem on Firefox.

hendricd
13 Aug 2010, 6:41 AM
@Doug

Just tried this without "Ext.state.Manager.setProvider" and cleared my cookies but i'm still seeing the same problem on Firefox.

Could you post a sample of your border layout?

MrSparks
14 Aug 2010, 3:34 AM
Could you post a sample of your border layout?

@Doug
I'm using layout:'border' to control the layout. The code I posted is the whole example, minus the .js includes. My reading of the API suggested that's all that needed. I'm guessing that's not the case?

hendricd
16 Aug 2010, 7:53 AM
@MrSparks --

Your portal appears over-nested in the first tab. Either give the first tab a 'fit' layout, or just make the portal THE first tab.

MrSparks
16 Aug 2010, 9:01 AM
@Doug --

Thanks for the reply. Just tried that but no success. Below is a very cut down example which still shows the repositioning during initialisation. Commenting out iframepanel stops the repositioning. I've tried stepping through this under Firebug but... i'm not 100% sure what i'm looking for. :(



Ext.onReady(function(){
alert('ext.onready')

var viewport = new Ext.Viewport({
layout:'border',

items:[{
region:'west',
id:'west-panel',
title:'West',
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
html: 'Under Firefox 3.6, this area will flip from stacked on top of the centre panel to west area during initialisation. It gets very noticeable when there is a lot of content in the centre panels / the application is larger. Commenting out iframepanel shows normal behaviour.'
},{

xtype:'tabpanel',
region:'center',
activeTab : 0,
items: [{
title: 'tab 1',
layout:'fit',
xtype: 'iframepanel',
width: 200,
defaultSrc : 'http://www.google.co.uk'
},{
title: 'tab 2',
width: 200,
}]
}]
});
});

MrSparks
18 Aug 2010, 12:36 PM
@Doug --

Wondered if you had any thoughts on the repositioning issue? I've not managed to find a work around and slowly loosing the will to live this end! :)



Cheers
MrSparks

ebx6211
23 Aug 2010, 11:13 PM
My scenario as follows:

I am using iframepanel for display website in tab.

Now, i have 2 tabs in my panel, the 1st tab is google page and the 2nd tab is yahoo page.

but when i clicked to the 1st tab, it was still displaying yahoo page but not goole.

why was it be ?

my coding as follows:



var tabs = new Ext.TabPanel(
{ xtype :'tabpanel',
// id : this.getId() + '-center',
ref : 'demoTabs',
activeTab : 0,
frame :true,
defaults : {
split : true,
border : false,
frame :true
},
region : 'center',
frame :true,
layoutOnTabChange : true,
items:[{
title: 'tab 1',
layout:'fit',
xtype: 'iframepanel',
width: 200,
defaultSrc : 'http://www.google.co.uk'
},{
title: 'tab 2',
layout:'fit',
xtype: 'iframepanel',
width: 200,
defaultSrc : 'http://www.yahoo.com'
}]
});




pls help !!!

Capt.JackSparrow
26 Aug 2010, 6:45 AM
I have a 'load' listener configured to the document body.
This listener loads an iframe(which was initialized as a blank page) inside the body.

During page unload, the following error happens in miframe.js:
"fn[0] is undefined" - line[2141]

Can we have a null check for fn[0] at line[2141]?

I suppose the error happens for the miframe 2_1_3 too.

============
FF 3.6.8
Ext 3.2.2
miframe-debug.js[2.1.2]
============

(Pls let me know if I am not clear.)

Tom23
30 Aug 2010, 4:39 AM
Known issues:
Opera 10 iframe load events appear to be raised when anything in the frame is loaded (eg images, etc). This wreaks havoc with domready/documentloaded detection.

Any progress on this? I've spent hours trying to hunt this one down.
I mean, is there no way to find out what caused the load event to fire?

hendricd
30 Aug 2010, 1:36 PM
Any progress on this? I've spent hours trying to hunt this one down.
I mean, is there no way to find out what caused the load event to fire?

@Tom --

I've been trying to solve that problem for over 3 years! So, don't feel bad about it. ;)

Opera REFUSES to indicate on the frame's load event, what the ACTUAL event target of all those load events actually is, thus it's still impossible (as of Opera 10.61) to LOAD with any accuracy.

The only work-around I can offer would be buffering of your documentloaded listener:


yourMIF.on('documentloaded', fn, scope, Ext.isOpera ? { buffer : 500 }: null );

Theoretically, that would defer the listener until one of the last LOAD events arrives (depending the IMG weight of your nested page).

Also, testing revealed a necessary override (if you were using the focusOnLoad option ):



Ext.override ( Ext.ux.ManagedIFrame.Element, {
_onDocReady : function(eventName ){
var w, obv = this._observable, D;
if(!this.isReset && this.focusOnLoad && (w = this.getWindow())){
try { w.focus(); } catch(ex){}
}
//raise internal event regardless of state.
obv.fireEvent("_docready", this);

(D = this.getDoc()) && (D.isReady = true);

if ( !this.domFired &&
(this._hooked = this._renderHook())) {
// Only raise if sandBox injection succeeded (same origin)
this.domFired = true;
this.isReset || obv.fireEvent.call(obv, 'domready', this);
}

this.domReady = true;
this.hideMask();
}
});

Tom23
30 Aug 2010, 9:40 PM
Thanks for the thorough reply, and thanks again for the great work you did on that Extension in total. =D>


The only work-around I can offer would be buffering of your documentloaded listener:

Hm... Is that workaround used int the Westside Story demo (http://demos.theactivegroup.com/?demo=mif&script=mifsimple)? I can't find anything like it in the source, and the event appears to fire only once.

----

I found some issue with MIF.Component.onRender(), which for some reason instantiates MIF.Element twice:

First,

MIF.Component.superclass.onRender.apply(this, arguments); // calls get() which inits an MIF.Element

Second,

var F;
if (F = this.frameEl = (this.el ? new MIF.Element(this.el.dom, true) : null)) { // 2nd instantiation here
Ext.apply(F, {


Honestly, I don't really understand what's going on here, but I guess this is required to transform an existing Ext.Element into an MIF.Element(?).

This is my hacky override:

var F;
if (!this.el) {
F = this.frameEl = null;
return;
}
if (this.el.constructor == MIF.Element) {
F = this.frameEl = this.el; // skip instantiation if it has already been done
} else {
F = this.frameEl = new MIF.Element(this.el.dom, true);
}
Ext.apply(F, {

Tom23
30 Aug 2010, 11:35 PM
There's a minor documentation issue:

* @param {Boolean} discardUrl (Optional) If not passed as <tt>false</tt>
* the URL of this action becomes the default SRC attribute
* for this iframe, and will be subsequently used in future
* setSrc calls (emulates autoRefresh by calling setSrc
* without params).


Should be true instead of false

ah, triple negation :))

janwilleml
31 Aug 2010, 4:25 AM
Dear Doug,

I'm quite a newbie to ManagedIFrame (and ExtJS), but I can't make it work. After extracting the ZIP to my lib folder and including the script tags in the header of my index.html as described in the readme.txt it won't run. Using Firebug I can see that miframe.js is loaded correctly.

Even the simple script below returns an Object doesn't support method or object.


Ext.onReady(function () {

var MIF = new Ext.ux.ManagedIFrame({ autoCreate: { src: 'http://www.extjs.com', height: 350, width: '100%' }
, loadMask: false
});


});

Where can I find (our could you please describe them) the basic steps to check whether MIF is installed correctly?
Thanks a lot.

Jan-Willem

Capt.JackSparrow
4 Sep 2010, 12:29 AM
@Jan
I suppose you are using the latest version of miframe.
In that case, you can try initializing ManagedIFrame Element as:


var mif = new Ext.ux.ManagedIFrame.Element(id);
mif.setSrc(src);

hendricd
5 Sep 2010, 8:46 AM
Dear Doug,

I'm quite a newbie to ManagedIFrame (and ExtJS), but I can't make it work. After extracting the ZIP to my lib folder and including the script tags in the header of my index.html as described in the readme.txt it won't run. Using Firebug I can see that miframe.js is loaded correctly.

Even the simple script below returns an Object doesn't support method or object.


Ext.onReady(function () {

var MIF = new Ext.ux.ManagedIFrame({ autoCreate: { src: 'http://www.extjs.com', height: 350, width: '100%' }
, loadMask: false
});


});

Where can I find (our could you please describe them) the basic steps to check whether MIF is installed correctly?
Thanks a lot.

Jan-Willem

@Jan --

Are you trying to create a MIFPanel ?


Ext.create({
xtype : 'iframepanel',
title : 'Google',
defaultSrc : 'http://www.google.com',
height : 300,
width : 400,
renderTo : document.body
}).show();


or trying to manage an existing IFRAME:


new Ext.ux.ManagedIFrame.Element(someFrameId).setSrc('http://www.google.com');

Capt.JackSparrow
6 Sep 2010, 2:24 AM
I have a 'on load' listener configured to the document body.
This listener loads an iframe(which was initialized as a blank page as a BoxComponent) inside the body.

During page unload, the following error happens in miframe.js:
"fn[0] is undefined" - line[2141]

Can we have a null check for fn[0] at line[2141]?

I suppose the error happens for the miframe 2_1_3 too.

============
FF 3.6.8
Ext 3.2.2
miframe-debug.js[2.1.2]
============

(Pls let me know if I am not clear.)

Hi Doug,
Can we have the null check?

hendricd
6 Sep 2010, 7:42 AM
Hm... Is that workaround used int the Westside Story demo (http://demos.theactivegroup.com/?demo=mif&script=mifsimple)? I can't find anything like it in the source, and the event appears to fire only once.


MIF 2.1.4 introduces some new documentloaded detection logic for Opera. It should be available on code.google and on this Forum thread shortly.



I found some issue with MIF.Component.onRender(), which for some reason instantiates MIF.Element twice:

First,

MIF.Component.superclass.onRender.apply(this, arguments); // calls get() which inits an MIF.ElementSecond,

var F;
if (F = this.frameEl = (this.el ? new MIF.Element(this.el.dom, true) : null)) { // 2nd instantiation here
Ext.apply(F, {
Honestly, I don't really understand what's going on here, but I guess this is required to transform an existing Ext.Element into an MIF.Element(?).


No need for any hacks. It's doing what it's designed to do. 'el' might be provided in the Component's constructor (using Ext.get). The Iframe needs to be wrapped in a new instance of MIF.Element and the Ext.Element.elCache needs to know this fact, thus the re-assertion. ;)

hendricd
6 Sep 2010, 7:43 AM
Hi Doug,
Can we have the null check?

It shall be done ( MIF 2.1.4 ).

hendricd
6 Sep 2010, 9:29 AM
MIF 2.1.4 released. Get it here (http://code.google.com/p/managediframe/downloads/list).

Fixes: Adds a workaround for Opera's lame onload handling.

Adds: tpl and data support for all MIF.Component flavours for Frame Templating (reports and other content written directly to the frame)

Capt.JackSparrow
6 Sep 2010, 10:16 PM
It shall be done ( MIF 2.1.4 ).

Thanks a ton, Doug!

cherepanov
11 Sep 2010, 6:43 AM
How do i get iframe title? Only property i see is dom.title, but it always empty. Thx for help.

MIF.on('documentloaded', function(frame){
var doc = this.getDocument();
var body = this.getBody();
var dom = this.dom;
var title = ???
browser.fireEvent('pageupdated', this, this.getDocumentURI(), title);
});

hendricd
11 Sep 2010, 9:34 AM
How do i get iframe title? Only property i see is dom.title, but it always empty. Thx for help.

MIF.on('documentloaded', function(frame){
var doc = this.getDocument();
var body = this.getBody();
var dom = this.dom;
var title = ???
browser.fireEvent('pageupdated', this, this.getDocumentURI(), title);
});

@cherapanov --

If it's a 'same-origin' frame, that would be


MIF.on('documentloaded', function(frame){
var title = frame.getDocument().title;

iulian
12 Sep 2010, 7:06 PM
Doug,

I am stuck with an issue in IE (tested versions 7 and 8): in your multidom class, you're overwriting Ext.Element.data, Ext.Element.addToCache and Ext.Element.removeFromCache to allow caching for multiple documents. In Ext core, while adding methods for Ext.Element, the Ext.Element.data (the original) is being cached to 'data' variable (see lines 4059, 5097 and 5276 in ext-all-debug.js, version 3.2.1) which is then used in multiple methods to get the element from cache, causing repeated 'Ext[...].data is null or undefined' errors in IE. I saw that you're using the same object to store cached elements for the parent document (Ext.elCache === Ext._documents['ext-gen1']). Theoretically, it should work. Am I missing something?

As a temporary solution I replaced all the calls to the cached method 'data()' with 'Ext.Element.data()' and it works without problems.

Maybe you could take a look...

After2050
13 Sep 2010, 3:47 AM
How I can set the height of ManageIFrame.Panel to auto

santoshsatav
20 Sep 2010, 9:13 PM
bug while using managed iframe it occurring randomly
stating error at line 3215 Error:Ec[..]data is null or not an object
22494

can anybody has solution ?

theCodingChimp
23 Sep 2010, 4:51 AM
I am also getting the Error:Ec[..]data is null or not an object intermittently.

I have a toolbar at the top of my page with a set of menu items with a set of sub menu items each. The menu buttons stop working and I get the "Error:Ec[..]data is null or not an object" sometimes I get "this.getVisibilityEl() is undefined". Only seeing the issue in IE6 and IE7, not in Firefox. And, it only seems to occur after the garbage collector has run. If I turn off the garbage collector I don't see the problem anymore:



Ext.enableGarbageCollector = false;
Sometimes I can click around for an hour and not see the prob, other times its there to begin with or even if I leave my application sitting around for 10-15 mins it will show on its own.

miframe: v2.1.4
extjs: v3.2.1

Any ideas?

Thanks in advance...

mschwartz
23 Sep 2010, 10:03 AM
I am also getting the Error:Ec[..]data is null or not an object intermittently.

I have a toolbar at the top of my page with a set of menu items with a set of sub menu items each. The menu buttons stop working and I get the "Error:Ec[..]data is null or not an object" sometimes I get "this.getVisibilityEl() is undefined". Only seeing the issue in IE6 and IE7, not in Firefox. And, it only seems to occur after the garbage collector has run. If I turn off the garbage collector I don't see the problem anymore:



Ext.enableGarbageCollector = false;
Sometimes I can click around for an hour and not see the prob, other times its there to begin with or even if I leave my application sitting around for 10-15 mins it will show on its own.

miframe: v2.1.4
extjs: v3.2.1

Any ideas?

Thanks in advance...

Me, too. Only in IE, but every time the app tries to use the iframe.

theCodingChimp
23 Sep 2010, 10:24 AM
This is like showing up at alcoholics anonymous to find other people have the same issue aswell !!! Bad there is an issue but good to find others with it :)....

I have been pulling my hair out since last week trying to pin point whats wrong and the constant clicking between menus to get it to fail has given me rsi that I will mostly likely take to my grave... :(

hendricd
23 Sep 2010, 3:28 PM
Thanks for the reports guys. I have I theory I'm checking out. Will report back when I have some news. ;)

rule3
26 Sep 2010, 8:45 PM
I did not got this work on latest Ext JS..??

novant
30 Sep 2010, 11:09 AM
Hello i have a problem, it is on IE7. the iframepanel do not load pages if them has the ext library in self. Any body has a solution, thanks.

hendricd
30 Sep 2010, 3:06 PM
Hello i have a problem, it is on IE7. the iframepanel do not load pages if them has the ext library in self. Any body has a solution, thanks.

@novant --

What version of Ext are you loading in the Frame?

dreas
4 Oct 2010, 12:36 AM
Thanks for the reports guys. I have I theory I'm checking out. Will report back when I have some news. ;)
Hi Doug, did you get to check out your theory yet?

tronlt
4 Oct 2010, 6:16 AM
Has any one else experienced an issue with child tree nodes disappearing when expanding/collapsing a parent node? There would we a void where the child nodes would be when the parent node is collapsed. This only seems to happen on IE8 when using the ManagedIFrame extension. Firefox works fine. The problem also goes away on IE8 if I take out the ManagedIFrame extension. Any help would be greatly appreciated.

someone80
6 Oct 2010, 11:55 AM
I all, i'm a newbie of extjs , i'm trying to integrate mif on webdesktop extjs, target is to have tabpanel that load aspx pages by managed iframe.
I downloaded webdesktop sample (desktop.html and sample.js) and it's working correctly, then i downoaded mif and i'm trying to integrate "target.js" on the sample.js webdesktop file.

I post the code here:

---- desktop.html -----
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>WebDesktop</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/desktop.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="ext-all-debug.js"></script>

<!-- DESKTOP -->
<script type="text/javascript" src="js/StartMenu.js"></script>
<script type="text/javascript" src="js/TaskBar.js"></script>
<script type="text/javascript" src="js/Desktop.js"></script>
<script type="text/javascript" src="js/App.js"></script>
<script type="text/javascript" src="js/Module.js"></script>
<!-- <script type="text/javascript" src="js/miframe-debug.js"></script>
<script type="text/javascript" src="js/mifmsg.js"></script> -->
<script type="text/javascript" src="sample.js"></script>

</head>
<body scroll="no">

<div id="x-desktop">
<!-- <a href="http://extjs.com" target="_blank" style="margin:5px; float:right;"><img src="images/powered.gif" /></a> -->

<dl id="x-shortcuts">
<dt id="grid-win-shortcut">
<a href="#"><img src="images/s.gif" />
<div>Grid Window</div></a>
</dt>
<dt id="acc-win-shortcut">
<a href="#"><img src="images/s.gif" />
<div>Accordion Window</div></a>
</dt>
<dt id="ord-win-shortcut">
<a href="#"><img src="images/s.gif" />
<div>Test 1</div></a>
</dt>

<dt id="stat-win-shortcut">
<a href="#l"><img src="images/s.gif" />
<div>Test 2</div></a>
</dt>


</dl>
</div>

<div id="ux-taskbar">
<div id="ux-taskbar-start"></div>
<div id="ux-taskbuttons-panel"></div>
<div class="x-clear"></div>
</div>

</body>
</html>
-------------------------------------
----sample.js-------------
// Sample desktop configuration
MyDesktop = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
},

getModules : function(){
return [
new MyDesktop.GridWindow(),
new MyDesktop.TabWindow(),
new MyDesktop.StatWindow(),
new MyDesktop.OrdWindow(),
new MyDesktop.AccordionWindow(),
new MyDesktop.BogusMenuModule(),
new MyDesktop.BogusModule()
];
},

// config for the start menu
getStartConfig : function(){
return {
title: 'You Commerce ',
iconCls: 'user',
toolItems: [{
text:'Settings',
iconCls:'settings',
scope:this
},'-',{
text:'Logout',
iconCls:'logout',
scope:this
}]
};
}
});



/*
* Example windows
*/
MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
id:'grid-win',
init : function(){
this.launcher = {
text: 'Grid Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
]),

viewConfig: {
forceFit:true
},
//autoExpandColumn:'company',

tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
})
});
}
win.show();
}
});



MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {
id:'tab-win',
init : function(){
this.launcher = {
text: 'Tab Window',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tab-win');
if(!win){
win = desktop.createWindow({
id: 'tab-win',
title:'Tab Window',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,

items: [{
title: 'Tab Text 1',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 2',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 4',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}]
})
});
}
win.show();
}
});






MyDesktop.AccordionWindow = Ext.extend(Ext.app.Module, {
id:'acc-win',
init : function(){
this.launcher = {
text: 'Accordion Window',
iconCls:'accordion',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('acc-win');
if(!win){
win = desktop.createWindow({
id: 'acc-win',
title: 'Accordion Window',
width:250,
height:400,
iconCls: 'accordion',
shim:false,
animCollapse:false,
constrainHeader:true,

tbar:[{
tooltip:{title:'Rich Tooltips', text:'Let your users know what they can do!'},
iconCls:'connect'
},'-',{
tooltip:'Add a new user',
iconCls:'user-add'
},' ',{
tooltip:'Remove the selected user',
iconCls:'user-delete'
}],

layout:'accordion',
border:false,
layoutConfig: {
animate:false
},

items: [
new Ext.tree.TreePanel({
id:'im-tree',
title: 'Online Users',
loader: new Ext.tree.TreeLoader(),
rootVisible:false,
lines:false,
autoScroll:true,
tools:[{
id:'refresh',
on:{
click: function(){
var tree = Ext.getCmp('im-tree');
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function(){ // mimic a server call
tree.body.unmask();
tree.root.expand(true, true);
}, 1000);
}
}
}],
root: new Ext.tree.AsyncTreeNode({
text:'Online',
children:[{
text:'Friends',
expanded:true,
children:[{
text:'Jack',
iconCls:'user',
leaf:true
},{
text:'Brian',
iconCls:'user',
leaf:true
},{
text:'Jon',
iconCls:'user',
leaf:true
},{
text:'Tim',
iconCls:'user',
leaf:true
},{
text:'Nige',
iconCls:'user',
leaf:true
},{
text:'Fred',
iconCls:'user',
leaf:true
},{
text:'Bob',
iconCls:'user',
leaf:true
}]
},{
text:'Family',
expanded:true,
children:[{
text:'Kelly',
iconCls:'user-girl',
leaf:true
},{
text:'Sara',
iconCls:'user-girl',
leaf:true
},{
text:'Zack',
iconCls:'user-kid',
leaf:true
},{
text:'John',
iconCls:'user-kid',
leaf:true
}]
}]
})
}), {
title: 'Settings',
html:'<p>Something useful would be in here.</p>',
autoScroll:true
},{
title: 'Even More Stuff',
html : '<p>Something useful would be in here.</p>'
},{
title: 'My Stuff',
html : '<p>Something useful would be in here.</p>'
}
]
});
}
win.show();
}
});


///////////////////////////
MyDesktop.OrdWindow = Ext.extend(Ext.app.Module, {
id:'ord-win',
init : function(){
this.launcher = {
text: 'Tab Window',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tab-win');
if(!win){
win = desktop.createWindow({
id: 'ord-win',
title:'Nuovi Ordini',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,

items: [{
title: 'Tab Text 1',

html : '<p>Test simple html iframe <iframe src ="newadmin.aspx" width="100%" height="100%" frameborder=0></ iframe></p>'

},{
title: 'Tab Text 2',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 4',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}





]
})
});
}
win.show();
}
});
///////////////////////////////


///////////////////////////
MyDesktop.StatWindow = Ext.extend(Ext.app.Module, {
id:'stat-win',
init : function(){
this.launcher = {
text: 'Tab Window',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tab-win');
if(!win){
win = desktop.createWindow({
id: 'stat-win',
title:'Statistiche',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,

items: [{
title: 'Tab Text 1',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 2',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 4',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}]
})
});
}
win.show();
}
});
///////////////////////////////










// for example purposes
var windowIndex = 0;

MyDesktop.BogusModule = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: 'Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId:windowIndex
}
},

createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('bogus'+src.windowId);
if(!win){
win = desktop.createWindow({
id: 'bogus'+src.windowId,
title:src.text,
width:640,
height:480,
html : '<p>Something useful would be in here.</p>',
iconCls: 'bogus',
shim:false,
animCollapse:false,
constrainHeader:true
});
}
win.show();
}
});









MyDesktop.BogusMenuModule = Ext.extend(MyDesktop.BogusModule, {
init : function(){
this.launcher = {
text: 'Bogus Submenu',
iconCls: 'bogus',
handler: function() {
return false;
},
menu: {
items:[{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
}]
}
}
}
});


// Array data for the grid
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];

-----------target.js --------------------

Demo.MIFTarget ||

(Demo.MIFTarget = Ext.extend( Demo.Window, {

title : 'ManagedIFrames: Targeted Region',
width : 845,
height : 490,
maximizable : true,
collapsible : true,
layout : 'fit',
require : ['@mif'],

initComponent: function(){

this.items = {
xtype :'tabpanel',
id : this.getId() + '-center',
ref : '../demoTabs',
activeTab : 0,
//inline JIT request for the 'mif'
require : ['@mif'],
layoutOnTabChange : true,

items : {
layout : 'border',
title : 'Frame Targeting',
defaults : {
split : true,
resizable : true,
collapsible : false
},
items : [{
region: "north",
id: 'north_id',
title : 'North Frame',
xtype: 'iframepanel',
frameCfg : { name : 'north_frame' },
height: 120,
html: 'North',
stateful : true
},{
region: 'west',
xtype: 'panel',
width: 90,
html: 'West'
},{
region: 'center',
id: 'center_id',
xtype: 'panel',
collapsible : false,
html: '<a href="http://www.google.com" target="north_frame">Send Google to north region</a>'
},{
region: 'east',
xtype: 'panel',
width: 200,
html: 'East'
},{
region: 'south',
xtype: 'panel',
height: 80,
html: 'South'
}]
}
};

Demo.MIFTarget.superclass.initComponent.apply(this, arguments);

},

sourceModule : Demo.resolveURL( 'mif', 'target.js')

}));


$JIT.provide('target');


-----------------------

if i include miframe-debug.js on desktop.html page my desktop doesn't work yet. Anyone can explain me how to use mif on a tabpanel ???



Thanks in advance

Marco

andersonv1
7 Oct 2010, 12:59 AM
Hi, I have a collapsible panel with xtype:'iframepanel'.

after collapsing it once/twice and my collapsible panel will disappear. is this a known bug or something? help please, will provide more information when requested :)

I'm currently using ext3 with miframe 2.1. many thanks.

andynuss
9 Oct 2010, 3:09 AM
Hi Doug,

I started testing on windows7, ie 8 and got the following problem: my iframe documents are all of type xhtml. Thus my java servlet does:



response.setContentType("application/xhtml+xml");


Before writing the response. With firefox there is no problem noted. However, on ie8, windows doesn't get the content type at all, and can't even infer it if I synthetically add the extension .xhtml to my documents (though originally they had no extension).

What IE8 does is put a status bar message saying that you've got to download a file of unknown content type.

If my PageServlet is changed to return a regular text/html page that just says "hello there", instead of my xhtml book content, then that works correctly on ie8 without hitting the status bar and asking to do a file download.

Andy

hendricd
11 Oct 2010, 7:17 AM
@Andy --
IE likely is treating that Content-type as an unrecognized stream, thus the download behavior.

Review this (http://www.echoofeden.com/digest/mit/2007/03/06/ie-xhtml-bug/).

hendricd
11 Oct 2010, 7:20 AM
MIF 2.1.5 is up.

It addresses the privately scoped references to Ext.elCache (throughout ext-all[-debug]) and now completely ignores the GarbageCollection strategy.

Get the zip, here (http://code.google.com/p/managediframe/downloads/detail?name=miframe2_1_5.zip&can=2&q=).

andynuss
11 Oct 2010, 9:03 AM
Hi Doug,

Thanks for the tip on xhtml content type. I'll look into that.

Meanwhile, I'm just starting to debug for ie, and noticed that in my extjs application (which uses the mif extensively, and loads a page with setLocation into the mif on application bootup) that I can't seem to debug my app with Web Developer Express tool in either ie7/vista or ie8/windows7. When I start the webdeveloper debug instance of ie, and visit my app, it loads fine, and mif works. However, as soon as I select a menu item (or try to) from my app's extjs menubar/toolbar at the top of a borderlayout, IE throws an exception into the debugger in core extjs code. Now, my mif loads about:blank initially, and if I comment out the bootup task that loads the first page into mif with setLocation(), then IE debugger does not see an exception when I use menu commands.

Have you seen that? (Its preventing me from debugging my application on windows.)

Andy

andynuss
13 Oct 2010, 7:12 AM
Hi Doug,

I tried the latest MIF 2.1.5 posted, and it doesn't deliver the documentloaded event when you change the mif with setLocation or setSrc. Just on first load (in my case about:blank).

Andy

kmiyashiro
18 Oct 2010, 4:33 PM
Hi Doug,

I tried the latest MIF 2.1.5 posted, and it doesn't deliver the documentloaded event when you change the mif with setLocation or setSrc. Just on first load (in my case about:blank).

Andy

Seeing this as well, except I'm note ven suing setLocation or setSrc. It used to fire when you clicked on a link inside the iframe to navigate to a new page inside the iframe.

Ext3.3, MIF 2.1.5

Yoris
21 Oct 2010, 5:12 AM
Hi doug!, i was wondering if you could give a hand here, i've been searching for ages for a way to do this through the forum (i don't know if there is no example or i am a lousy reader/programmer) but the thing is that i haven't found a way, through firebug i've been asserting that the ext framework is being loaded TWICE with jit in your (and other) examples and i know for a fact that is not right, isn't there a way to load ext only once and in every iframe just put the js code using ext but not load the ext framework (base/all/css) ? is there a quick example to do this? o concrete one? can you/anyone point me in the right direction?

basically i want to use ext framework in b.html whereas a.html has the ext framework and b.html loaded into an iframe.

Thanks in advance to you and anyone who is able to help me!!!
Yoris

Yoris
26 Oct 2010, 6:41 AM
Anybody can help me? does anybody ever needed this?

pkli
26 Oct 2010, 8:33 AM
For CSS i think there is no way ...
For JS you can use "parent" for all js command in the iframe and mif getFrame() for targets.

a thing like this ...

from the top document (set id param for your mif object), searching a div inside your iframe :
var my_iframe_div = Ext.getCmp('my_mif_id').getFrame().get('div_id');

inside your iframe doc
var my_iframe_div = parent.Ext.getCmp('my_mif_id').getFrame().get('div_id');

The container and the iframe document have to be on the same domain.

But why ???
css and js files are loaded in your browser cache so i think it's a little ... complicated for a small benefit.

mschwartz
26 Oct 2010, 10:17 AM
There's a way that's a little bit of work, but not so bad.

Send ext-all.js as a string. Like in PHP, you'd do something like:



$extjs = 'var extjs = "' . addslashes(file_get_contents('/path/to/ext-all.js')) . '";';
echo '<script type="text/javascript">';
echo $extjs;
eval(extjs);
echo '</script>';


In your iframes or popup browser windows, you can do:


eval(parent.extjs);


Anyhow, that's a start of it. You can probably do something similar with the css, but instead of eval you use the browser native methods to add the style tags.

Yoris
26 Oct 2010, 12:12 PM
Now, why would you want to do that ugly hack, nonono, theres another way im sure of it, just haven't figured it out.
thx by the way, at least you replied my post.

EDIT: i found a way but its not compatible with ext 3+ i've been trying to apply it to jit/basex 4 but unsuccessfuly may be sbdy can point me in the right way...

http://www.cdabay.com/r/extjs/examples/miframe/miframe.html

mschwartz
27 Oct 2010, 6:33 AM
Now, why would you want to do that ugly hack, nonono, theres another way im sure of it, just haven't figured it out.
thx by the way, at least you replied my post.

EDIT: i found a way but its not compatible with ext 3+ i've been trying to apply it to jit/basex 4 but unsuccessfuly may be sbdy can point me in the right way...

http://www.cdabay.com/r/extjs/examples/miframe/miframe.html

http://www.cdabay.com/r/extjs/examples/miframe/adviframe.js

If you look at the code, the modules are the text response of the request for a .js file. Not very different than the basic idea that I presented above.

The difference?

I suggested var extjs. He has this.modules = {} to hold more than just the ExtJS string.

And...

He's fetching the .js file via Ajax, I'm just embedding it in the initial page load between script tags.

Notice this comment?

//we DO NOT want to eval the result into the main-page (window) context,
//just caching it for later injection, so return false

Yoris
27 Oct 2010, 7:34 AM
Indeed my friend, i ended up doing just that, the question in my mind right now is, will evaling parent.ext (or whatever) will overload the browser´s memory if i manage like 10 o 20 iframes? is there a way to keep memory of frames low?

mschwartz
27 Oct 2010, 7:40 AM
Indeed my friend, i ended up doing just that, the question in my mind right now is, will evaling parent.ext (or whatever) will overload the browser´s memory if i manage like 10 o 20 iframes? is there a way to keep memory of frames low?

I really see no reason why you'd want to use iframes if all they contain is ExtJS. Why not use regular panels and the one ExtJS already loaded?

If you're not using the bulk of ExtJS (e.g. the widgets for UI), you might look at using Ext Core since it's way smaller.

hendricd
30 Oct 2010, 1:34 PM
@Yoris --

It might be helpful if you extrapolate a bit on what your intented markup(purpose) is for all those frames? Is this a migration tactic or something more permanent?

Hint: Just because you could do something, doesn't mean you should do that something...

jbird526
1 Nov 2010, 9:56 AM
I am using 3.2.2 and MIF 2.1.4 and having nothing but the usual wonderful functionality. I have tried upgrading to 2.1.5 and none of the listeners added to MIF Windows are being called. In this example I am updating the MIF on the window being shown. I have set breakpoints in FB and they are never called while using 2.1.5. I am trying to find in the miframe-debug where changes have been made. It is probably something simple I am looking right thru and not catching.


printGrid:function(grid) {

var gridHTML = grid.getEl().query("div.x-grid3-viewport");

var htmlCombine = '<head><link rel="stylesheet" type="text/css" media="all" href="/ext-lib/extV3/resources/css/ext-all.css"/></head><body>' + gridHTML[0].childNodes[1].innerHTML + '</body>';

var vpSizePG = Ext.getBody().getViewSize();
var gridWin = new Ext.ux.ManagedIFrame.Window({
id : 'print-grid-window',
closable : true,
constrain : true,
width: vpSizePG.width * 0.98,
height: vpSizePG.height * 0.98,
bodyStyle:'background:white',
layout : 'fit',
listeners : {
show: function(){
gridWin.getFrame().update(htmlCombine);
}
},
bbar : ['->',
{
id:'print',
text:'Print',
iconCls:'print-page',
scope: this,
handler: printPanel = function(btn){
try{
var pg = Ext.getCmp('print-grid-window');
var pf = pg.getFrame();
pf.print();

}catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);}

}
},
{
text : 'Close Window',
iconCls : 'conf-cancel',
handler : function(btn, pressed) {
gridWin.close();
}
}]

}); // end of window

gridWin.show();

}, // end of function

hendricd
1 Nov 2010, 12:51 PM
@jbird -- You're saying the show event is not ever raised?

hjfiou
1 Nov 2010, 9:25 PM
hi,Doug:
i want a demo about Cross-Frame Messaging with ManagedIframe,i can't find the sources.can you give me the while demo?tks~~

jbird526
2 Nov 2010, 6:18 AM
@jbird -- You're saying the show event is not ever raised?

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.

hendricd
2 Nov 2010, 7:07 AM
hi,Doug:
i want a demo about Cross-Frame Messaging with ManagedIframe,i can't find the sources.can you give me the while demo?tks~~
@hjfiou --
For a demo of messaging with MIF 2.x, see Heartbeat (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=heartbeat)

and follow along with this sample:


var onModeToggle = function(button, pressed){

if(pressed){
var C =this.refOwner;
C.msgMode = this.mode;
C.getFrame().execScript('window.messageMode='+this.mode+';', true);
}

};

var heartbeatMIF = new Ext.ux.ManagedIFrame.Window({

title : 'Frame Messaging Sample',
width : 745,
height : 369,
collapsible : true,
id : 'heartbeat',
autoScroll : true,
animCollapse : false,
disableMessaging : false,
defaultSrc : 'demos/mif/msgtest.html',
msgMode : 1,
tbar : [
{xtype : 'tbtext', text:'Using:'},
{text : 'mif.sendMessage',
mode : 1,
allowDepress : false,
enableToggle : true,
toggleGroup : 'msgModeSelect',
ref : '/butMode1',
pressed : true,
toggleHandler : onModeToggle
},
{text : 'window.postMessage',
allowDepress : false,
enableToggle : true,
toggleGroup : 'msgModeSelect',
mode : 2,
disabled : window.postMessage === undefined,
ref : '/butMode2',
toggleHandler : onModeToggle
},
'->',
{xtype : 'tbtext', text:'Waiting', ref : '/status'}
],
frameConfig : {
allowtransparency : 'true',
style : {"background-color" :"lightyellow"}
},
listeners : {
domready : function(frame){
frame.getWindow().startup();
},
//listen for inbound frame messages
message : function(frame, e){

this.status.setText(e.data);
this.msgMode == 1
? frame.sendMessage('Good to Hear '+ e.origin,'ACK')
: frame.postMessage('Good to Hear' );

this.status.setText.defer(1000, this.status, ['Waiting..']);
}

}
});

heartBeat.show();

Hosted page:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Frame Messaging Sample</title>
<script type="text/javascript">

window.messageMode =1;

window.startup= function() //called by Hosting page when domready is detected
{
var logger, timer;

function logit(msg, tag){

logger || (logger = document.getElementById('log'));
if(logger){
var n = document.createElement('div');
var host = window.hostMIF ? window.hostMIF.ownerCt.id : 'None ';
logger.appendChild(n);
n.innerHTML = new Date().getTime() + ' - ' +host + ' says: ' + (msg.tag || tag || '')+ ' : ' + (msg.data || msg);
}

};

/*
* Set up the HTML listener
*/
window.addEventListener
? window.addEventListener("message", function(e, a, b){
//if ( e.origin !== "http://demos.theactivegroup.com" ) return;
logit(e);
},
false)
: window.attachEvent('onmessage', function(event){
logit(event, event.origin);
});

/*
* Set up the MIF listener
*/
window.onhostmessage && onhostmessage (logit, window, false, 'ACK' );

(timer = setInterval ( function(){

var notice = 'Frame for '+window.hostMIF.ownerCt.id + ' Is alive' ;
if(window.messageMode ==1){
//using MIF.sendMessage with 'heartbeat' tag.
sendMessage('sendMessage: ' + notice , 'heartbeat');
} else {

//Using parent.postMessage allowing any origin
parent.postMessage( 'postMessage: ' + notice , '*' );
}

},5000)) && logit('Bound');


};

</script>

</head>
<body>

<h1>Host Page responses</h1>
<div id="log" ></div>

</body>
</html>

hat27533
5 Nov 2010, 6:58 AM
Hi,

Is there a extjs v3.3.0 compatible version planned?

After2050
16 Nov 2010, 4:58 AM
Hi,

I'm facing a serious problem of using miframe in IE 8. I'm using extjs 3.1.1 version and included both the multidom.js & mif.js files (version 2.14). I've created a ManagedIframe panel for loading an iframe. After a certain time, say some seconds.. whenever I try to open any extjs window I'm getting the following error


Message: 'b[...].data' is null or not an object
Line: 7
Char: 37450
Code: 0
URI: http://localhost:5555/Scripts/ext-3.1.1/ext-all.js

I'll be very thankful if someone helps me to solve this problem. I think the problem is in multidom.js.

Thanks & Regards
Dnana

Capt.JackSparrow
16 Nov 2010, 5:11 AM
Could you try disabling the garbage collector:

Ext.enableGarbageCollector = Ext.isIE


Hi,

I'm facing a serious problem of using miframe in IE 8. I'm using extjs 3.1.1 version and included both the multidom.js & mif.js files (version 2.14). I've created a ManagedIframe panel for loading an iframe. After a certain time, say some seconds.. whenever I try to open any extjs window I'm getting the following error


Message: 'b[...].data' is null or not an object
Line: 7
Char: 37450
Code: 0
URI: http://localhost:5555/Scripts/ext-3.1.1/ext-all.js

I'll be very thankful if someone helps me to solve this problem. I think the problem is in multidom.js.

Thanks & Regards
Dnana

After2050
16 Nov 2010, 5:52 AM
Jack,

This what I did,

Ext.enableGarbageCollector = !Ext.isIE;

The problem solved man. Thankssssss a lot. I've a doubt do this create any other problems like performance issues in IE?