PDA

View Full Version : Ext.ux.ManagedIframe 4.0 alpha2 for Ext 4.x



hendricd
15 Jun 2011, 5:00 PM
Well, I figured it's time to get this rolling again!

With all the new goodies built into Ext 4 now, I'm able to shed a fair amount of baggage originally required to maintain compatibility for legacy Ext releases (1-3.x). The suite will be much lighter-weight than previous version without sacrificing too many features.

A few words about the Alpha Roadmap:

Alpha 1 provides a basic MIF.Component only, with simple support for masking, shimming (during resizing and the presence of overlayed menus) and event bubbling. There will be no Panel, Window, or Portlet subclasses (an inheritance nightmare that does little more now than bloat your code!). Simply nest the Component in any layout!

Alpha 2 (targeted for early-July) will introduce:

ux.ManagedIframe.Element.

This class will add additional support for:

Normalized 'dataavailable' and 'load' events (formerly the 'domready' and 'documentloaded' events) for all browsers as well as the legacy focus, blur, resize, and other events.

DOM Flyweight, DOMQuery, and Event listeners against the frame's DOM.
Traditional submitAsTarget (forms), script/function/css injection methods found in the previous releases.

CMS and report-generation fans can Load and write Ajax-based/structured (or template-fed) content directly into their iframes for isolated printing, etc.

Alpha 3 (late July) will re-implement a messaging abstraction of postMessage etc (again for all browsers).

In an effort to keep the example simple to use, just expand the zip file right into the /examples folder of your Ext 4 distribution and run it!

So, what happened to MIF 3 you say? Skipped it altogether! Easier for all to match up the right releases! ;)

I'll update this thread as the features roll out, so stay tuned! The beta release will move the code-base up to the existing google.code/SVN repositories.

Please let me know about issues, recommendations, and ideas!

Latest download can be found here (http://www.sencha.com/forum/showthread.php?137233-Ext.ux.ManagedIframe-4.0-alpha2-for-Ext-4.x&p=621353&viewfull=1#post621353).

AJ1989
16 Jun 2011, 5:02 AM
Can tell me one how i use the frame?? How i have it to bind it in my index.html?

hendricd
16 Jun 2011, 6:46 AM
@AJ1989 --

I'm not really sure what you are asking.

Is it:
How do I load my (index.html) page into the ManagedIframe component? or,
How do I build an Ext 4 project that uses the ManagedIframe component?

AJ1989
16 Jun 2011, 6:54 AM
I want to use the component in my project but i dont know. Thanks for helping

hendricd
16 Jun 2011, 12:23 PM
I want to use the component in my project but i dont know. Thanks for helping

@AJ--
The extensions forums are likely not the best place to get started on your first Ext project. Have you downloaded the SDK and perused the various examples?

Short of that, I'd recommend you begin your journey here (http://www.sencha.com/learn/Tutorial:Ext_StartUp_Guide).

gelleneu
16 Jun 2011, 10:23 PM
Is there any support for Drag/Drop planned? Use case: Drag an Element from the Parent (ExtJS) GUI into an defined place in the Iframe, and other direction (Drag from the Iframe Content into a list or tree of the parent doc.

hendricd
21 Jun 2011, 4:08 AM
Is there any support for Drag/Drop planned? Use case: Drag an Element from the Parent (ExtJS) GUI into an defined place in the Iframe, and other direction (Drag from the Iframe Content into a list or tree of the parent doc.

@gelleneu --

It's something I came very close to achieving in the previous release. The focus on this release is to create a richer event model that will eventually support that type of interaction. Got any experiments you'd like to share/pitch?

hendricd
1 Jul 2011, 8:24 AM
As roadmapped, MIF-alpha2 is now available.

To see things in action, simply expand the zip file into your /examples folder of your Ext 4 distribution.

Notes:

Work left to do: CSS module, messaging.
Minimal testing done at this stage on Opera.?

Study the mif.js demo script fully to see what all is going on. :-?

pkli
1 Jul 2011, 1:21 PM
Hi Doug,

Great work !

A quick test on Chrome Mac 12.0.742.100 and a bug report : sometimes, click on Iframe do not dismiss menu.

To reproduce issue :
- click on "Other sites", menu is displayed.
- move mouse outside button/menu but do not click anywhere.
- put the mouse again over the menu button : the tip is displayed.
- now, click in the iframe, the menu does not disappear.

hendricd
1 Jul 2011, 1:55 PM
Hi Doug,

Great work !

A quick test on Chrome Mac 12.0.742.100 and a bug report : sometimes, click on Iframe do not dismiss menu.

To reproduce issue :
- click on "Other sites", menu is displayed.
- move mouse outside button/menu but do not click anywhere.
- put the mouse again over the menu button : the tip is displayed.
- now, click in the iframe, the menu does not disappear.

@pkli --

Thanks for the report. I've already added internal shim-request count support to combat that problem. Look for it in the next alpha/beta.

DamianHartin
8 Jul 2011, 4:17 AM
yay =D> Thanks Doug :)

Very much enjoyed the previous incarnations, so looking forward the new version - great work!

nero00
21 Jul 2011, 8:13 AM
Very awesome. Thank you for this!

Few questions. My goal is to have a mini-browser in the Ext4 desktop example. I'm sort of a noob to Extjs so I might have the answer sitting right in front of me.

How can I have navigation buttons: refresh, back, forward ?

hendricd
25 Jul 2011, 4:56 AM
Very awesome. Thank you for this!

Few questions. My goal is to have a mini-browser in the Ext4 desktop example. I'm sort of a noob to Extjs so I might have the answer sitting right in front of me.

How can I have navigation buttons: refresh, back, forward ?

@nero00-

Just add a couple more button handlers to the example:


{
text : '<< Back',
handler : function(button){
var MIF = Ext.ComponentQuery.query('#mifhost > miframe')[0];
if(MIF) {
MIF.getContentTarget().getWindow().back();
}
}
},
{
text : 'Forward >>',
handler : function(button){
var MIF = Ext.ComponentQuery.query('#mifhost > miframe')[0];
if(MIF) {
MIF.getContentTarget().getWindow().forward();
}
}
},

{
text : 'Refresh',
handler : function(button){
var MIF = Ext.ComponentQuery.query('#mifhost > miframe')[0];
if(MIF) {
MIF.getContentTarget().setSrc();
}
}
}
But, note that these will only work for same-origin frames.

nero00
25 Jul 2011, 5:18 AM
Thank you very much for taking the time to do that Doug! Myself and others will find it very useful! Ty again it works great. :)

paubach
28 Jul 2011, 12:32 AM
Thanks for moving it to 4 Doug.

I'm having a problem, and I'd say it's a bug (or maybe I'm missing something or doing something bad).

I'm creating some MIFP in some tabs of a tabpanel.

That's the tabpanel


title: 'Web Accounts',
xtype : 'tabpanel',
id: 'wAccounts'
And that's the part where I create the tabs:


Ext.getCmp('wAccounts').removeAll();
for (var i=0; i < eu.length; i++)
{
Ext.getCmp('wAccounts').add({html:'miframe'+eu[i],closable:true,autoRender:true,title:eu[i]})
Ext.getCmp('wAccounts').add({xtype:'miframe',closable:true,autoRender:true,src:'https://domino-core.qad.com/zDev/DEVregistration.nsf/RegAcctCAP?OpenForm&login&customer_nbr='+eu[i], title:eu[i]})
}eu.length = 2. So, I'm generating 4 tabs. 1st and 3rd with normal content (testing purposes) and 2nd and 4th are MIFP.

I can see 1st panel's content, as it loads first. I can then see other tabs content (Normal untill here). BUT once I see/open the first MIFP, I can't see any other panel content. It doesn't matter if it is a normal or MIF panel.

I solved it by adding the MIFP inside a panel:

Ext.getCmp('wAccounts').add({closable:true,autoRender:true, title:eu[i],items:{xtype:'miframe',src:'https://domino-core.qad.com/zDev/DEVregistration.nsf/RegAcctCAP?OpenForm&login&customer_nbr='+eu[i]}})
But wanted to report it anyway.

hendricd
29 Jul 2011, 4:40 PM
@paubach --

yes, I guess you learned the hard way.

MIF no longer comes in Window, Panel, or portlet formats any more. Component only!
So, for Tabpanels, you'll want to wrap your MIF's in 'fit' panel (with autoScroll: false)!

koblass
17 Aug 2011, 8:16 AM
Hi,

Basically what I'm trying to do is the following :

I want to create a component (in my main application) and "attach" this component to a dom node present in the iframe. So for instance if I load a page with the following html code


...
<body>
<div id="test" style="position:absolute;top:200px;left:200px;width:200px;height:200px">Test div</div>
</body>
...

Then what I would like to do is create a component in my application and attach this component to the "test" div.
So I can do something like this :


component = Ext.create('Ext.Component', {style:{position:'absolute', top:0, bottom:0, left:0, right:0}});
component.render(Ext.get('ext-gen1068').get("test"));
component.on('click', function(e, target){
console.log('I clicked on my component !');
}, component);


So basically I create a component positioned in absolute in order to "cover" the div and I want this component to be attached to the iframe dom model, but I want this component to be aware of the events present in the application (like click, drag&drop, etc...)

So I tried this code and I get an error due to the element cache reference missing.
This is solved by adding the following line of code (which doesn't always work, don't know why...)


Ext.core.Element.addToCache(component);

So this is working, I've attached my component to my div, but when I click on by component nothing is displayed on my console :-(

How can I do this ?

Best regards
Daniel

hendricd
31 Aug 2011, 6:09 AM
@Daniel:

The Component class by itself does NOT have click event support (as it could not possibly know what your real event target should be).

Tell it:



var frameDiv = yourMIF.get('test') || yourMIF.getBody();

var component = Ext.create('Ext.Component', {
style:{position:'absolute', top:0, bottom:0, left:0, right:0},
renderTo : frameDiv,
listeners : {
click : {
element : 'el',
fn : console.info
}
}
});

McQuack_82
1 Sep 2011, 8:30 AM
I'm attempting to insert html into a managed iframe after the frame is load via the load event using the update function passing a html block into the function. My Iframe.aspx is just a placeholder to wrap the content correctly. I used your previous versions and have been very pleased. I really like some of the new functionality that you have added to the new code. I'm guessing my implantation is wrong.


var MIF = {
xtype: 'miframe',
border: false,
id: 'iframePanel',
bodyBorder: false,
defaultSrc: 'aspx/Iframe.aspx',
listeners: {
load: function (frame) {
console.log(frame);
console.log(this);
console.log(html);
this.update(html);
}
}
};


var printPanel = {
itemId: 'printPanel',
xtype: 'panel',
border: false,
items: MIF
};


var printWindow = new Ext.Window({
height: 600,
width: 800,
modal: true,
title: 'test',
items: printPanel,
plain: true,
border: false,
resizable: true,
draggable: true,
closable: true,
buttonAlign: 'center',
buttons: [{
text: 'Close',
handler: function () {
printWindow.close();
}
},
{
text: 'Print',
handler: function () {
//Ext.getCmp('iframePanel').getFrame().getWindow().print();
}
}]
});
printWindow.show();

hendricd
1 Sep 2011, 9:38 AM
@Mc_Quack:

Be mindful of the fact that MIF.update replaces the entire document of the IFRAME. Your wrapper ASPX just didn't survive very long. ;)

Consider this one a bit:



{ xtype: 'miframe',
border: false,
id: 'iframePanel',
bodyBorder: false,
defaultSrc: 'aspx/Iframe.aspx',
listeners: {
dataavailable : { //raised when the document DOM is ready (same-origin only)
element : 'frameElement', // MIFElement reference
fn : function(e, target){

var fly = this.fly('loaded-wrapper-div'); //the loaded container to update
if( fly){
fly.update('<markup />');
}
}
}
}
};

Also, there is no need to over-nest the Component in another Panel, then a Window. Just make it a single item of a 'layout:fit' Window. And be sure to set autoScroll: false on the Window (or unnecessary Panel) ;).

SMMJ_Dev
3 Sep 2011, 5:31 AM
I don't know if anyone is aware of this or has tried it, but I have ran into a bug. In IE7 (IE7 Browser Mode and IE7 standards Document Mode for those IE9'ers), if you have the HTML property set of the ManagedIframe panel you will get an error on the page, and the panel will take over the entire screen.

This isn't too big of a deal, because you can work around this by simply creating an HTML page to load into the IFRAME w/ whatever text you want in there.

I was just afraid that I would had to scrap the plugin because it wasn't working with IE7 until I figured out what caused the issue. So I figure I would let everyone know here of a slight bug and the workaround so people are more willing to use this if they encounter the same issue I did.

PROBLEM: When setting the HTML on the ManagedIframe panel, the HTML will take over the entire screen. This only happens in the IE7 and possibly IE8 browser. This is not a problem with Firefox, Chrome, or IE9.

SOLUTION: Use your own HTML page and load the IFRAME with your HTML page instead of specifying HTML to the ManagedIframe panel.

I probably should not have set HTML in the first place, but it threw me off when it worked with FF, Chrome and IE9.

I hope this can help someone out so they do not spend too much time here trying to figure out what is going on for this situation.

Also, I love the plugin and it works great. It properly sizes and loads. It's easy to plug into Ext. My favorite thing about it is the loading as the page inside loads. :)

Keep up the good work!

paubach
15 Sep 2011, 1:31 AM
I'm getting an error in IE 9 (also happened in 8, but couldn't test in 7) when loading the iframes:


SCRIPT438: Object doesn't support property or method 'isDocument'
ManagedIframe.js, line 479 character 13

This doesn't happen in FF or Chrome. Any suggestion?

Thanks,
Pau

MikeB
23 Sep 2011, 4:51 AM
I'm seeing the same thing Pau and I'm using IE 7 (Version 7.0.6002.18005).


I'm getting an error in IE 9 (also happened in 8, but couldn't test in 7) when loading the iframes:


SCRIPT438: Object doesn't support property or method 'isDocument'
ManagedIframe.js, line 479 character 13

This doesn't happen in FF or Chrome. Any suggestion?

Thanks,
Pau

SMMJ_Dev
25 Sep 2011, 8:13 AM
I've been having the same issues. It's hard to use this plugin, and I've been finding I have to create custom fixes per page. It's weird, I'm getting issues in which my javascript code is not running in the parent window but inside a frames or something.

This only happens in IE for me also. I started putting parent.(whatever) in front of my javascript calls through a bit of trial and error and am able to fix some of the issues. I also defer the script.

What I think your error is, is that Ext.isDocument is getting called probably through some other function but when Ext.isDocument is evaluated it is getting evaluated inside a frame that doesn't know about the Ext framework. I can't verify this, but sometimes I get odd things happening that is similiar to what you two are seeing.

hendricd
4 Oct 2011, 3:42 AM
@SMMJ_Dev, MikeB, Paubach,

Can you guys shed some light on your use cases?

Are you hosting an Ext 3/4 page inside the frame and calling back out to the parent? What sort of interactions are involved?

Still scratchin my head over this one... ;)

paubach
7 Oct 2011, 7:57 AM
Hi Henri,
It's a simple page, without Ext JS, calls to the parent or anything... It's very simple...

paubach
11 Oct 2011, 8:08 AM
Well, as I told you here (http://www.sencha.com/forum/showthread.php?137233-Ext.ux.ManagedIframe-4.0-alpha2-for-Ext-4.x&p=630729&viewfull=1#post630729) what I have is a MIFP inside a panel. Maybe that's causing the problem?

rkim
3 Nov 2011, 3:27 PM
created ManagedIFrame in the center region of border layout.

var MyMIF = new Ext.ux.ManagedIframe.Component(
{
id:"mainFrame",
name:"mainFrame",
frameborder:"0",
autoMask:false
});

I am opening html page in iframe succesfully using setSrc() method.

Now.. I am trying to call the javascript within the iframe. How do I access it ?
I have tried
MyMIF.getContentTarget().getDoc() to access Document of the iframe document.
but getting Ext.isDocument is not a function error showing up

hendricd
3 Nov 2011, 5:11 PM
@rkim -- Could you post your code fragment surrounding your attempt:


MyMIF.getContentTarget().getDoc()

Also, did you also include the zip-enclosed multidom.js in your page? It is required.

rkim
4 Nov 2011, 9:11 AM
@rkim -- Could you post your code fragment surrounding your attempt:


MyMIF.getContentTarget().getDoc()

Also, did you also include the zip-enclosed multidom.js in your page? It is required.

Thank you !! Works great now. You saved the day.
Just couple of more question . :)

1) Now from outside iframe, I call below to access script in iframe document.


MyMIF.getContentTarget().getDoc().dom.iframefunction();


//Iframe
<script>
Ext.onready()
{
document.iframefunction = function()
{
alert("Test");
}
}
</script>


Is above the recommended way of accessing functions in iframe document ?

2) Is there any performance issue of loading each page in ManagedIframe?

3) Is there any document that I can reference other than looking at code ?


Thanks again for great work !!

hendricd
4 Nov 2011, 1:16 PM
@rkim--

Iframe page loading is asynchronous. So, use the listeners : { } to wait for the dataavailable event to fire, THEN interact with the frame document (see the example page included in the zip for other samples)




{
xtype : 'miframe',
src : 'yournestedExtpage.html',

listeners: {
dataavailable : { //raised when the document DOM is ready (same-origin only)
element : 'iframeElement', // MIFElement reference
scope : 'iframeElement'',
fn : function(e, target){
var win = this.getWindow();
if( win){
if( win.Ext && win.MyApp ) {
win.MyApp.iframefunction();
}
}
}
}
}
}



1) Is above the recommended way of accessing functions in iframe document ?

Never add (expando) new methods/props on the document object. If you are truly loading ANOTHER Ext page into the frame, setup a namespace to keep your variable and functions:
//

yournestedExtpage.html

<script>
Ext.onReady()
{
Ext.ns ( 'MyApp' );
MyApp.iframefunction = function()
{
alert("Test");
}
}
</script>



2) Is there any performance issue of loading each page in ManagedIframe?

Yes, IFRAMEs are expensive to operate. Use them to isolate CSS/bad behavior from your parent page. There are good reasons to use them (adWare, media, PDFs, mashups/portals, legacy App migration, etc), but they do take their toll.

3) Is there any document that I can reference other than looking at code ?

My signature block below has links the documentation site and FAQ for the previous release. As this is still an Alpha release, there is not yet official docs for this version yet. There are several new feature but the MIF.Element methods are largely the same.

Study the zip-enclosed mif.js example closely. Much can be garnered from that.

Good hunting ;)

rkim
4 Nov 2011, 1:47 PM
@rkim--

Iframe page loading is asynchronous. So, use the listeners : { } to wait for the dataavailable event to fire, THEN interact with the frame document (see the example page included in the zip for other samples)




{
xtype : 'miframe',
src : 'yournestedExtpage.html',

listeners: {
dataavailable : { //raised when the document DOM is ready (same-origin only)
element : 'iframeElement', // MIFElement reference
scope : 'iframeElement'',
fn : function(e, target){
var win = this.getWindow();
if( win){
if( win.Ext && win.MyApp ) {
win.MyApp.iframefunction();
}
}
}
}
}
}



1) Is above the recommended way of accessing functions in iframe document ?

Never add (expando) new methods/props on the document object. If you are truly loading ANOTHER Ext page into the frame, setup a namespace to keep your variable and functions:
//

yournestedExtpage.html

<script>
Ext.onReady()
{
Ext.ns ( 'MyApp' );
MyApp.iframefunction = function()
{
alert("Test");
}
}
</script>



2) Is there any performance issue of loading each page in ManagedIframe?

Yes, IFRAMEs are expensive to operate. Use them to isolate CSS/bad behavior from your parent page. There are good reasons to use them (adWare, media, PDFs, mashups/portals, legacy App migration, etc), but they do take their toll.

3) Is there any document that I can reference other than looking at code ?

My signature block below has links the documentation site and FAQ for the previous release. As this is still an Alpha release, there is not yet official docs for this version yet. There are several new feature but the MIF.Element methods are largely the same.

Study the zip-enclosed mif.js example closely. Much can be garnered from that.

Good hunting ;)


Thanks for the info !!

pkli
9 Dec 2011, 6:33 AM
Hi Doug.

No news about alpha 3 ?
Or maybe an alpha 2b resolving the "hide menu on click in iframe" bug ? :-)

Phil

rkim
3 Jan 2012, 11:09 AM
Hi Doug,

I have just upgraded the ext to 4.1 and seems to have some issue with multidom.js
I will take a look as well where the problem is.. if you see the problem, can you let me know ??


http://www.sencha.com/forum/showthread.php?137233-Ext.ux.ManagedIframe-4.0-alpha2-for-Ext-4.x

hendricd
3 Jan 2012, 6:38 PM
Hi Doug,

I have just upgraded the ext to 4.1 and seems to have some issue with multidom.js
I will take a look as well where the problem is.. if you see the problem, can you let me know ??



@rkim --

MIF 4.0/multidom is NOT compatible with 4.1.anything.

That said, MIF 4.1 is undergoing testing under the 4.1-beta (as the internals have changed considerably in that release). If you are not using Ext.core.Element methods to query/manipulate IFRAME documents you can probably continue to use the 4.0 version of the MIF component only -- until MIF 4.1 is released....

rkim
5 Jan 2012, 3:33 PM
Thank for your response.
Just wondering the roadmap for MIF 4.1 ?


@rkim --

MIF 4.0/multidom is NOT compatible with 4.1.anything.

That said, MIF 4.1 is undergoing testing under the 4.1-beta (as the internals have changed considerably in that release). If you are not using Ext.core.Element methods to query/manipulate IFRAME documents you can probably continue to use the 4.0 version of the MIF component only -- until MIF 4.1 is released....

mfalnes1
19 Jan 2012, 2:00 PM
Receiving the error "dom.getBoundingClientRect is not a function" (ext-all-debug.js line 8849) when trying to re-size a panel and the javascript file multidom.js is included. The resizing works fine when the multidom.js is NOT included. I am using ext-js 4.0.7. Is this a known issue? Any other ideas?

Attached is a zip file containing an html file which can be dropped into the ext-js examples folder. The panel is resizable on the south border. With the multidom.js included in the html then the resizing does not work. Remove the multidom.js and the resizing will work.

Thanks for your help.

hendricd
19 Jan 2012, 6:33 PM
@mfalnes1 --

Thanks for the report. I'll run some tests.

On what browser(s) are you seeing this behavior?

mfalnes1
20 Jan 2012, 6:37 AM
Thanks Doug,

I was able to replicate the issue in Chrome, Firefox and IE 9. IE9 is giving a different error.

SCRIPT5007: Unable to get value of the property 'overflow': object is null or undefined
ext-all-debug.js, line 8829 character 17

Also my previous example had a problem in IE and I have attached an updated example.

Thanks for your help.

hendricd
20 Jan 2012, 6:42 AM
Fix this first:



items : [{
xtype : 'panel',
border : true,
height: 400,
layout : 'fit',
html: 'Resizable Panel',
resizable: {
handles: 's',
pinned: true,
minHeight: 100,
maxHeight: 1000
}, <----- Extra what?
}]

mfalnes1
20 Jan 2012, 7:06 AM
Sorry Doug, I attached the wrong zip file. Try this one.

Thanks again.

hendricd
20 Jan 2012, 9:07 AM
@mfalnes1 --

Found it (Competing Flyweights)!

Use this multidom.js override (MIF 4.0 alphas and Ext 4.0.x only people!), whilst I prepare Alpha 3 ;)




Ext.core.Element.getXY = function(el) {

var fly = (el && el.dom) ? el : Ext.fly(el),
p,
pe,
b,
bt,
bl,
x = 0,
y = 0,
scroll,
hasAbsolute,
styles,
doc = fly.getParentDocument(),
bd = (doc.body || doc.documentElement),
ret = [0,0];

el = fly.dom;

if(el && el != doc.body && el != doc.documentElement){
hasAbsolute = fly.isStyle("position", "absolute");

if (el.getBoundingClientRect) {
b = el.getBoundingClientRect();
scroll = Ext.fly(doc, '_docs').getScroll();
ret = [Math.round(b.left + (scroll.left || 0) ), Math.round(b.top + (scroll.top || 0))];
} else {
p = el;

while (p) {
pe = Ext.fly(p, '_parents');

x += p.offsetLeft;
y += p.offsetTop;

hasAbsolute = hasAbsolute || pe.isStyle("position", "absolute");

if (Ext.isGecko) {
styles = pe.getStyles("borderTopWidth","borderLeftWidth","overflow") || {};
y += bt = parseFloat(styles.borderTopWidth) || 0;
x += bl = parseFloat(styles.borderLeftWidth) || 0;

if (p != el && styles.overflow != 'visible') {
x += bl;
y += bt;
}
}
p = p.offsetParent;
}

if (Ext.isSafari && hasAbsolute) {
x -= bd.offsetLeft;
y -= bd.offsetTop;
}

if (Ext.isGecko && !hasAbsolute) {
styles = Ext.fly(bd, '_bodyStyle').getStyles("borderLeftWidth", "borderTopWidth") || {};
x += parseFloat(styles.borderLeftWidth) || 0;
y += parseFloat(styles.borderTopWidth) || 0;
}

p = el.parentNode;
while (p && p != bd) {
if (!Ext.isOpera || (p.tagName != 'TR' && !Ext.fly(p, '_parents').isStyle("display", "inline"))) {
x -= p.scrollLeft;
y -= p.scrollTop;
}
p = p.parentNode;
}
ret = [x,y];
}
var flies = Ext.Element._flyweights;
delete flies['_parents'];
delete flies['_bodyStyle'];
delete flies['_docs'];
}
return ret;
};

mfalnes1
20 Jan 2012, 10:57 AM
Thanks Doug. That worked. I appreciate the quick turn around.

petersm
15 Feb 2012, 11:01 PM
Any idea when alpha 3 will be done?
I could really use the messaging functionality.

andynuss
7 Mar 2012, 6:49 AM
Hi Doug,

I have a couple questions: for a simple mif panel, is 'documentloaded' and 'scroll' and 'resize' events as with 3.x?

Also, I want to do a login frame and registration frame in an extjs window which is secure (https) with mif if possible. I don't want to leave my application and go to a non-extjs looking standalone webpage. What do you recommend?

Andy

bnuy1y2
11 Mar 2012, 10:19 PM
#1
I used documentloaded event provided by alpha1.
But why there is no such event in alpha2?
Then I fire it myself. I don't know if it will make some impacts.

#2
Another thing is,
meeting a js bug in IE7:

return Ext.isDocument(doc, assertAccess !== false) ? doc : false;

I use MS Js debugger. it stop in this line.
IE7 says the property or method is not exist.

hendricd
13 Mar 2012, 5:43 PM
@bnuy1y2, @andynuss --

Ext.isDocument is a method provided by multidom.js (it must be loaded BEFORE the managediframe.js script.

MIF4 emits new native (well sort of) DOM events.

In previous MIF releases this event:

was ----------------- is now simply
domready ---------- dataavailable
documentloaded -- load

scroll, resize, focus, and blur events are also carried forward to MIF4.

hendricd
13 Mar 2012, 5:46 PM
Hi Doug,

I have a couple questions: for a simple mif panel, is 'documentloaded' and 'scroll' and 'resize' events as with 3.x?

Also, I want to do a login frame and registration frame in an extjs window which is secure (https) with mif if possible. I don't want to leave my application and go to a non-extjs looking standalone webpage. What do you recommend?

Andy

@Andy--

Same-origin-browser-barking in that scenario (http vs https, if applicable) may create some noise. In a mixed domain environment such as that, you won't have much interactive capability with the FRAME document, but that may not be necessary unless your cookies (from the https domain) hold the session keys.

extremed
22 Mar 2012, 6:44 AM
any idea how to show loading message while source is loading into iframe?

nevermind , found that setSrc method already showing load mask

Scorpie
3 Apr 2012, 5:03 AM
Hi Hendricd, did you ever get around implementing drag&drop functionality? I have a use case in which I need to drop items from a dataview to a panel which contains an Iframe. Any thoughts?

Regards

franck87
3 Apr 2012, 1:51 PM
Hello Scorpie,
I have been working on the D&D for iframe for a while now which I needed for my app: WIDGaT (http://github.com/arc-teesside/WIDGaT)
The only solution I found was to register a script in the dom of the document in the frame which relay the mouse events to the top window (might cause cross domain problems).
Here is a link to the script I'm using:
https://github.com/arc-teesside/WIDGaT/blob/master/temp/TimerTemplate/scripts/editorlib.js
(https://github.com/arc-teesside/WIDGaT/blob/master/temp/TimerTemplate/scripts/editorlib.js)This only works on Firefox and Chrome so far, IE uses a different way of firing events (looking into it).
It's the first time I'm using ExtJS and it's a pretty big app so the code is most definitely not optimised but I'm doing exactly what you are looking for so keep looking you'll probably find what you need :)
Franck.

Scorpie
4 Apr 2012, 9:30 AM
Thanks Frank!

Hm, I have taken a different approach yet I am stuck.

You can see what I tried to do @ http://supranet.dyndns.org/VAM/viewport.html

Basically its a viewport with a center panel thats loaded with MIF4.0A2, in which a HTML page containing a fabricjs instance is loaded.

You can try for yourself, the drag&drop does 'work', however its buggy as hell. I tried different DropTargets on different levels, to no avail.

Any tips are welcome :)

franck87
4 Apr 2012, 3:24 PM
Hi Scorpie,

I am not familiar with fabricjs but according to what I saw in your app, the drag stops as soon as you enter the iframe; I think this is because you don't forward the mouse events to the top document. I only tried it on Chrome but I think you need to register mouse listeners on the document within the iframe to relay at least the following events:
- document.mousemove
- document.mouseup
to the top document (top.document).

If you look at my code, the coordinates I send to the top document include the width and height of the borders of the container of the MIFrame component (hardcoded) to avoid a "jump" on the thumbnail when dragging.

Hope it helps,

F.

Scorpie
5 Apr 2012, 4:04 AM
Thanks Franck, i`m diving into it.

Scorpie
5 Apr 2012, 7:15 AM
So..............i`ve managed to get it working for a great deal. The only thing I cant wrap my head around now is the fact that there is no onNodeDrop event being fired whenever the node from the Dataview is dropped on the canvas. I dont know if this is fabricjs related, will check it out.

Another frustrating bug is the fact that my Firefox & Firebug combo crashes everytime I do a refresh on my current viewport. Something that I need to fix :-?

Anyway, I`ve updated the code @ the URL I mentioned, so if anybody sees why my nodedrop event doesnt get fired, please do tell :)

nicholas.hamming
12 Apr 2012, 11:49 AM
Hi Doug,

Thanks for all your hard work! I took a look at the 2.1.5 version of getFrameDocument(), and it looks like this:


getFrameDocument : function() {
var win = this.getWindow(), doc = null;
try {
doc = (Ext.isIE && win ? win.document : null)
|| this.dom.contentDocument
|| window.frames[this.dom.name].document || null;
} catch (gdEx) {

ELD.clearDocumentCache && ELD.clearDocumentCache(this.id);
return false; // signifies probable access restriction
}
doc = (doc && Ext.isFunction(ELD.getDocument)) ? ELD.getDocument(doc,true) : doc;

return doc;
}



The alpha2 version is this:



getFrameDocument : function(assertAccess) {
var win = this.getWindow(), doc = null;
try {
doc = win.contentDocument || this.dom.contentDocument || window.frames[this.dom.name].document || win.document;
} catch (gdEx) {
doc = false; // signifies probable access restriction
}
return Ext.isDocument(doc, assertAccess !== false) ? doc : false;
}


It looks like the Ext.isIE shortcut in the 2.1.5 version is removed from the alpha2 version, and I believe this is causing issues with running in IE in Quirks mode.

What is happening for me is that the parent document, not the iframes document, is being returned from the
window.frames[this.dom.name].document call. The
win.document property has the correct reference to the iframe document, but in the alpha2 code, that code isn't reached.

Is this an intentional decision that you made?

Cheers,
Nicholas

smcguire36
18 Apr 2012, 5:12 AM
Does this MIF work with the ExtJS 4.1 RC3?

kutiarul
8 May 2012, 6:48 AM
Hi,

we are getting error as (a.replace is not a function), when try to use the MI A2 with Extjs 4.1 final release.

Please let us know when we could get the latest version of MI, which could work with Extjs 4.1 code line.

Thanks in advance.

Regards,
Soosai

dady1981
14 May 2012, 6:20 AM
Hi guys, i've a big problem (maybe it's only because my newbie level :)) ).
I've a simple function wich create a window with a miframe inside; inside that i open a binary stream to see a pdf document.
If i open the page in chrome everything goes ok, but if i use ie and ff, the iframe content is resized on his height; it happen also if a open a webpage instead a pdf stream...
Behind you can see both my code and problem, maybe someone can help me.
Thanks in advice =;

Davide



function mostraWin(){
if(!Ext.getCmp('finestraPdf')){
Ext.create('Ext.window.Window', ({
id: 'finestraPdf',
constrain: true,
height: 600,
width: 1000,
title: 'PDF viewer',
draggable: false,
resizable: false,
items: {
xtype :'miframe',
title: 'PDF',
defaultSrc :'pdf/ritornaPdf.action'
}
})).show()
}
};





35194

hendricd
14 May 2012, 7:09 AM
@dady1981 --

Start with:


layout : 'fit'

in your Window !

hendricd
14 May 2012, 7:15 AM
@ALL

MIF 4.0x will NOT work with Ext 4.1!

Once again, as the internals of Ext 4.1 have changed, a new version of multidom.js will be required. I have started on the port, and should be releasing an Ext 4.1 specific version shortly.

In the interim (if your needs are simple) there is a lightweight IFRAME wrapper class available in /examples/ux/Iframe.js.

Will advise once I have a well-behaved version available for 4.1.

dady1981
14 May 2012, 7:16 AM
thanks, worked perfectly =D>

winkelmann
30 May 2012, 4:42 AM
I can't get it to work with ext-dev.js and Ext.Loader active ... does anyone else have the problem?

tocasu
31 May 2012, 9:51 AM
Hi Doug,

when you estimate to get done a functional release of ManagedIframe 4 for Ext 4.1.0 version ?
You said that a simplified version (for simple needs) exists on /examples/ux/Iframe.js. Can you give me a link please.

Thank you.

Ghitza.

bnuy1y2
26 Jun 2012, 9:46 PM
Why ManagedIframe works in my project with extjs4.1?
I use extjs4.1 protalpanel to contain ManagedIframe, and don't find any javascript ERROR.

seade
9 Jul 2012, 4:13 AM
Hi Doug,

I have an application that uses ExtJS 2.3 and managed iframe 1.2.3 (yes, I know there are way newer versions available).

On an iPad this application runs just fine except for the managed iframes that do not scroll.

While searching for advice I came across http://www.rahulsingla.com/blog/2011/11/extjs-and-iscroll-scrolling-ext-containers-on-touch-devices-ipad-iphone-etc-using-iscro#comment-1562 which suggested the use of iscroll on the content within the iframe. I gave this a try and is doesn't quite work; I can drag the content up and the content beyond the bottom of the iframe viewport comes into view, but it springs back down after I release the content.

Do you have any suggestions as to how to either get iscroll working on the managed iframe or alternatively to say patch managed iframe with the appropriate css to allow the scrolling to work on the iPad.

The alternative will be to upgrade the application to a newer version of ExtJS and managed iframe, but I was hoping to put this off for a more convenient time.

Thanks,

Scott

cfreak1986
22 Aug 2012, 6:58 AM
Hi Doug,

when will the new Version of ManagedIframe be released?

Waiting on the next Version which is working with 4.1.x.

Can you please give me some further informations?

Thanks a lot
Maximilian Kern

smcguire36
22 Aug 2012, 7:05 AM
If you don't need all the fancy bells and whistles of this extension, Sencha provides a bare bones implementation of an IFrame component in their Samples ux folder called IFrame.js. It works pretty well. I have been using it ever since I upgraded my ExtJS to 4.1.

cfreak1986
23 Aug 2012, 12:29 AM
Hey thanks for information,

but i really need the fancy bells... So this is not really an option for me.

Greets
Max

sidthegooner
29 Aug 2012, 11:57 PM
Hi Doug,

I'm not able to render jsp's from my local in my iframepanel,but if i run the url passed to the iframepanel in firefox it renders properly,why is this so??how should i achieve this??

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

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

alaindeseine
17 Sep 2012, 9:16 AM
Hi,

You say in a previous post (2012, may i think) that a new version of multidom.js is needed for ext 4.1.0, and you say it will comming soon.

Do you have news about it ?

I really need to use 4.1.0 because of a bug with another component and i also need iframe ...

My problem is one already describe in this post


prop.replace is not a function

this error seems to occur, when an array of css properties (here padding array) is in the prop parameter instead of a string.

Do you have any idea ?

Best regards.

Alain Deseine.

gregh
18 Oct 2012, 12:10 PM
Since it's been a while since there has been any activity on this thread I'm wondering if this will be available for 4.1 at any point or if it has been abandoned?

Thanks!

extremed
10 Nov 2012, 5:50 AM
any news on 4.1?

linyajun
16 Nov 2012, 7:02 AM
@AJ1989 --

I'm not really sure what you are asking.

Is it:
How do I load my (index.html) page into the ManagedIframe component? or,
How do I build an Ext 4 project that uses the ManagedIframe component?


i can not use it too
i mean which files should i to load in download files

linyajun
16 Nov 2012, 7:08 AM
which files to be loaded and Sequence exclude(ext-all.js,ext.css),
when fiels load how use in script, is (xtype:'iframepanel')

thank guys

use extjs4.1.3

dawesi
22 Nov 2012, 8:48 PM
any news on 4.1.x and/or Sencha Architect support?

dbrin
20 Dec 2012, 12:44 PM
bump any news for 4.1x

smokeman
13 Feb 2013, 6:56 AM
My extjs 4.1.1 apps won't load, with multidom.js
Please advise, need this desperately!

smokeman
27 Feb 2013, 9:50 AM
I'm launching an iframe window, with the print button in the toolbar. It prints image files just fine, but when a pdf is loaded, the print button does not work. Any suggestions?

here is what the print button handler is doing:

tbar : [
{
text : 'Print Window',
iconCls: 'print',
handler : function(button){
var MIF = Ext.ComponentQuery.query('#mifhostwin-'+id+' > miframe')[0];
if(MIF) {
MIF.getContentTarget().print();
}
}
}
],

here is the print section of the component:

print : function() {
try {
var win;
if( win = this.getWindow()){
Ext.isIE && win.focus();
win.print();
}
} catch (ex) {
//<debug>
var Err = this.statics().Error;
Err.raise(
{ msg : Err.message.printexception || ex.description || ex.message,
error : ex,
win : win
}
);
//</debug>
}
return this;
},

smokeman
28 Feb 2013, 12:55 PM
so what is everyone else subscribed to this thread doing, that needs to upgrade to 4.1.x?

krraghavan
18 Mar 2013, 11:31 AM
If I have a commercial license for Ext4.x can I use this component or is this a separate license?
Raghavan


As roadmapped, MIF-alpha2 is now available.

To see things in action, simply expand the zip file into your /examples folder of your Ext 4 distribution.

Notes:

Work left to do: CSS module, messaging.
Minimal testing done at this stage on Opera.?

Study the mif.js demo script fully to see what all is going on. :-?

smokeman
11 Apr 2013, 7:21 AM
yes, I'm bumping....we are still stuck at 4.0.7, and rely on this extension

smcguire36
11 Apr 2013, 7:24 AM
@smokeman - Have you tried the barebones IFrame.js extension that is in the ExtJS examples ux folder? I found that is does everything I need.

smokeman
14 Apr 2013, 9:32 AM
no, I wasn't even aware of it...thanks! I'll check it out.

smokeman
16 Apr 2013, 7:41 AM
it's funny that that file links to the ux.managediframe for extjs 3.x, and says for serious iframe work, use it.

smokeman
17 Apr 2013, 9:48 AM
just an update, we were able to use IFrame.js in the ux folder. Thanks for the tip!

andynuss
27 Apr 2013, 7:08 AM
I'm just starting to port my old 3.2 code to ext 4.1. I got the latest Alpha 2 release of the mif, and am wondering about the old mif.getFrame().get('someiframedomid') call.

Is this supported?

Thanks,
Andy

krause
7 Oct 2013, 4:48 PM
Do you have your source code in github or similar to avoid forum version hunt syndrome?
Did it came out of alpha?
Thanks.
As roadmapped, MIF-alpha2 is now available.

To see things in action, simply expand the zip file into your /examples folder of your Ext 4 distribution.

Notes:

Work left to do: CSS module, messaging.
Minimal testing done at this stage on Opera.?

Study the mif.js demo script fully to see what all is going on. :-?

nmorado
7 Jun 2014, 5:23 AM
where can we find the latest for MIF?

Thanks