PDA

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



Pages : 1 [2] 3 4

hendricd
13 Oct 2009, 12:41 PM
I think I found a bug. I'm using RC2, with 3.0.0 on latest firefox on linux.

First, get current. That release is 2 versions old. Try again with the latest (http://managediframe.googlecode.com/files/miframe2.zip).



Also, I noticed the following bugs of lessor importance to me, because I found workarounds:

1) I could never get scrollChildIntoView('myid') to work. Nothing happens, though there are no javascript errors reported. So I resorted to calculating positions and using javascript scrollTo() function.
After updating to 2.0 final, can you post a sample case somewhere?



2) when mif is asked to setSrc() to URL with a # anchor, the server is not hit (good), and the mif just scrolls the document. But domready listener is not invoked. This might be a feature, but I didn't expect it.
Try again after 2.0 final update.



3) when mif is asked to setSrc() to URL with an anchor, the focus/blur event mechanism of the mif becomes broken. Apparently, the focus is brought back to the mif, (from the find control that triggered the anchor scroll), but mif does not call the focus listener.
MIF merely relays the focus event of the frame window to you when the frame raises it (typically only occurs when the focus has somehow changed from not-focused to focused). That is the expected behavior.



4) focusOnLoad did not work for me, in that it did not cause my focus listener to be called.

Apply 2.0 Final, and see #3 above.

andynuss
13 Oct 2009, 1:18 PM
Hi Doug,

I tried the latest mif code, and got the same intermittent loss of the domready event callback.

I'll retry the other issues when I get a chance. But the main thing is that domready is infrequently but sometimes not being called.

Andy

hendricd
13 Oct 2009, 2:05 PM
Hi Doug,

I tried the latest mif code, and got the same intermittent loss of the domready event callback.

I'll retry the other issues when I get a chance. But the main thing is that domready is infrequently but sometimes not being called.

Andy

Might you have better luck (on Linux) with the documentloaded event instead? Without seeing what your OnDocumentLoad does, I'd be just guessing on anything else. :-?

andynuss
13 Oct 2009, 3:24 PM
Indeed I did have better luck. The documentloaded event never misfired. As to what I'm doing in the listener, I highlight page hits as my find button in the toolbar is clicked, and scroll into view if necesary. To verify that domready event misfired, I set a variable to null just before setSrc(), and set it to true at the very beginning of OnDocumentLoad function. Then, in firebug, when there is a misfire, my findnext function, when now triggered by a click, sees a null value for my debug variable instead of true, even though the page is clearly loaded. In any case, the "documentloaded" event always fires, so I'm good. I guess I was saying verbosely above, that even if my OnDocumentLoad handler were to do nothing but set a variable, it misses its call sometimes for the "domready" event.

By the way, I can guess your answer to be no, but is there any way for me to get an event of any kind when the user uses the vertical scrollbar in the mif panel (autoScroll : true) to scroll the window contents, causing some elements to go out of view and some to come into view?

andynuss
13 Oct 2009, 5:14 PM
Hi Doug,

I did some googling and found that there is support for catching onscroll events in iframes in browsers. Also found that jQuery offers ability to listen for this event. Is there any way you could take this as a feature request before you finish your release cycle?

Andy

paolocavelli
14 Oct 2009, 6:23 AM
Following code works using 2.0rc3 version but doesn't work with 2.0 version.
Clicking on a button I want to create a new tab containing an IFrame.
The first button creates the IFrame and uses setSrc() method.
The second one submits a html form using the new IFrame as target.
Using 2.0 version, the new IFrame isn't showed and the form submit opens a new window.
Any help?
Thanks.



<HTML>
<HEAD>
<script type='text/javascript' src='js/ext-3.0.2/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='js/ext-3.0.2/ext-all.js'></script>
<script type='text/javascript' src='js/ext-3.0.2/Ext.ux.ManagedIframe.2.0.js'></script>
<link rel='stylesheet' type='text/css' href='js/ext-3.0.2/resources/css/ext-all.css' />
</HEAD>
<BODY>
<SCRIPT LANGUAGE='JavaScript'>

function ClickMe1() {
var frameName = 'frameName1';
var iframePanel = new Ext.ux.ManagedIFrame.Panel( {
title: 'from click me 1',
header:false,
frameConfig: {name:frameName},
closable:true
} );
Ext.getCmp('me_tabs').add(iframePanel).show();
var url = 'http://www.google.com';
iframePanel.setSrc(url);
}

function ClickMe2() {
var frameName = 'frameName2';
var iframePanel = new Ext.ux.ManagedIFrame.Panel( {
title: 'from click me 2',
header:false,
frameConfig: {name:frameName},
closable:true
} );
Ext.getCmp('me_tabs').add(iframePanel).show();
var form = document.htmlForm;
form.target = frameName;
form.submit();
}

Ext.onReady(function(){

var tabPanelItems = [
];
tabPanelItems[tabPanelItems.length] = new Ext.Panel ({
title: 'tab 0',
disabled: false,
layout:'table',
items: [
{ xtype:'button', text:'click me 1', handler:ClickMe1 },
{ xtype:'button', text:'click me 2', handler:ClickMe2 }
]
});
var tabs = new Ext.TabPanel({
id: 'me_tabs',
activeTab: 0,
region:'center',
hideMode : !Ext.isIE ? 'nosize' : 'display',
deferredRender: false,
enableTabScroll:true,
items: tabPanelItems,
layoutOnTabChange: true
});

var win = new Ext.Viewport ({
id: 'me_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
tabs
]
});
});
</SCRIPT>
<FORM METHOD=GET ACTION='http://www.google.com' NAME=htmlForm>
</FORM>
</BODY>
</HTML>

hendricd
14 Oct 2009, 8:17 AM
@paolocavelli -- Frankly, I'm surprised this sample ever worked!

You are adding tabs improperly and not giving the IFRAME a chance to finish rendering before you try to submit the Form to it (thus, the new popup window is created because the IFRAME isn't rendered yet).

See adjustments:



<HTML>
<HEAD>
<script type='text/javascript' src='js/ext-3.0.2/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='js/ext-3.0.2/ext-all.js'></script>
<script type='text/javascript' src='js/ext-3.0.2/Ext.ux.ManagedIframe.2.0.js'></script>
<link rel='stylesheet' type='text/css' href='js/ext-3.0.2/resources/css/ext-all.css' />
</HEAD>
<BODY>
<SCRIPT type="text/javascript">

function ClickMe1() {
var frameName = 'frameName1';
var url = 'http://www.google.com';
var iframePanel = new Ext.ux.ManagedIFrame.Panel( {
title: 'from click me 1',
header:false,
frameConfig: {name:frameName}, //now optional, not necessary with latest release
closable:true,
defaultSrc : url //is set when the frame is rendered
} );
var tabs = Ext.getCmp('me_tabs');
tabs.setActiveTab(tabs.add(iframePanel));
}

function ClickMe2() {

var iframePanel = new Ext.ux.ManagedIFrame.Panel( {
title: 'from click me 2',
header:false,
closable:true,
listeners: {
afterrender : function(frame){
var form = document.htmlForm;
frame.submitAsTarget({ //simpler !
form: form,
method : 'GET'
});
}
});
var tabs = Ext.getCmp('me_tabs');
tabs.setActiveTab(tabs.add(iframePanel));
}

Ext.onReady(function(){

var tabPanelItems = [
];
tabPanelItems[tabPanelItems.length] = new Ext.Panel ({
title: 'tab 0',
disabled: false,
layout:'table',
items: [
{ xtype:'button', text:'click me 1', handler:ClickMe1 },
{ xtype:'button', text:'click me 2', handler:ClickMe2 }
]
});
var tabs = new Ext.TabPanel({
id: 'me_tabs',
activeTab: 0,
region:'center',
defaults : {
hideMode : 'nosize'
},
deferredRender: false,
enableTabScroll:true,
items: tabPanelItems,
layoutOnTabChange: true
});

var win = new Ext.Viewport ({
id: 'me_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
tabs
]
});
});
</SCRIPT>
<FORM METHOD=GET ACTION='http://www.google.com' NAME=htmlForm>
</FORM>
</BODY>
</HTML>


Give it another go. ;)

hendricd
14 Oct 2009, 8:20 AM
Hi Doug,

I did some googling and found that there is support for catching onscroll events in iframes in browsers. Also found that jQuery offers ability to listen for this event. Is there any way you could take this as a feature request before you finish your release cycle?

Andy

@Andy -- I've added scroll event support to MIF (avail only in SVN/trunk for the time being). But remember -- the domready event (and all of the synthetic events like scroll, focus, blur, etc') are only supported for same-origin frames.

scott.mohekey
14 Oct 2009, 8:28 PM
Might you have better luck (on Linux) with the documentloaded event instead? Without seeing what your OnDocumentLoad does, I'd be just guessing on anything else. :-?


I'm having a similar domready firing intermittently issue in ie8. I've tried docoumentloaded, and it doesn't fire at all! I need someway of accessing iframe element before its content is loaded. I've tried afterrender but getFrame() returns null.

hendricd
15 Oct 2009, 4:26 AM
I'm having a similar domready firing intermittently issue in ie8. I've tried docoumentloaded, and it doesn't fire at all! I need someway of accessing iframe element before its content is loaded. I've tried afterrender but getFrame() returns null.

@Scott --
Are you using the latest release 2.0? If using the latest 2.0.1 from SVN/Trunk, download it again (I had a dangling console.log statement in there).

If not, what MIF version, Ext version?

Can you post an example of what you are attempting?

paolocavelli
15 Oct 2009, 4:40 AM
Thank you for your quick answer.
I still have problems with ClickMe2 behaviour. I need to use a html submit, so I changed your code, calling form submit in afterrender event:


function ClickMe2() {
var frameName = 'frameName2';
var iframePanel = new Ext.ux.ManagedIFrame.Panel( {
title: 'from click me 2',
header:false,
frameConfig: {name:frameName},
closable:true,
listeners: {
afterrender : function(frame){
var form = document.htmlForm;
form.target = frameName;
form.submit();
}
}
} );
var tabs = Ext.getCmp('me_tabs');
tabs.setActiveTab(tabs.add(iframePanel));
}

Again a new window is opened.
If I create new tab with iframe (button2), and then after a while I call form.submit (click on a new third button), it works.
It seems that waiting "afterrender" isn't enough.
Can you help me again?




@paolocavelli -- Frankly, I'm surprised this sample ever worked!

You are adding tabs improperly and not giving the IFRAME a chance to finish rendering before you try to submit the Form to it (thus, the new popup window is created because the IFRAME isn't rendered yet).

See adjustments:



<HTML>
<HEAD>
<script type='text/javascript' src='js/ext-3.0.2/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='js/ext-3.0.2/ext-all.js'></script>
<script type='text/javascript' src='js/ext-3.0.2/Ext.ux.ManagedIframe.2.0.js'></script>
<link rel='stylesheet' type='text/css' href='js/ext-3.0.2/resources/css/ext-all.css' />
</HEAD>
<BODY>
<SCRIPT type="text/javascript">

function ClickMe1() {
var frameName = 'frameName1';
var url = 'http://www.google.com';
var iframePanel = new Ext.ux.ManagedIFrame.Panel( {
title: 'from click me 1',
header:false,
frameConfig: {name:frameName}, //now optional, not necessary with latest release
closable:true,
defaultSrc : url //is set when the frame is rendered
} );
var tabs = Ext.getCmp('me_tabs');
tabs.setActiveTab(tabs.add(iframePanel));
}

function ClickMe2() {

var iframePanel = new Ext.ux.ManagedIFrame.Panel( {
title: 'from click me 2',
header:false,
closable:true,
listeners: {
afterrender : function(frame){
var form = document.htmlForm;
frame.submitAsTarget({ //simpler !
form: form,
method : 'GET'
});
}
});
var tabs = Ext.getCmp('me_tabs');
tabs.setActiveTab(tabs.add(iframePanel));
}

Ext.onReady(function(){

var tabPanelItems = [
];
tabPanelItems[tabPanelItems.length] = new Ext.Panel ({
title: 'tab 0',
disabled: false,
layout:'table',
items: [
{ xtype:'button', text:'click me 1', handler:ClickMe1 },
{ xtype:'button', text:'click me 2', handler:ClickMe2 }
]
});
var tabs = new Ext.TabPanel({
id: 'me_tabs',
activeTab: 0,
region:'center',
defaults : {
hideMode : 'nosize'
},
deferredRender: false,
enableTabScroll:true,
items: tabPanelItems,
layoutOnTabChange: true
});

var win = new Ext.Viewport ({
id: 'me_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
tabs
]
});
});
</SCRIPT>
<FORM METHOD=GET ACTION='http://www.google.com' NAME=htmlForm>
</FORM>
</BODY>
</HTML>
Give it another go. ;)

hendricd
15 Oct 2009, 5:13 AM
@paolocavelli -- The afterrender event is often still too soon, but this version worked well for me:


function ClickMe2() {
var iframePanel = new Ext.ux.ManagedIFrame.Panel( {
title: 'from click me 2',
header:false,
closable:true,
listeners: {
afterlayout : function(MIF){
var form = document.htmlForm;
form.target = MIF.getFrame().dom.name;
form.submit();
},
single:true //only once
}
} );
var tabs = Ext.getCmp('me_tabs');
tabs.setActiveTab(tabs.add(iframePanel));

}

scott.mohekey
15 Oct 2009, 12:35 PM
@Scott --
Are you using the latest release 2.0? If using the latest 2.0.1 from SVN/Trunk, download it again (I had a dangling console.log statement in there).

If not, what MIF version, Ext version?

Can you post an example of what you are attempting?


I'm using the latest 2.0 release, not the svn version, and the most recent downloadable version of Ext 3 (ext-3.0.0).

I've found a work around, which is a bit cludgy, as shown below:



var frame = new Ext.ux.ManagedIFramePanel({
//defaultSrc: String.format('/markerdetails.aspx?id={0}', id),
//defaultSrc: '/markerdetails.aspx',
border: false,
frameConfig: {
id: 'popupFrame'
}
});

var win = new Ext.Window({
width: Math.min(514, window.document.body.offsetWidth),
height: Math.min(478, window.document.body.offsetHeight),
autoScroll: true,
title: 'Marker Details',
layout: 'fit',
modal: true,
items: frame
});

currentWindow = win;

win.show();

frame.getFrame().dom.dialogArguments = obj(id, true, false);

frame.setSrc('/markerdetails.aspx');

hendricd
15 Oct 2009, 1:04 PM
I've found a work around, which is a bit cludgy, as shown below:


A workaround for what?
Your sample does little to clarify what you're trying to do.

Why all this with a showModalDialog implementation?

scott.mohekey
15 Oct 2009, 1:50 PM
A workaround for what?
Your sample does little to clarify what you're trying to do.

Why all this with a showModalDialog implementation?

Sorry, let me try and explain. We have a bunch of legacy dialogs that are implemented as aspx pages. Currently we use some generic dhtml popup dialog to wrap it, which passes arguments to the enclosed page via an object it puts on the iframe object called dialogArguments. I've been tasked with wrapping these dialogs with Ext windows instead of the older generic one, but also have to retain backwards compatibility. So to that end, I need to be able to set the same dialogArguments object on the iframe object so that the enclosed page will be able to get its arguments. Believe me, if I was able to rewrite the dialogs from scratch using solely Ext, with no iframes, I would. But unfortunately I can't.

The workaround I mention is forcing the iframe element to be generated by calling Window.show() and then setting the dialogArguments object on it. Previously I tried doing this with domready (which worked intermittently) and documentedloaded (which didn't work at all).

hendricd
15 Oct 2009, 2:37 PM
Sorry, let me try and explain. We have a bunch of legacy dialogs that are implemented as aspx pages. Currently we use some generic dhtml popup dialog to wrap it, which passes arguments to the enclosed page via an object it puts on the iframe object called dialogArguments. I've been tasked with wrapping these dialogs with Ext windows instead of the older generic one, but also have to retain backwards compatibility. So to that end, I need to be able to set the same dialogArguments object on the iframe object so that the enclosed page will be able to get its arguments. Believe me, if I was able to rewrite the dialogs from scratch using solely Ext, with no iframes, I would. But unfortunately I can't.

The workaround I mention is forcing the iframe element to be generated by calling Window.show() and then setting the dialogArguments object on it. Previously I tried doing this with domready (which worked intermittently) and documentedloaded (which didn't work at all).

@Scott - Thanks for the explanation.
I have a couple of ideas but, before we spin too many wheels on this, what exactly is each child page typically do with the contents of your 'dialogArguments' object?

Based on the samples you've posted (and depending on what the child-page aspx markup looks like), it seems like your asking MIF to fullfill some or most of what the server should/could be doing (handling url params vs dialogArguments) for the markup in those pages. Depending on how you answer that question, domready or documentloaded may indeed be way too late to be of any rendering value for those pages.

Also, get into the habit of using the MIF-supplied Component variants :



var frame = new Ext.ux.ManagedIFrame.Window({
defaultSrc: String.format('/markerdetails.aspx?id={0}', id),
border: false,
frameConfig: {
id: 'popupFrame'
},
width: Math.min(514, window.document.body.offsetWidth),
height: Math.min(478, window.document.body.offsetHeight),
autoScroll: true,
title: 'Marker Details',
modal: true
});

Component management (items) and event timing are more predictable that way.

If you need to POST to load those pages, see the MIF::submitAsTarget method.

scott.mohekey
15 Oct 2009, 2:43 PM
@Scott - Thanks for the explanation.
I have a couple of ideas but, before we spin too many wheels on this, what exactly is each child page typically do with the contents of your 'dialogArguments' object?

Based on the samples you've posted (and depending on what the child-page aspx markup looks like), it seems like your asking MIF to fullfill some or most of what the server should/could be doing (handling url params vs dialogArguments) for the markup in those pages. Depending on how you answer that question, domready or documentloaded may indeed be way too late to be of any rendering value for those pages.

Also, get into the habit of using the MIF-supplied Component variants :



var frame = new Ext.ux.ManagedIFrame.Window({
defaultSrc: String.format('/markerdetails.aspx?id={0}', id),
border: false,
frameConfig: {
id: 'popupFrame'
},
width: Math.min(514, window.document.body.offsetWidth),
height: Math.min(478, window.document.body.offsetHeight),
autoScroll: true,
title: 'Marker Details',
modal: true
});

Component management (items) and event timing are more predictable that way.

If you need to POST to load those pages, see the MIF::submitAsTarget method.

The reason for the dialog arguments being passed in via js instead of via params to the server is largely legacy. It's not how I would have done it, but it is what I'm stuck with for now. I will be rewriting the offending dialogs completely in Ext in the future, but I'm forced to wrap the existing ones with an iframe, and do things their way for the mean time (we have a release in a couple of days).

The solution I posted above does seem to work, and I am happy to use that, I just find it odd that domready should be so picky. If I have time I will try changing to use the window version and see if that makes any difference.

Thanks.

paolocavelli
20 Oct 2009, 7:37 AM
It seems to be some strange side effect in using ux.ManagedIframe with Ext.QuickTips.init().
An example follows: in Safari and in IE I get an upside tabPanel (tab under the content) within the MIF.
I get the right output doing one of the following changes:


deleting "Ext.QuickTips.init();" in a.html
deleting "Ext.QuickTips.init();" in b.html
deleting "<script type='text/javascript' src='js/ext-3.0.3/src/locale/ext-lang-it.js'></script>" in b.html
using a standard html iframe

Any idea?
Thank you

a.html

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<script type='text/javascript' src='js/ext-3.0.3/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='js/ext-3.0.3/ext-all-debug.js'></script>
<script type='text/javascript' src='js/ext-3.0.3/Ext.ux.ManagedIframe.2.0.js'></script>
<link rel='stylesheet' type='text/css' href='js/ext-3.0.3/resources/css/ext-all.css' />
</HEAD>
<BODY CLASS=me_class>
<SCRIPT type='text/javascript'>

function getSframe() {
var mif = Ext.getCmp('MIF');
var url = 'b.html';
mif.setSrc(url);
}

Ext.onReady(function(){

Ext.QuickTips.init();

var p = new Ext.Panel( {
region:'west',
width:'20%',
layout:'table',
items:[
{ xtype:'button', text:'click me', handler:getSframe }
]
});

var MIF = new Ext.ux.ManagedIFrame.Panel( {
id:'MIF',
region:'center',
header:false
} );

var win = new Ext.Viewport ({
id: 'xme_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
p,
MIF
]
});
});
</SCRIPT>
</BODY>
</HTML>
b.html

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<script type='text/javascript' src='js/ext-3.0.3/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='js/ext-3.0.3/ext-all-debug.js'></script>
<script type='text/javascript' src='js/ext-3.0.3/src/locale/ext-lang-it.js'></script>
<link rel='stylesheet' type='text/css' href='js/ext-3.0.3/resources/css/ext-all.css' />
</HEAD>
<BODY CLASS=me_class>
<SCRIPT type='text/javascript'>
Ext.onReady(function(){

Ext.QuickTips.init();

var tabs = new Ext.TabPanel({
id: 'me_tabs',
activeTab: 0,
region:'center',
hideMode : !Ext.isIE ? 'nosize' : 'display',
deferredRender: false,
enableTabScroll:true,
items: [
new Ext.Panel ({
title: 'title',
id: 'currentTableTabId',
items: [
{html: 'html code'}
]
})
],
layoutOnTabChange: true
});

var win = new Ext.Viewport ({
id: 'xme_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
tabs
]
});
});
</SCRIPT>
</BODY>
</HTML>

hendricd
20 Oct 2009, 8:13 AM
@paolocavelli--

Try:
- loading the CSS first
- use dbl-quotes in your HTML markup

a.html

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

</HEAD>
<BODY CLASS=me_class>
<SCRIPT type='text/javascript'>

function getSframe() {
var mif = Ext.getCmp('MIF');
var url = 'b.html';
mif.setSrc(url);
}

Ext.onReady(function(){

Ext.QuickTips.init();

var p = new Ext.Panel( {
region:'west',
width:'20%', //illegal
layout:'table',
items:[
{ xtype:'button', text:'click me', handler:getSframe }
]
});

var MIF = new Ext.ux.ManagedIFrame.Panel( {
id:'MIF',
region:'center',
header:false
} );

var win = new Ext.Viewport ({
id: 'xme_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
p,
MIF
]
});
});
</SCRIPT>
</BODY>
</HTML>
b.html

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

</HEAD>
<BODY CLASS=me_class>
<SCRIPT type='text/javascript'>
Ext.onReady(function(){

Ext.QuickTips.init();

var tabs = new Ext.TabPanel({
id: 'me_tabs',
activeTab: 0,
region:'center',
// hideMode : !Ext.isIE ? 'nosize' : 'display', //the ux.VisMode plugin is not loaded on this page
deferredRender: false,
enableTabScroll:true,
items: [
new Ext.Panel ({
title: 'title',
id: 'currentTableTabId',
items: [
{html: 'html code'}
]
})
],
layoutOnTabChange: true
});

var win = new Ext.Viewport ({
id: 'xme_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
tabs
]
});
});
</SCRIPT>
</BODY>
</HTML>

paolocavelli
21 Oct 2009, 5:50 AM
I got no improvement in Safari: I get the tabPanel under its content.
Viewing Safari Web Inspector, div containing "html code" is not part of body, but is before html head.
Unfortunately I saw this behaviour many times in Safari and in IE. I have a complex interface using a MIF: changing code in external window may involve a "upside down" MIF content. The example I posted is a minimal interface with the problem. In the real interface, I got many problems with forms (FormPanel) and particularly with forms created in a not rendered container (for example in a not active tab panel).


Safari Web Inspector


<html class="x-viewport">
<head>
<body class="me_class ...
<div ...
<div id="MIF" ...
<div ..
<div
<div
<iframe name="MIF" ...
<html ...
<div id="ext-comp-1002" class="x-panel">
<div class="x-panel-bwrap" id="ext-gen20">
<div class="x-panel-body x-panel-body-noheader" id="ext-gen21">html code</div>
</div>
</div>
<head>
<body class=me_class ....
a.html

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<link rel="stylesheet" type="text/css" href="js/ext-3.0.3/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-3.0.3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-3.0.3/ext-all-debug.js"></script>
<script type="text/javascript" src="js/ext-3.0.3/Ext.ux.ManagedIframe.2.0.js"></script>

</HEAD>
<BODY CLASS=me_class>
<SCRIPT type="text/javascript">

function getSframe() {
var mif = Ext.getCmp("MIF");
var url = "b.html";
mif.setSrc(url);
}

Ext.onReady(function(){

Ext.QuickTips.init();

var p = new Ext.Panel( {
region:"west",
width:200,
layout:"table",
items:[
{ xtype:"button", text:"click me", handler:getSframe }
]
});

var MIF = new Ext.ux.ManagedIFrame.Panel( {
id:"MIF",
region:"center",
header:false
} );

var win = new Ext.Viewport ({
id: "xme_win",
layout: "border",
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
p,
MIF
]
});
});
</SCRIPT>
</BODY>
</HTML>

b.html


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

</HEAD>
<BODY CLASS=me_class>
<SCRIPT type="text/javascript">
Ext.onReady(function(){

Ext.QuickTips.init();

var tabs = new Ext.TabPanel({
id: "me_tabs",
activeTab: 0,
region:"center",
deferredRender: false,
enableTabScroll:true,
items: [
new Ext.Panel ({
title: "title",
id: "currentTableTabId",
items: [
{html: "html code"}
]
})
],
layoutOnTabChange: true
});

var win = new Ext.Viewport ({
id: "xme_win",
layout: "border",
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
tabs
]
});
});
</SCRIPT>
</BODY>
</HTML>

hendricd
21 Oct 2009, 6:15 AM
@paolocavelli -- This is not an MIF problem. It's your layout problem:



new Ext.Panel ({
title: "title",
id: "currentTableTabId",
layout : 'fit',
items: [
{html: "html code"}
]
})


Why overnest a second Panel?

andynuss
21 Oct 2009, 9:49 AM
Hi Doug,

I want to have some little popup windows in the mif. These are based on Ext.Window. The mif lives in the 'center' panel of a border layout. When I show the popup, I set constrain to true, and renderTo to the id of center panel that has xtype of iframepanel. This seems to work ok in terms of not being able to drag the popup outside the mif panel. However, when I drag the control of the south panel upwards to shrink the center panel, and such that the little popup should be obscured since it was constrained, the popup just stays visible and now has left its constrainment and sits over the south panel. Am I out of luck on this one?

Andy

hendricd
21 Oct 2009, 10:28 AM
Hi Doug,

I want to have some little popup windows in the mif. These are based on Ext.Window. The mif lives in the 'center' panel of a border layout. When I show the popup, I set constrain to true, and renderTo to the id of center panel that has xtype of iframepanel. This seems to work ok in terms of not being able to drag the popup outside the mif panel. However, when I drag the control of the south panel upwards to shrink the center panel, and such that the little popup should be obscured since it was constrained, the popup just stays visible and now has left its constrainment and sits over the south panel. Am I out of luck on this one?

Andy

@Andy -- A screen shot and/or some code would be helpful -- your explanation has my head spinning. ;)

andynuss
21 Oct 2009, 11:36 AM
Doug,

I have 3 screenshots of the steps that show the popup window constrained to mif panel, leaving constrainment by dragging the border at the bottom of mif panel up to middle of popup window, and releasing, but I don't know how to attach the files. The poup window is a simple Ext.Window object.

Andy

hendricd
21 Oct 2009, 11:40 AM
Doug,

I have 3 screenshots of the steps that show the popup window constrained to mif panel, leaving constrainment by dragging the border at the bottom of mif panel up to middle of popup window, and releasing, but I don't know how to attach the files. The poup window is a simple Ext.Window object.

Andy

Code would be easiest then. ;)

andynuss
21 Oct 2009, 12:03 PM
Here's the code to put up the popup:



function ShowPopup (beginword, text, title, width, height)
{
var win = BookWin();
var id = PopupId(beginword);
var elem = win.document.getElementById(id);
if (elem)
return; // already visible

var spanxy = GetElemTopLeft(win, 'myanno'+beginword);
if (!spanxy)
return; // wrong page

var config = PopupConfig(text, title);
config.autoScroll = true;
config.width = width;
config.height = height;
config.id = id;
config.x = spanxy.left;
config.y = spanxy.top+5;
config.renderTo = 'center_panel_id';
config.constrain = true;
var popup = new Ext.Window(config);
popup.show();
}

function PopupConfig (text, title)
{
var config = {
draggable : true,
resizable : true,
closable : true,
title : title,
plain : true,
bodyStyle : 'padding:5px;',
html : text,
};
return config;
}


And the snippet from the borderlayout item that creates the mif frame:



},{
// reserve space for mif
autoScroll : true,
split : true,
region : 'center',
layout : 'fit',
id : 'center_panel_id',
title : '',
xtype : 'iframepanel',
defaultSrc : 'about:blank',
focusOnLoad : true,
},{
split : true,
title : 'Commentary',
region : 'south',
layout : 'fit',
height : 150,
minHeight : 20,
maxHeight : 600,
autoScroll : true,
id : 'south_panel_id',
xtype : 'panel',
}


As you can see, there is a draggable border between 'center' mif panel and the 'south' panel. The popup is constrained to be draggable only within the 'center' panel, and that works. However, when user expands by dragging up the 'south' panel, the popup, if close enough to bottom of 'center' mif panel, will now be floating partially outside or fully outside the mif panel and over the 'south' panel. I would think extjs, seeing as the window was with constrain:true, renderTo:'center_panel_id', would have done something to maintain the constrainment.

Andy

hendricd
21 Oct 2009, 12:46 PM
@Andy -- This:


config.renderTo = 'center_panel_id';
renders the Window to the parent page MIF.Component container DIV, not into the IFRAME it manages.

Perhaps renderTo:
Ext.getCmp('center_panel_id').body is what you're after? (The body of any Panel and subclasses is the visible area of the Panel.)

But, this:

I want to have some little popup windows in the mif.says you want the Window constained to the IFRAME document, or its parentPage Panel.body ?

Please, clarify.

andynuss
21 Oct 2009, 1:35 PM
Doug,

Thanks so much. I tried renderTo: Ext.getCmp('center_panel_id').body and it worked perfectly. The popop window now belongs to the iframe window and even is draggable. This is exactly what I wanted. I didn't know extjs + mif could do this!

Andy

hendricd
21 Oct 2009, 1:51 PM
Doug,

Thanks so much. I tried renderTo: Ext.getCmp('center_panel_id').body and it worked perfectly. The popop window now belongs to the iframe window and even is draggable. This is exactly what I wanted. I didn't know extjs + mif could do this!

Andy

@Andy -- Glad the effect worked out for you, but understand:

the mifPanel (the iframe) and your popup window are rendered to Panel.body of 'center_panel_id'. Your popup is a abs-positioned 'floater' window and the MIF is managed by the 'fit' layout of its host Panel ( 'center_panel_id' ).

IOW: Your popup Window IS NOT rendered inside the document context of the IFRAME !

andynuss
22 Oct 2009, 2:10 AM
Doug,

Now that I've got the desired effect from above, where the sticky note appears as if it floats "inside" the mif, I want to ask about this little thing I noticed (latest firefox on linux): I have a large page, and user has attached lots of sticky note popups to it, and I want to open all of them when I open the page. So in the handler for 'documentloaded', I query my database and get all of the ids of the words which have notes, and render those words with an effect, as well as popup the note. The problem is, its a large page and some of the notes are not visible at the time. If you have even one note on the large page, that is near the bottom and not visible yet, and show it on 'documentloaded', (for when the user scrolls into view), the scroll bars are very messed up. Scrolling happens to where the note would be, the note is not visible though, and the scroll bar control is cut in half, and broken until page refresh. (The mif panel has autoScroll:true.) Here's my code now:



function ShowPopup (beginword, text, title, width, height)
{
var id = PopupId(beginword);
var popup = Ext.getCmp(id);
if (popup) {
popup.show();
return;
}

var spanxy = GetCenterElemXY(CenterPanel(), 'staganno'+beginword);
if (!spanxy)
return; // wrong page

var config = PopupConfig(text, title);
config.autoScroll = true;
config.width = width;
config.height = height;
config.id = id;
config.renderTo = Ext.getCmp('center_panel_id').body;
popup = new Ext.Window(config);
popup.setPosition(spanxy.left, spanxy.bottom);
RegisterStateEventListener('beforepagechange', function () { popup.destroy(); return true; });
popup.show();
}

function GetCenterElemXY (mif, id)
{
var el = mif.getFrame().get(id);
if (el) {
var xy = {};
xy.top = el.getY();
xy.bottom = xy.top + el.getHeight();
xy.left = el.getX();
xy.right = xy.left + el.getWidth();
return xy;
}
return null;
}

function PopupConfig (text, title)
{
var config = {
draggable : true,
resizable : true,
closable : true,
title : title,
plain : true,
bodyStyle : 'padding:5px;',
html : text,
};
return config;
}


Obviously, there is a loop on 'documentloaded' listern that gets all the sticky note items on the page, and whether at top(visible) or bottom (partially/wholly invisible), renders/shows them with ShowPopup().

Andy

andynuss
22 Oct 2009, 2:22 AM
Doug,

I forgot to mention one pertinent discovery in firebug. Lets say I set a breakpoint in the last line of ShowPopup just before the popup.show() call. When I get there (for an "offscreen" note) and just click continue icon, the window scrolls the popup is not visible, though extjs thinks it is, and the scrollbars are ruined. But if I step over popup.scroll(), and stop. I verify that the mif page didn't scroll, the scroll bars are ok, and then click continue, and everything is still ok. Somehow, the firebug stopping just after show() before continuing, is helpful in affecting the extjs event mechanism timing, so a different code path is taken thru the complex extjs event handler code for popups, and everything stays ok. I think if you address this, some of the other similar posts might get fixed.

Andy

hendricd
22 Oct 2009, 3:28 AM
Doug,

I forgot to mention one pertinent discovery in firebug. Lets say I set a breakpoint in the last line of ShowPopup just before the popup.show() call. When I get there (for an "offscreen" note) and just click continue icon, the window scrolls the popup is not visible, though extjs thinks it is, and the scrollbars are ruined. But if I step over popup.scroll(), and stop. I verify that the mif page didn't scroll, the scroll bars are ok, and then click continue, and everything is still ok. Somehow, the firebug stopping just after show() before continuing, is helpful in affecting the extjs event mechanism timing, so a different code path is taken thru the complex extjs event handler code for popups, and everything stays ok. I think if you address this, some of the other similar posts might get fixed.

Andy

@Andy -- I'm just now starting to get a sense of what you're trying to do. ;)

MIF Panels and Windows actually render an MIF.Component(Box) as a single child item -- within them. The overflow on that item's Container DIV defaults to 'auto'. Based on what you are doing, competing scrollers are going to be an issue where you are repositioning the various Stickies (thus defeating their 'constrain' settings).

I would recommended you (and I have already changed SVN) add this when the MIFPanel is rendered:


yourMif.items.first().getEl().setOverflow('hidden');and you may need to adjust the target renderTo for your Stickies as well:


config.renderTo = Ext.getCmp('center_panel_id').items.first().getEl();
The latest SVN/trunk of MIF 2.01 now publishes a scroll event from the IFRAME, so you could use that event to move things around only when necessary.


yourMIF.on('scroll' , snapStickies, null , {buffer : 100});Have you considered simply repositioning your stickie Windows relative to the frame document's scrollTop and beginword xy for which it applies?

This would calculate positive/negative xy coordinates for each Sticky and make them appear to 'track' as the frame scrolls but you would need to disable constrain on the stickies and manage min/max values for xy yourself). :-?

Of course, this strategy is only going to work for same-origin frames (no external-site 'Sticky-ing' will be permitted).

soros
22 Oct 2009, 8:18 AM
Hi,

I'm getting error with the following code:


var tabs = Ext.getCmp('frm-center-tabpanel');
var MIF = new Ext.ux.ManagedIFrame({
autoCreate: {
src: 'http://www.yahoo.com',
height: '100%',
width: '100%'
},
loadMask: true
});
tabs.add(MIF);

I also tried using code below with the same result:


var MIF = new Ext.ux.ManagedIFrame({
defaultSrc: 'http://www.yahoo.com'
});

I verified with Firebug that Ext (3.03) and MIF (Oct 7, 2009 release) are successfully loaded. The rest of the application executes properly, but I cannot create iframes...

Any idea?

Thanks

hendricd
22 Oct 2009, 8:27 AM
@soros -- Not looking at the documentation site (http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.ManagedIFrame.Panel)much are we? B)



var tabs = Ext.getCmp('frm-center-tabpanel');
var MIF = new Ext.ux.ManagedIFrame.Panel({
defaultSrc: 'http://www.yahoo.com',
loadMask: true
});
tabs.add(MIF);
tabs.rendered && tabs.doLayout();
tabs.setActiveTab(MIF);

soros
22 Oct 2009, 9:05 AM
Thanks hendricd for your quick response, it worked.

spiderman123
22 Oct 2009, 10:17 AM
Is it possible to open remote site with HTTP-POST-Data. (Example: i want to login into an remote-site, therefore i need send my username and password to this site via POST-method)?
thx

hendricd
22 Oct 2009, 2:34 PM
Is it possible to open remote site with HTTP-POST-Data. (Example: i want to login into an remote-site, therefore i need send my username and password to this site via POST-method)?
thx

That would look something like this:


var loginFrame = Ext.getBody().createChild( { tag: 'iframe', cls:'x-hidden'} );
or
var loginFrame = Ext.get('existingIFrameID');
//loginFrame is now a ux.ManagedIFrame.Element

loginFrame.reset(null, function(){
this.submitAsTarget({
url : 'http://distant.domain.com/login.php',
method : 'POST',
params : {userid: 'user', pwd:'pwd'},
callback : function(frame){
console.log(arguments);
} ,
scope : this
});
},loginFrame);

andynuss
23 Oct 2009, 2:16 AM
Doug,

On the problem with showing stickies whose position is below the viewable part of the page, I tried the recommended changes and still got the bug exactly as before.



//called at beginning of documentloaded
function OnDocLoadDisableScrollers ()
{
DocPanel().items.first().getEl().setOverflow('hidden');
}

function ShowPopup (beginword, text, title, width, height)
{
var id = PopupId(beginword);
var popup = Ext.getCmp(id);
if (popup) {
popup.show();
return;
}

var mif = DocPanel();
var spanxy = GetDocElemXY(mif, 'anno'+beginword);
if (!spanxy)
return; // wrong page

var config = PopupConfig(text, title);
config.autoScroll = true;
config.width = width;
config.height = height;
config.id = id;
//config.renderTo = Ext.getCmp('center_panel_id').body;
config.renderTo = mif.items.first().getEl(); // YOUR CHANGE
popup = new Ext.Window(config);
popup.setPosition(spanxy.left, spanxy.bottom);
RegisterStateEventListener('beforepagechange', function () { popup.destroy(); return true; });
popup.show();
}



Did I do something wrong? Have you been able to reproduce?
Andy

hendricd
23 Oct 2009, 3:18 AM
Did I do something wrong? Have you been able to reproduce?
Andy

@Andy -- Seeing is believing. Got a public URL, screen shot, something?

Is it a bug, or a overflow problem with your overall layout? Who knows?

spiderman123
23 Oct 2009, 3:21 AM
That would look something like this:


var loginFrame = Ext.getBody().createChild( { tag: 'iframe', cls:'x-hidden'} );
or
var loginFrame = Ext.get('existingIFrameID');
//loginFrame is now a ux.ManagedIFrame.Element

loginFrame.reset(null, function(){
this.submitAsTarget({
url : 'http://distant.domain.com/login.php',
method : 'POST',
params : {userid: 'user', pwd:'pwd'},
callback : function(frame){
console.log(arguments);
} ,
scope : this
});
},loginFrame);



thx for your rapid answer!

andynuss
23 Oct 2009, 3:23 AM
Doug,

I don't have a public url. What I'll do is spend some time to create as simple a test case as I can, and post the code, and HTML of the iframe doc. I guess I do have too much code right now to be sure of what the cause might be.

Andy

Artoiss
23 Oct 2009, 3:54 AM
Sorry this is noob question,
I've downloaded Ext JS 3.0.0 few weeks ago and ManagedIFrame 2.0 RC3.
I've setup the files as mif readme file suggested.
This is the HTML head;

<link rel="stylesheet" type="text/css" href="ext300/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext300/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext300/ext-all.js"></script>
<script type="text/javascript" src="ux/mif/build/miframe.js"></script>

I'm trying to create a simple window with iframepanel using firebug;

var win = new Ext.Window({
title:'xxx',
items:{xtype : 'iframepanel',
defaultSrc : 'www.google.com'}
});
win.show();

I get the "TypeError: b[d.xtype || e] is not a constructor" error from ext-all.js.
The ux folder is at the same level as ext300 and I've extracted all the files from the mif zip file into ux/mif folder. Not sure where to start looking to resolve this.
Can you help? Thanks.

hendricd
23 Oct 2009, 4:07 AM
@Artoiss -- Chances are good that you simply have the relative paths messed up a bit.

Open up your page in Firefox and Firebug (necessary these days for Ext development) and see if the miframe.js script tag contains Javascript in it and adjust the paths as necessary. ;)

Artoiss
23 Oct 2009, 4:22 AM
Yep, you were right. messed up the reletive links.
Thanks:D

andynuss
23 Oct 2009, 4:32 PM
Hi Doug,

Here's some code that creates a viewport and tries to put a popup near the top and bottom of the mif page. Take any large html document, and wrap some words near top with a span tag and an id of 'first', and near the bottom with 'last'.

You'll see that the 'last' popup doesn't render, even when you scroll the mif, and also the mif scrollbars are a little messed up. They are a lot more messed up in my real example.



function Home () {
var view = new Ext.Viewport({
layout : 'border',
defaults : {
split : true,
frame : false,
border : true,
},
items : [{
region : 'north',
height : 300,
layout : 'fit',
xtype : 'panel',
},{
region : 'west',
width : 300,
layout : 'fit',
xtype : 'panel',
},{
autoScroll : true,
title : '',
region : 'center',
layout : 'fit',
id : 'center_panel_id',
xtype : 'iframepanel',
defaultSrc : 'testdoc.html',
listeners : {
documentloaded : function (frame) {
MIF().items.first().getEl().setOverflow('hidden');
ShowPopup('first', 'first');
ShowPopup('last', 'last');
},
},
}],
});
}

function MIF ()
{
return Ext.getCmp('center_panel_id');
}

function GetBookElemXY (mif, id)
{
var el = mif.getFrame().get(id);
if (el) {
var xy = {};
xy.top = el.getY();
xy.bottom = xy.top + el.getHeight();
xy.left = el.getX();
xy.right = xy.left + el.getWidth();
return xy;
}
return null;
}

function PopupConfig (text)
{
var config = {
width : 200,
height : 100,
draggable : true,
resizable : true,
closable : true,
autoScroll : true,
plain : true,
bodyStyle : 'padding:5px;',
html : text,
};
return config;
}

function ShowPopup (id, text)
{
var mif = MIF();
var spanxy = GetBookElemXY(mif, id);
var config = PopupConfig(text);
config.autoScroll = true;
config.id = id;
//config.renderTo = Ext.getCmp('center_panel_id').body;
config.renderTo = mif.items.first().getEl();
popup = new Ext.Window(config);
popup.setPosition(spanxy.left, spanxy.bottom);
popup.show();
}


Andy

andynuss
23 Oct 2009, 4:38 PM
By the way, ignore my statement that the 'last' poup is not in view, as it is right not to be. I haven't trapped the 'scroll' event yet. But the point is that the display and scroll bars are a little messed up even in this case. My real document page is different in that it is served from a servlet, not the file servlet, and is very large, and xhtml with DOCTYPE.

hendricd
25 Oct 2009, 5:57 AM
... My real document page is different in that it is served from a servlet, not the file servlet, and is very large, and xhtml with DOCTYPE.

Transitional or Strict?

andynuss
25 Oct 2009, 7:36 AM
Doug,

Its a strict doctype, and for the problem I found, it turns out not to matter. If you show a popup near but not at the top, and below the bottom of viewable page, the scrollbars mess up. However, I will work around this by checking visibility of where I want to place the popup, so as not to show it when its not even partially visible. Also, your 'scroll' event will work nicely to keep the stickies in the right place.

Andy

hendricd
25 Oct 2009, 11:18 AM
@Andy -- I assembled a sample with the code you provided (without any DOCTYPE) here (http://demos.theactivegroup.com/playpen/mif/wordtrak.html).

I'm not seeing the scrollbar issues you describe( not that I fully understand your description of the problem :-? )

I've added some additional 'features' you may wish to consider in your implementation as well. ;)

See what that looks like for you.

andynuss
25 Oct 2009, 3:28 PM
Hi Doug,

I couldn't open the page when I clicked your link. The iframe says page not found.

By the way, I need your advice on something. What I'm doing now is having a maxlinewidth of the document, so that if the mif width is bigger than this, there is margin slop. I then send a query param with a recalculated margin style css to munge into the document, so that each time I fetch a page, regardless of how the panel is resized, the words wrap at the same positions, because the margins take up the resize "slop". That is, unless the mif is resized smaller than maxlinewidth. This then allows my stickies to be repositioned accurately and safely, and I flush the sticky settings only if mif width goes less than maxlinewidth. It works great.

Then I tried this idea, what if on page resize, rather than going to the server, I just use javascript to change the margin style attribute according to the same algorithm. Then I can safely keep the stickies pinned to their relative positions. That is, in theory. The problem is that the javascript changing of page margin's resulting effect is not synchronous, and the stickies are positioned before the page margin change has taken effect. Thus to the wrong position. Is there any way to accurately postpone the repositioning of the stickies until after the javascript margin style change has taken effect? Or should this approach be abandoned, and just hit the server when the mif is resized.

Sorry for the long explanation!

Andy

hendricd
25 Oct 2009, 5:25 PM
Hi Doug,

I couldn't open the page when I clicked your link. The iframe says page not found.That was by design!
a) It shouldn't matter what the content of the nested page is, right? ;)
b) I had no example of what you are attempting.

Then I tried this idea, what if on page resize, rather than going to the server...

Again, no clue what you're talking about, but understand that there is no easy way to determine when a DOM reflow (of part/entire page) completes. A margin change might reflow your target elements anywhere on the page, so the best you can do is monitor available trappable events and recalculate the new XY's of all your pertinent tags and reposition your Windows as necessary.

spiderman123
26 Oct 2009, 9:31 AM
That would look something like this:


var loginFrame = Ext.getBody().createChild( { tag: 'iframe', cls:'x-hidden'} );
or
var loginFrame = Ext.get('existingIFrameID');
//loginFrame is now a ux.ManagedIFrame.Element

loginFrame.reset(null, function(){
this.submitAsTarget({
url : 'http://distant.domain.com/login.php',
method : 'POST',
params : {userid: 'user', pwd:'pwd'},
callback : function(frame){
console.log(arguments);
} ,
scope : this
});
},loginFrame);


thx for your answer! I want to add new ManagedIFrame.Panel into my tabpanel but i am not clear how i can add your code above into ManagedIFrame.Panel. Pls help me!

thx

hendricd
26 Oct 2009, 9:34 AM
@spiderman123--
Examples are everywhere (https://www.extjs.com/forum/showthread.php?p=387067#post387067).

Forum Google search: 'MIF tabpanel' for more.

andynuss
27 Oct 2009, 11:41 AM
Hi Doug,

I've been using setSrc() exclusively to load my mif pages until now. I'm offering the ability to create links between pages, and I would like to get the a:visited attribute to work properly. Thus in some cases, navigation will be via an anchor tag with an href to a servlet with query string that uniquely specifies the desired page. The anchor tag will also have an onclick function that does other things in the parent extjs window, in other panels that go along with the page being loaded, and then returns true, so that the browser actually loads the page.

To test this I created a simple servlet called visitedservlet, but got the following problem: click one of these links, and the mif loads the page (as verified in java remote debugger), and the visited attribute for the page is immediately changed due to CSS. I actually have 2 tags in example that have the same query string, so they both change to visited colors. However, quit the browser, and reopen and load page via mif, and the visited colors are no longer there! Interestingly, if you hit the servlet directly, and visit one of the links, it changes to visited colors of course, but when you close and reopen the browser, this time using mif to hit the visitedservlet, the browser shows the mif rendered links as visited. Thus the browser does not remember the visited state when the link is visited only thru the mif.

Here's the HTML which my servlet code returns:


<html>
<head>
<style>
div.links { font-size: 18px; }
div.links a:link { color: black; text-decoration: underline; }
div.links a:visited { background-color: purple; color: yellow; }
div.links a:hover { background-color: yellow; color: black; }
</style>

<script>
function Click (msg)
{
document.cookie = 'msg=' + msg + ';path="/"';
alert(msg);
return true;
}
</script>
</head>
<body>
<div class="links">
<a href='/myapp/visitedservlet?page111' onclick='Click("1a")'>Link 1a</a><br>
<a href='/myapp/visitedservlet?page222' onclick='Click("2a")'>Link 2a</a><br>
<a href='/myapp/visitedservlet?page333' onclick='Click("3a")'>Link 3a</a><br>
<a href='/myapp/visitedservlet?page111' onclick='Click("1b")'>Link 1b</a><br>
<a href='/myapp/visitedservlet?page222' onclick='Click("2b")'>Link 2b</a><br>
<a href='/myapp/visitedservlet?page333' onclick='Click("3b")'>Link 3b</a><br>
<a href="http://www.google.com/">Common href, google</a>
</div>

</body>
</html>


And here's the javascript code:


function Home ()
{
var view = new Ext.Viewport({
layout : 'border',
defaults : {
split : true,
frame : true,
border : true,
},
items : [{
region : 'north',
height : 60,
layout : 'fit',
xtype : 'panel',
},{
autoScroll : true,
split : true,
region : 'center',
layout : 'fit',
title : '',
xtype : 'iframepanel',
defaultSrc : '/myapp/visitedservlet',
focusOnLoad : true,
listeners : {
documentloaded : function (frame) {
alert('pageloaded');
},
},
}],
});
}


By the way, I tried with both absolute links (shown above) as well as relative links, and got the same result. I'm using port 8080 on localhost, with Firefox and Linux.

Andy

andynuss
27 Oct 2009, 11:49 AM
Hi Doug,

I'm having trouble with a:visited css and a servlet example when loaded in the mif. I have links in the page delivered by the servlet. I differentiate the links by querystring, which the servlet ignores. The page is always delivered by servlet, when clicking any of the links (with different querystrings), verified in java debugger. As soon as I click a link, the visited css is applied by the browser. But when I quit browser and reopen (via mif), it is no longer showing as visited. However, it works correctly if I go to the servlet url without mif or extjs at all.

Here's my servlet html:


<html>
<head>
<style>
div.links { font-size: 18px; }
div.links a:link { color: black; text-decoration: underline; }
div.links a:visited { background-color: purple; color: yellow; }
div.links a:hover { background-color: yellow; color: black; }
</style>

<script>
function Click (msg)
{
document.cookie = 'msg=' + msg + ';path="/"';
alert(msg);
return true;
}
</script>
</head>
<body>
<div class="links">
<a href='/app/visitedservlet?page111' onclick='Click("1a")'>Link 1a</a><br>
<a href='/app/visitedservlet?page222' onclick='Click("2a")'>Link 2a</a><br>
<a href='/app/visitedservlet?page333' onclick='Click("3a")'>Link 3a</a><br>
<a href='/app/visitedservlet?page111' onclick='Click("1b")'>Link 1b</a><br>
<a href='/app/visitedservlet?page222' onclick='Click("2b")'>Link 2b</a><br>
<a href='/app/visitedservlet?page333' onclick='Click("3b")'>Link 3b</a><br>
<a href="http://www.google.com/">Common href, google</a>
</div>

</body>
</html>


Here's my javascript:


function Home ()
{
var view = new Ext.Viewport({
layout : 'border',
defaults : {
split : true,
frame : true,
border : true,
},
items : [{
region : 'north',
height : 60,
layout : 'fit',
xtype : 'panel',
},{
autoScroll : true,
split : true,
region : 'center',
layout : 'fit',
title : '',
xtype : 'iframepanel',
defaultSrc : '/app/visitedservlet',
focusOnLoad : true,
listeners : {
documentloaded : function (frame) {
alert('pageloaded');
},
},
}],
});
}


Andy

spiderman123
27 Oct 2009, 2:13 PM
@spiderman123--
Examples are everywhere (https://www.extjs.com/forum/showthread.php?p=387067#post387067).

Forum Google search: 'MIF tabpanel' for more.

i have given a try as following:



var loginFrame;

if (Ext.get('existingIFrameID') == undefined ){
loginFrame = Ext.getBody().createChild( { tag: 'iframe', cls:'x-hidden', id:'existingIFrameID'} );
}
else{
loginFrame = Ext.get('existingIFrameID');
}

loginFrame.reset(null, function(){
this.submitAsTarget({
url : 'https://mysite/login.php',
method : 'POST',
params : {user: username, pwd:password},
callback : function(frame){
console.log(arguments);
} ,
scope : this
});
},loginFrame);

tabpanel.add({
closeable: true,
title:'test',
items : [loginFrame]
});


the created iframe was not intergrated into a tabpanel. It was a popup-windows or a new tab in firefox is create with my post data. Pls help me!!!! :(

thx

hendricd
27 Oct 2009, 6:03 PM
@spiderman123 --

If Ext.get cannot find the id
Ext.get('someId') it returns null (not undefined).

So, use this instead to retrieve an existing IFRAME HTMLElement or create a new one if it's not found:


var loginFrame = Ext.get('existingIFrameID') ||
Ext.getBody().createChild( { tag: 'iframe', cls:'x-hidden', id:'existingIFrameID'});

loginFrame.submitAsTarget({
url : 'https://mysite/login.php',
method : 'POST',
params : {user: username, pwd:password},
callback : function(frame){
console.log(arguments);
}
});


the created iframe was not intergrated into a tabpanel. You cannot render an Ext.Element into a tabPanel. Use an Ext.ux.ManagedIFrame.Panel instead (xtype:'iframepanel') :



var mif = tabpanel.add({
closeable: true,
title:'test',
xtype: 'iframepanel',
defaultSrc : ' ??? '
});
tabPanel.doLayout();
tabPanel.setActiveTab(mif);
What are you really trying to do with the tabPanel? Add a tab, then login?

spiderman123
28 Oct 2009, 8:25 AM
Hi hendricd (http://www.extjs.com/forum/member.php?u=8730),

after some experiment (http://dict.leo.org/ende?lp=ende&p=5tY9AA&search=experiment)s i got it as follow:



var newTab = new Ext.ux.ManagedIFrame.Panel({
frameConfig:{id: NA.id + 'if'},
closable: true,
layout: 'fit',
title:NA.text,
tabTip: NA.text,
id: NA.id + 'iframe'
,loadMask:{msg:this.loadMsg}
,listeners: {
afterlayout :function(MIF){

MIF.submitAsTarget({
url: "https://mysite/login.php",
params: {username:'user1',password:'pwd1'},
method: 'POST'
});
},
single:true
}
});

mainTab.add(
newTab
);
mainTab.activate(newTab);


The code above works fine with firefox but not in IE. That means the post-data are not sent to server after the Ext.ux.ManagedIFrame.Panel in Tabpanel rendered. Pls help me!!!

thx

hendricd
28 Oct 2009, 10:17 AM
@spiderman123 -- I doubt IE is going to let you do an https cross domain FORM submission without complaining!

What error/warning/message does it report? What shows up in the IFRAME?

hendricd
28 Oct 2009, 1:18 PM
This release (Available on first post of this thread) adds



support for Ext 3.1



submitAsTarget support for autoLoad:



MIF = Ext.create({
xtype:'iframepanel',
autoLoad:{
url : 'demos/mif/postpdf.php',
method : 'POST',
params : {file:'ex1.pdf'},
submitAsTarget : true
}
});
This means you can POST to MIF frames at-will in your Layouts. :-?

Ext.ux.ManagedIFrame.CSS is now public, which means you can now manipulate the CSS engine of any document context.

jburgam
31 Oct 2009, 6:49 PM
Hi, i'm having some trouble with an iframe Panel on ie8. I'm getting an "Access denied" error on mi-frame.js.

I checked the code and the error is in the getDom() method. Do you guys have the same problem on ie8? I have tested the same app on firefox and no problem there.

i get this error closing the last tab of a tab panel or trying to change de src of a tab iframe. Here's some code:




var tabs= new Ext.TabPanel({



region: 'center',



id:'center',

deferredRender: false,


activeTab: 0,


stateful:





true,


enableTabScroll:true




}

);



var viewport = new Ext.Viewport({





layout: 'border',



items: [

new Ext.BoxComponent({


region: 'north',


height: 90,


contentEl: 'north'





})

,
tabs
]
});
...

loadDoc:

function(url, modulo){
var tabs = Ext.getCmp('center');
var frame = tabs.findById('frame-'+modulo);


if (frame){

frame.setSrc(url,true);
}else{

var iframePanel = new Ext.ux.ManagedIFrame.Panel( {
title: modulo,
header:false,
closable:true,
frame:true,
layout:'fit',
xtype:'iframepanel',
id: 'frame-' + modulo,
defaultSrc: url

}

tabs.add(iframePanel);
tabs.setActiveTab('frame-'+modulo);
}
...


thank you for your help.

aleksf
4 Nov 2009, 4:52 AM
The example ( http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsimple ) does not work for me in IE 8 (see attached screenshot). Is IE8 supported? Or could this be some security setting interfering?

hendricd
4 Nov 2009, 4:59 AM
The example ( http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsimple ) does not work for me in IE 8 (see attached screenshot). Is IE8 supported? Or could this be some security setting interfering?

It was a problem with the Google Gears detection tests. It has been removed. ;)

briang
4 Nov 2009, 12:13 PM
Doug,

I've read through all 32 pages of the thread here and have a similar issue to those experienced by a few other people where an MIF in a TabPanel won't go to 100% height. Interestingly, it works properly in Chrome but not in FF3 or IE8. I've tried various approaches as recommended here but without success.

In the East region of my Viewport, I have three tabs and the middle tab contains one collapsible north panel and a bottom iframe which previews a document loaded from a same-origin URL. My TabPanel looks like:



tabpanel = new Ext.TabPanel({
activeTab:2,
deferredRender: false,
layoutOnTabChange: true,
items:[{
id: 'EditPane',
title: 'Edit',
closable:false,
autoScroll:true
},{
id: 'PreviewPane',
title: 'Preview',
closable:false,
layout:'border',
listeners: {
// auto-submit the form when clicking the tab
'activate' : function(tab) {
var frm = Ext.getCmp('previewFormPanel').getForm();
previewPane.setSrc('/preview/' + uidEvent + '/?' + frm.getValues(true), true);
}
},
items: [{
title: 'Preview Options',
region:'north',
id: 'PreviewPaneTop',
collapsible: true,
collapsed: true,
items: previewForm,
listeners:{
'expand': {
fn: function(p){
p.doLayout();
},
single: true
}
}

},{
region: 'center',
id: 'PreviewPaneBottom',
items: previewPane
}]
},{
id: 'HelpPane',
title: 'Help',
autoLoad: helpUrl,
autoScroll:true
}]
});


And my working Ext 2.2/MIF1 code was to declare the previewPane like so:



var previewPane = new Ext.ux.ManagedIframePanel({
html: '',
loadMask: {msg: 'Refreshing preview...'}
});


And this is what I currently have for MIF2 in its place:



var previewPane = new Ext.ux.ManagedIFrame.Panel({
xtype:'iframepanel',
loadMask: {msg: 'Refreshing preview...'}
});


It renders and works properly but the height, in IE/FF, is only about 150-200px while in Chrome it is 100% as desired. I can force the height to, say, 500 and it works, but I need it to be 100%/fit to the parent container. I don't actually need Panel; I have been using Ext.ux.ManagedIFrame.Window instead but the Panel has a border which makes it easier to see if the height is correct without waiting for the page to load.

My includes look like:



<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/global/core.js"></script><!-- includes jQuery -->
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="/js/library/ext/3.0/miframe-debug.js"></script>
<script type="text/javascript" src="/js/library/ext/2.2/spinner-min.js"></script>


In Ext 2.2, at some point, I required a little custom CSS to get the height to be 100%. I've commented this in/out in my current attempts and it doesn't make a difference with MIF2:



#PreviewPaneBottom, #PreviewPaneBottom .x-panel-bwrap, #PreviewPaneBottom .x-panel { height: 100%; }
.x-managed-iframe { height: 100%; width: 100%; }


Hope that paints a complete picture. I feel like I'm really close but I can't quite get it to work. I appreciate any feedback you can provide!


Brian

hendricd
4 Nov 2009, 12:26 PM
@braing -- The first piece of advice. Get udpated! Ext 3.0.0 (cachefly or not) has layout and other problems.

Why not work with 3.0.2 instead?
Are you using the latest MIF 2.01 version?

The style-rule has changed for the frame:


.ux-mif-fill{height:100%;width:100%;} but that rule and className is added to the IFRAME Element for you when the Component(s) render.

Get current and give things another shot. ;)

briang
4 Nov 2009, 12:30 PM
@braing -- The first piece of advice. Get udpated! Ext 3.0.0 (cachefly or not) has layout and other problems.

Why not work with 3.0.2 instead?
Are you using the latest MIF 2.01 version?


Bummer - I'm not a subscriber at the moment so I guess 3.0.2 is not available? I guess I'll have to wait for an Ext public release. :(

I do have the very latest MIF though as posted on google code last week.


Brian

hendricd
5 Nov 2009, 8:42 AM
@paolocavelli -- To start:

b.html has no support for hideMode:'nosize', so remove all those references.

Ext.Layouts really needs resolvable CSS rules and x-hide-nosize just isn't avail on that page (careful what you copy/paste, and where).

Your static IFRAME sample uses fixed width and height:


<iframe src="b.html" width=800 height=600></iframe>MIF uses a style rule for auto-sizing during reflows:

.ux-mif-fill{height:100%;width:100%;}Make sure the body of b.html accounts for those differences, and you may want to add autoScroll : true/false to the MIFPanel as that also has an effect on b.html's body (some browser's honor the overflow:auto setting of the IFRAME in the body, and others do not).

paolocavelli
6 Nov 2009, 7:01 AM
@paolocavelli -- To start:

b.html has no support for hideMode:'nosize', so remove all those references.

Ext.Layouts really needs resolvable CSS rules and x-hide-nosize just isn't avail on that page (careful what you copy/paste, and where).

Your static IFRAME sample uses fixed width and height:


<iframe src="b.html" width=800 height=600></iframe>MIF uses a style rule for auto-sizing during reflows:

.ux-mif-fill{height:100%;width:100%;}Make sure the body of b.html accounts for those differences, and you may want to add autoScroll : true/false to the MIFPanel as that also has an effect on b.html's body (some browser's honor the overflow:auto setting of the IFRAME in the body, and others do not).

I removed references to hideMode:'nosize'.
I tried with and without autoScroll : true/false in MIFPanel configuration.
Nothing changes: the behaviour remains unpredictable. Sometimes you get a good interface, sometimes a bad one.
I saw that the problem is again in table layout. I was wrong when I said that the error in the instruction
return c.getDomPositionEl().up('table', 5).dom.parentNode === (target.dom || target); (ext-all-debug.js line 18326)

c.getDomPositionEl().up("table",5) is nullarises only when I use a MessageBox while building the interface.
It happens even without MessageBox (probably less frequently).
When the form hasn't right sizes, the problem is caused by the same error in table layout, error that breaks the process of resizing, I suppose.
This code of table layout is new in 3.0.3 (ChangeLog: Ext.layout.TableLayout: Added a fix that allows items to be moved within a table layout. Note that insertion still isn't supported.)

Isn't it possible that something in the new code goes in conflict with MIF code?

hendricd
6 Nov 2009, 8:14 AM
Is the problem in a.html or b.html (No MIF code there)?

paolocavelli
6 Nov 2009, 8:17 AM
problem is in rendering b.html within a MIF
b.html in a indipendent window or in a frame or in a iframe has no problem
b.html in a MIF sometimes is good, somethis is bad.

hendricd
6 Nov 2009, 8:29 AM
Since b.html does not have MIF loaded in it, I suspect you have a layout issue.

Would you like me to move your posts to the Help Forum for a wider audience?

paolocavelli
6 Nov 2009, 8:33 AM
as you like

Drayton
11 Nov 2009, 6:15 AM
Hi

I'm having all sorts of trouble with cache being undefined in miframe 2.0.1 and ext 3.0 r5611

Example:

cache._elCache is undefined
http://iea.local/iea/lib/js/iea/src/ux/miframe-debug.js
Line 404Any ideas?

hendricd
11 Nov 2009, 6:32 AM
Hi

I'm having all sorts of trouble with cache being undefined in miframe 2.0.1 and ext 3.0 r5611

Example:

cache._elCache is undefined
http://iea.local/iea/lib/js/iea/src/ux/miframe-debug.js
Line 404Any ideas?

That's because the Ext Core SVN builds have just introduced an entirely new strategy for managing orphans, leaks, events, and Element caches, once again -- breaking MIF (possibly other ux's in the process).

Now, I must revise it to work on either 'strategy' (and massively re-test all over again /:) )

When (you're all going to ask) ? No flippin idea.

spiderman123
13 Nov 2009, 12:03 AM
This release (Available on first post of this thread) adds



support for Ext 3.1



submitAsTarget support for autoLoad:



MIF = Ext.create({
xtype:'iframepanel',
autoLoad:{
url : 'demos/mif/postpdf.php',
method : 'POST',
params : {file:'ex1.pdf'},
submitAsTarget : true
}
});
This means you can POST to MIF frames at-will in your Layouts. :-?

Ext.ux.ManagedIFrame.CSS is now public, which means you can now manipulate the CSS engine of any document context.

hi hendricd,

can i use loadMask with autoLoad?

thx

hendricd
13 Nov 2009, 4:42 AM
hi hendricd,

can i use loadMask with autoLoad?

thx

Sure, just define a loadMask config along with that:



MIF = Ext.create({
xtype:'iframepanel',
loadMask: 'Loading Document....',
autoLoad:{
url : 'demos/mif/postpdf.php',
method : 'POST',
params : {file:'ex1.pdf'},
submitAsTarget : true
}
});

Depending on how local your server is however, the loadMask might not appear long for a PDF because of the way they are rendered by the browser.

You can see a demo of an autoLoad PDF config here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit).

hendricd
15 Nov 2009, 1:03 PM
BUT IT'S ONLY for Ext 3.1 (or any Ext 3.x SVN build where Ext.elCache is defined)

It will not work with ANY OTHER PAST 3.0.x release.

KommS
17 Nov 2009, 2:32 AM
Hi hendricd,

the loading mask doesn't work for me and I have no idea why. Can you help me please.
I use Ext 3.0.3 and mif 2.0.1

Here my code:


// class definition
Ext.namespace('MYNAMESPACE.panels');

MYNAMESPACE.panels.MainContentPanel = Ext.extend(Ext.ux.ManagedIFrame.Panel, {

autoLoad: {
url: 'http://someurl.php',
method: 'get',
params: {doesnT:'matter', works:'fine'},
nocache: true,
submitAsTarget: true
},
loadMask: 'Loading...',

initComponent: function() {
MYNAMESPACE.panels.MainContentPanel.superclass.initComponent.apply(this, arguments);
}
});


// ... var contentPanel is part of a borderLayout
contentPanel = new MYNAMESPACE.panels.MainContentPanel({
id: 'contentPanel',
region: 'center',
title: 'Welcome',

loadMask: 'Loading...',

loadContentPage: function(nodeObj, url, title){
this.setTitle(title);
this.load({
url: url,
text: "loading...",
nocache: true
});
}
});
// ...
Everything works fine excepting the Loading Mask.

Thank you!

hendricd
17 Nov 2009, 4:10 AM
@KommS -- That release of MIF requires that the loadMask be defined as a config object, to permit additional options like:


loadMask : { msg : 'Loading...' , hideOnReady: true}

MIF 2.1 will permit a simple string as well.

Give that a shot.

KommS
17 Nov 2009, 4:26 AM
Hi hendricd,

thanks for your answer, but it still doesn't work.



contentPanel = new MYNAMESPACE.panels.MainContentPanel({
id: 'contentPanel',
region: 'center',
title: 'Welcome',

//loadMask: { msg: 'Loading...' , hideOnReady: true},

loadContentPage: function(nodeObj, url, title){
this.setTitle(title);
this.load({
url: url,
nocache: true
});
}
});




MYNAMESPACE.panels.MainContentPanel = Ext.extend(Ext.ux.ManagedIFrame.Panel, {

autoLoad: {
url: 'http://someurl.php',
method: 'get',
params: {sbwtyp:'sbaum', id:'F'},
nocache: true,
submitAsTarget: true
},
loadMask: { msg: 'Loading...' , hideOnReady: true},

initComponent: function() {
MYNAMESPACE.panels.MainContentPanel.superclass.initComponent.apply(this, arguments);
}
});


Any other idea?

Thank you!

hendricd
17 Nov 2009, 4:57 AM
Could also be that the Form submission is blocking the browser slightly. To confirm, try this:



loadContentPage: function(nodeObj, url, title){
this.setTitle(title);
this.loadMask.show();
this.load.defer(20, this,[{
url: url,
nocache: true
}]);
}
MIF 2.1 adds additional timing improvements to the loadMask to account for that, but I doubt you'll ever see them in the MIF 2.0 build. It's going to be obsolete as soon as Ext 3.1 comes out.

briang
17 Nov 2009, 8:58 PM
Doug,

I know a few people have asked this and I've tried the various solutions without any luck. I have a Viewport with a layout manager that I've inherited responsibility for updating. Inside of one tab is an iframe (for previewing what the app is creating by loading it from the same server). I saw a reference to something about heights that would be fixed in an upcoming Ext build but unfortunately I tried it with 3.0.3 fresh off the wire and your 2.0.1 latest and still no dice. I'm going to show my relevant code and post a screenshot so you can see what's happening in the hopes I have a simple mistake that I'm missing.



/* what I used to have when using Ext 2.3 and MIF 1:
var previewPane = new Ext.ux.ManagedIframe.Window({
html: '',
loadMask: {msg: 'Refreshing preview...'}
});
*/
// what i'm trying to use now:
var previewPane = new Ext.ux.ManagedIFrame.Panel({
xtype:'iframepanel',
loadMask: {msg: 'Refreshing preview...'}
});

...

tabpanel = new Ext.TabPanel({
activeTab:2,
deferredRender: false,
layoutOnTabChange: true,
items:[{
id: 'EditPane',
title: 'Edit',
closable:false,
autoScroll:true
},{
id: 'PreviewPane',
title: 'Preview',
closable:false,
layout:'border',
listeners: {
// auto-submit the form when clicking the tab
'activate' : function(tab) {
var frm = Ext.getCmp('previewFormPanel').getForm();
previewPane.setSrc('/event/preview.formonly/uidEvent/' + uidEvent + '/?' + frm.getValues(true), true);
}
},
items: [{
title: 'Preview Options',
region:'north',
id: 'PreviewPaneTop',
collapsible: true,
collapsed: true,
items: previewForm,
listeners:{
'expand': {
fn: function(p){
p.doLayout();
},
single: true
}
}

},{
region: 'center',
id: 'PreviewPaneBottom',
items: previewPane
}]
},{
id: 'HelpPane',
title: 'Help',
autoLoad: helpUrl,
autoScroll:true
}]
});



What's strange is that in Chrome it does work as desired; the iframe takes up 100% of the height as it did in 2.3/1.x. In Firefox/IE however it only takes up about 40-50%. I can set it with an arbitrary height but I don't know that at runtime so I need it to fill the panel.

Any pointers would be greatly appreciated!

Brian

hendricd
18 Nov 2009, 3:46 AM
@briang-

The main issue:

* center region is overnested (without a fit layout) so the MIF has no height. Make the MIFPanel THE center region:

var previewPane = new Ext.ux.ManagedIFrame.Panel({
xtype:'iframepanel',
region : center,
loadMask: {msg: 'Refreshing preview...'}
});* try to avoid a doctype if possible

briang
18 Nov 2009, 10:41 AM
Doug,

Many thanks, the overnesting was something I was suspicious of from reading through here but having inherited the code, I wasn't sure (relatively new to Ext obviously). Here's what I wound up with for the record which properly works in all the browsers:



var previewPane = new Ext.ux.ManagedIFrame.Panel({
xtype:'iframepanel',
id: 'PreviewPaneBottom',
region: 'center',
loadMask: {msg: 'Refreshing preview...'}
});

...


tabpanel = new Ext.TabPanel({
activeTab:2,
deferredRender: false,
layoutOnTabChange: true,
items:[{
id: 'EditPane',
title: 'Edit',
closable:false,
autoScroll:true
},{
id: 'PreviewPane',
title: 'Preview',
closable:false,
layout:'border',
listeners: {
// auto-submit the form when clicking the tab
'activate' : function(tab) {
var frm = Ext.getCmp('previewFormPanel').getForm();
previewPane.setSrc('/em360/index.cfm/event/preview.formonly/uidEvent/' + uidEvent + '/?' + frm.getValues(true), true);
}
},
items: [{
title: 'Preview Options',
region:'north',
id: 'PreviewPaneTop',
collapsible: true,
collapsed: true,
items: previewForm,
listeners:{
'expand': {
fn: function(p){
p.doLayout();
},
single: true
}
}

},previewPane
]
},{
id: 'HelpPane',
title: 'Help',
autoLoad: helpUrl,
autoScroll:true
}]
});


The bolded bit replaced the in-line, nested item. Thanks!

hendricd
25 Nov 2009, 5:57 AM
New MIF 2.1 build (zip) just posted for compatibility with latest Ext 3.1 SVN.

zombeerose
25 Nov 2009, 12:46 PM
I have another IE6 issue for you hendricd. My site is using https and I have a Ext.ux.ManagedIFrame.Panel that loads a same-site page at startup. I am loading the MIF Panel by calling the "load" method with a url config. In IE6, I receive the following message when the page loads. "This page contains both secure and nonsecure items." Have you encountered this before?

I was able to work around the issue by adding the following code into my initComponent method but I was hoping you had other suggestions.


if (Ext.isIE){
this.frameConfig = this.frameConfig || {};
Ext.apply(this.frameConfig, {src:Ext.SSL_SECURE_URL});
}


BTW, I'm running Ext 3.0.3 with MIF 2.0.1

Thx

hendricd
25 Nov 2009, 12:58 PM
Can you post your MIF config and load attempt?

When does it happen, on the load attempt, or when initially rendered ?

zombeerose
25 Nov 2009, 1:08 PM
This is the code that creates the MIFPanel


this._mif = new Ext.ux.ManagedIFrame.Panel({
autoLoad: this.mifUrl
,collapsible: false
,header: true
,region: 'center'
,split: true
,title: this.mifTitle
});


When I disabled the autoload config and tried it again in IE6, the error still occurs. Therefore, I believe it happens when the MIFPanel is rendered.

agalue
25 Nov 2009, 1:20 PM
Hello,

I'm interested in show a PDF report on a ManagedIFrame, but my problem is that the REST service that produces the PDF need the report parameters as a JSON object. So, I need to POST a JSON data instead of key/value pairs (standard form submition).

Is possible to do this with ManagedIframe ? any other suggestion ?

Something like this:


submitAsTarget: {
jsonData: getReport(),
url: reportUrl
}instead of


submitAsTarget: {
params: getReport(),
url: reportUrl
}

hendricd
25 Nov 2009, 4:09 PM
@agalue --

REST? JSON only? hmm? :-? A bit contra, no?

IF you have some control over the REST service (whatever that means to you ;) ), the only thing I can ponder is a dynamic form with the textarea containing your JSON. That could go something like this (p-coded):




new MIF({
autoLoad :{
submitAsTarget : true,
form : Ext.DomHelper.append(Ext.getBody(),
{
tag: 'form',
cls : 'x-hidden',
cn : [
{tag : 'textarea', value: Ext.encode( reportConfig ), name: 'reportconfig' }
]
})
},
params : { anyOtherValue : ?? }
}
});

Tweak it !

agalue
26 Nov 2009, 11:16 AM
I followed your suggestion; and the code that finally I used was:


new MIF({
autoLoad :{
submitAsTarget : true,
url: reportUrl,
params: { reportconfig: Ext.encode(reportConfig) }
}
});

It is working now ... thanks.

Some tricks were required on server side of course ;)

Dave.Sanders
27 Nov 2009, 1:44 PM
Ok, I'm missing something, and I feel like an for asking this because I either am not searching for the right terms, or I'm looking in the wrong places. But:

I want to be able to create an iframe, then set its content with a string - not a src file at another location. So, in the end, I want to have a string with HTML code, that I have already received and modified via Ext.Direct, wrapped in the iframe, in the dom.

Does the ux help me do this, or should I just manipulate the dom?

Also, ts this ux overkill for doing this? I was hoping that it would take some of the pain out of the process for me, rather than just writing my own iframe, but so far, I've been stymied.

Thanks

hendricd
27 Nov 2009, 1:59 PM
@Dave--
No, you came to right place:

With the MIF package loaded, using MIF Element primitives:



var frameElement = Ext.getBody().createChild({tag:'iframe'});
frameElement.update(yourHTML);
That's pretty much it. ;)

If you wanted a nice Panel:


var FP = Container.add({
title : 'Results',
xtype : 'iframepanel',
html : yourHTML
});
//later:
FP.update(yourHTML);


and it's submitAsTarget method would allow you to POST direcly to MIF (without the need for an AjaxRequest).

Dave.Sanders
27 Nov 2009, 3:01 PM
Cool, thanks for the help.

I have the panel working now - turned out I had an unrelated bug. However, what's the best method for updating the iframe inside the panel with new HTML?

Again, thanks for the help!
D

hendricd
27 Nov 2009, 3:03 PM
Cool, thanks for the help.

I have the panel working now - turned out I had an unrelated bug. However, what's the best method for updating the iframe inside the panel with new HTML?

Again, thanks for the help!
D

MIFPanel.getFrame().update(markup);

Dave.Sanders
27 Nov 2009, 3:08 PM
MIFPanel.update(markup);

Hmm, don't see that in Firebug. But I did find:

MIFPanel.frameEl.update(markup);

assuming you mean that MIFPanel is the panel I created.

hendricd
27 Nov 2009, 3:08 PM
Hmm, don't see that in Firebug. But I did find:

MIFPanel.frameEl.update(markup);

assuming you mean that MIFPanel is the panel I created.

Yes:


MIFPanel.getFrame().update(markup);

Dave.Sanders
28 Nov 2009, 7:38 AM
Ok having an issue, and found a possible bug.

Issue:

I'm running into a "cache is null" error when I try to do the following:
1. Open a window that includes a managed IFrame Panel
2. Modify that iframe by adding in HtmlEditors at various points. (via rendering to specific DIVS in the iframe html.
3. Close (not hide) the window
4. Try to open the window again.

I get an error in multidom at line 334 that the cache is null.

How do I close my window to make sure that my iframe is completely destroyed and isn't cached any more, and will load up fresh and new the next time? I am manually destroying all of my htmleditors when I close the window. I saw the Managed IFrame Element has a "forceNew" property but that doesn't seem to exist on the panel? (or at least, didn't do anything)

Second the possible bug:

I noticed that in the multidom.js at line 100, the line is:


if(el = docCache._elCache[dom.id]){

Shouldn't the equals be a compare operator and not an assignment operator? (ie. '==' instead of '=')

thx
D

hendricd
28 Nov 2009, 7:54 AM
@Dave -- That would occur of you were using the wrong MIF version with the wrong Ext version.

MIF 2.0.x is only for Ext 3.0.0 - 3.0.3
MIF 2.1 is only for Ext 3.1[SVN] or higher.

Dave.Sanders
28 Nov 2009, 8:11 AM
I'm using ext 3.0.3 and MIF 2.0.1

hendricd
28 Nov 2009, 8:27 AM
@Dave--
Depending on what this means:



2. Modify that iframe by adding in HtmlEditors at various points. (via rendering to specific DIVS in the iframe html.

Rendering HTMLEditors into the child IFRAME is going to render IFRAMES within IFRAMES. You can likely render, but the key listeners for those nested editors are not bound to the correct document context. Ext does not support targeted-event-binding (per document). It will only handle events for the document context in which Ext was loaded.

Why not render an HTMLEditor(it is an iframe) into a regular Ext.Window instead? Is there a compelling reason to nest multiple frames for editing? :-?



Second the possible bug:

I noticed that in the multidom.js at line 100, the line is:


if(el = docCache._elCache[dom.id]){Shouldn't the equals be a compare operator and not an assignment operator? (ie. '==' instead of '=')

No. That is coded as intended (it handles the assignment AND asserts a value at the same time. ;)

Dave.Sanders
28 Nov 2009, 8:34 AM
The application is a content management system where I'm trying to pull in the template page, which is fully described HTML, including stylesheets, etc, and replace key portions of the template with panels. (actually I misspoke, I'm not putting htmleditors in there now - those will be in a dialog)

So, I'm trying isolate the page template from the rest of the ext app so that CSS doesn't interfere.

I'm doing some debugging and found something interesting - if I put in a break point in multidom and loop through the code, it works. If I remove the breakpoint then it doesn't. This leads me to believe that I'm doing something in the wrong order and something isn't ready when it needs to be - but by delaying it it works.

Now that I've changed from using embedded HTMLEditors, I think I'm going to do some other HTML trickery before the iframe is loaded to link the template panels back to my code via other JS functions. So this question is probably moot besides an academic exercise. :)

Re: the asserts -yeah, I see that now, not a pattern that I tend to use just because it prompts questions from people like me. ;) and it could cause you debugging headaches later.

hendricd
28 Nov 2009, 8:41 AM
I would recommend you load either miframe.js or miframe-debug.js from the /builds directory. Things are arranged properly there. ;)

Tinki
30 Nov 2009, 4:55 AM
Using IE8 and script looking like


<script type="text/javascript" src='js/ext/miframe_2.js'></script>
...
<iframe id="divId"></iframe>
...
<script type="text/javascript">
Ext.onReady(function(){
var MIF = new Ext.ux.ManagedIFrame.Element("divId");
MIF.disableMessaging = false;
MIF.on('message', function(){
alert(1);
});
MIF.setSrc("test.html");
MIF.on('message', function(){
alert(2);
});
sendMessage("blablabla"); // <- This line causes error "Object expected"
});
</script>


Contents of test.html:


...
<script type="text/javascript">
Ext.onReady(function(){
sendMessage("blablabla"); // <- The same "Object expected" error
});
</script>
...

Tinki
30 Nov 2009, 5:31 AM
Why can

sendMessage("blablabla");
cause "Object expected" error?
Doesn't depend if executed in IFrame or in Host window.
IE8, Ext 3.0.1, MIFrame 2.0.1

Tinki
30 Nov 2009, 2:00 PM
Dealed with "Object expected" error - need to work with frame when "documentloaded" event fired. But messaging still don't work. Does anybody have any living example of messaging (the one from FAQ in not working:(()?

mschwartz
1 Dec 2009, 7:26 AM
@agalue --

REST? JSON only? hmm? :-? A bit contra, no?



I'm not a big fan of REST (POST, POST, POST!)

However, take a look at CouchDB. Aside from it being very interesting for what it is, the API is REST though everything you POST is JSON and everything you GET is JSON, too.

Tinki
1 Dec 2009, 7:59 AM
Still working around creating of MIFrame, which child page would have "sendMessage" method. Seems that child is ordinary IFrame and it doesn't understand sendMessage("..."). Seen some code for "onerror" event in IFrame - does it parse exception on child frame and converts it to message?
Will appreciate any messaging example, working under ExtJs 3.0.3 IE8.

agalue
1 Dec 2009, 12:50 PM
Hello all,

I'm using ManagedIframe to show a PDF using submitAsTarget and it works great on FireFox, Safari and Chrome using browser's Acrobat Plugin (on windows) or Preview plugin (on mac).

But, with IE8 it shows HTTP ERROR 405: Method not allowed. The exact message is:

"This error (HTTP 405 Method Not Allowed) means that Internet Explorer was able to connect to the website, but the site has a programming error."

Is the PDF rendering with submitAsTarget supported in IE8?
Any workaround on this?

agalue
2 Dec 2009, 5:33 AM
Hello all,

I'm using ManagedIframe to show a PDF using submitAsTarget and it works great on FireFox, Safari and Chrome using browser's Acrobat Plugin (on windows) or Preview plugin (on mac).

But, with IE8 it shows HTTP ERROR 405: Method not allowed. The exact message is:

"This error (HTTP 405 Method Not Allowed) means that Internet Explorer was able to connect to the website, but the site has a programming error."

Is the PDF rendering with submitAsTarget supported in IE8?
Any workaround on this?

Sorry, it was my fault... please ignore my last post.

I had a problem in my own code, the ManagedIFrame with PDF/submitAsTarget works as expected on IE8 ....

TomChiverton
3 Dec 2009, 2:16 AM
On FireFox 3.5, with Ext 3.0 and the matching ManagedIframe class, the following code works as expected to create tabs with IFRAME's for the content of each.

However, it also places the 2nd IFRAME containing the second URL under the tabs. This is then removed once a tab is picked.

Any ideas why this may be happening ? A google around hasn't turned up this happening...



Ext.onReady(function(){

var tabpanel2 = new Ext.TabPanel({
tabPosition:'left',
activeTab: 0,
tabWidth:110,
height:"480",
renderTo:'tabs2',
defaults:{autoScroll: true},

items:[
{
title:"Generate X
body:new Ext.ux.ManagedIframe({autoCreate:{ src:"/x.cfm", frameBorder: 0, cls:'x-panel-body',width: '99%', height: 480}})
},
{
title:"Y details",
body:new Ext.ux.ManagedIframe({autoCreate:{ src:"/y.cfm", frameBorder: 0, cls:'x-panel-body',width: '99%', height: 480}})
},
{
title:'Z report',
html:'TBC'
},
{
title:'Narrative',
html:'TBC'
}
]
});

});//onReady

zombeerose
3 Dec 2009, 10:47 AM
Another HTTPS issue - I'm using ExtJS 3.0.3 and MIF 2.0.1

I am performing Single-Sign-On authentication from a website to the other internal sites for our company. They are not same-domain though. Everything tested fine when I was running from HTTP to HTTP(S). However, I ran into "Permission Denied" errors in IE8 once I pushed onto our HTTPS production server.

IE8 was complaining about the line
win.location.href = s; in the reset function. I was able to address the issue by trapping the exception. Below is the function with the tweak:



reset : function(src, callback, scope) {

this._unHook();
var loadMaskOff = false;
var s = src, win = this.getWindow();
var O = this._observable;
if(this.loadMask){
loadMaskOff = this.loadMask.disabled;
this.loadMask.disabled = false;
}
this.hideMask(true);

if(win){
this.isReset= true;
var cb = callback;
O.addListener('_docload',
function(frame) {
if(this.loadMask){
this.loadMask.disabled = loadMaskOff;
};
Ext.isFunction(cb) && (cb = cb.apply(scope || this, arguments));
O.fireEvent("reset", this);
}, this, {single:true});

Ext.isFunction(s) && ( s = src());
s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s;
try {
win.location.href = s;
} catch (ex) {
O.fireEvent.call(O,'exception', this, ex);
}
}

return this;
},


Any ideas?

cobnet
3 Dec 2009, 2:21 PM
using 2 and ext 3.0.3 and getting the following error when just loading the multidom.js and mif.js and no use of manageiframe coding receiving the following error msg in firebug:

uncaught exception: Ext Release is not supported

any ideas?

TomChiverton
4 Dec 2009, 5:59 AM
uncaught exception: Ext Release is not supported

Your Ext version and MIF versions aren't compatable. Note that MID 2.1 requires Ext 3.1 for instance.

hendricd
4 Dec 2009, 8:02 PM
On FireFox 3.5, with Ext 3.0 and the matching ManagedIframe class, the following code works as expected to create tabs with IFRAME's for the content of each.

However, it also places the 2nd IFRAME containing the second URL under the tabs. This is then removed once a tab is picked.

@Tom --
Well, you're getting warmer, but know that MIF comes in Panel and Window forms as well. MIFPanel would be the recommended choice for a layout:



Ext.onReady(function(){

var tabpanel2 = new Ext.TabPanel({
tabPosition:'left',
activeTab: 0,
tabWidth:110,
height:"480",
renderTo:'tabs2',
defaults:{autoScroll: true},

items:[
{
xtype : 'iframepanel',
title:"Generate X,
defaultSrc:"/x.cfm"
},
....The higher level MIF classes contain the Visibility fixes required for an IFRAME to survive the windy seas of DOM reflow in most layouts.

The MIF.Element is bit more primitive. ;)

hendricd
4 Dec 2009, 8:17 PM
Another HTTPS issue - I'm using ExtJS 3.0.3 and MIF 2.0.1

I am performing Single-Sign-On authentication from a website to the other internal sites for our company. They are not same-domain though. Everything tested fine when I was running from HTTP to HTTP(S). However, I ran into "Permission Denied" errors in IE8 once I pushed onto our HTTPS production server.

IE8 was complaining about the line
win.location.href = s; in the reset function. I was able to address the issue by trapping the exception. Below is the function with the tweak:



reset : function(src, callback, scope) {

this._unHook();
var loadMaskOff = false;
var s = src, win = this.getWindow();
var O = this._observable;
if(this.loadMask){
loadMaskOff = this.loadMask.disabled;
this.loadMask.disabled = false;
}
this.hideMask(true);

if(win){
this.isReset= true;
var cb = callback;
O.addListener('_docload',
function(frame) {
if(this.loadMask){
this.loadMask.disabled = loadMaskOff;
};
Ext.isFunction(cb) && (cb = cb.apply(scope || this, arguments));
O.fireEvent("reset", this);
}, this, {single:true});

Ext.isFunction(s) && ( s = src());
s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s;
try {
win.location.href = s;
} catch (ex) {
O.fireEvent.call(O,'exception', this, ex);
}
}

return this;
},
Any ideas?

@zombeerose --
For a test, create your MIF this way on IE8 and report back on what happens. :-?


{
xtype : 'iframepanel',
resetUrl : 'javascript:void(0)',
defaultSrc:"/someWhere/else.html"
},

hendricd
4 Dec 2009, 8:18 PM
Your Ext version and MIF versions aren't compatable. Note that MID 2.1 requires Ext 3.1 for instance.

@cobnet -- Tom's got you on the right track.. ;)

hendricd
5 Dec 2009, 8:25 AM
Still working around creating of MIFrame, which child page would have "sendMessage" method. Seems that child is ordinary IFrame and it doesn't understand sendMessage("..."). Seen some code for "onerror" event in IFrame - does it parse exception on child frame and converts it to message?
Will appreciate any messaging example, working under ExtJs 3.0.3 IE8.

@Tinki --

The MIF package ships with the messaging API in a separate script (not many use messaging). Simply include mifmsg.js after yourmiframe[-debug].js script tag.

Tinki
6 Dec 2009, 11:58 PM
@Tinki --
The MIF package ships with the messaging API in a separate script (not many use messaging). Simply include mifmsg.js after yourmiframe[-debug].js script tag.
Still no luck. Have frame page:


<html>
<head>
<script type="text/javascript" src='js/ext/adapter/ext/ext-base.js'></script>
<script type="text/javascript" src='js/ext/ext-all.js'></script>
<script type="text/javascript">
try {
Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';
} catch (ex){}
</script>
<script type="text/javascript" src='js/ext/miframe.js'></script>
<script type="text/javascript" src='js/ext/mifmsg.js'></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var chiefTable = new Ext.Panel({
renderTo: 'mainDiv',
autoScroll: false,
tbar: mainTBar,
plugins: [new Ext.ux.plugins.FitToParent('mainDiv')],
items: [{
width: 250,
height: '100%',
items: tree
},{
columnWidth: 1,
layout: 'fit',
height: '100%',
items: [{
xtype: 'mif',
id: 'centerFrame',
name: 'centerFrame',
frameConfig: {id: 'centerIFrame'},
message: function(){
alert("!!!!");
},
listeners: {
message: function(){
alert("!!!!");
},
domready: function(frame){
if(frame.domWritable()){
frame.execScript('init()');
}
},
exception: function(frame, exc){
alert(exc.message);
}
},
border: false,
autoScroll:true,
disableMessaging: false,
margins: '0 0 0 0',
defaultSrc : 'startPage.html'
}]
}]
});
});
</script>

and startPage.html


...
<body>
<script>
var init = function(){
sendMessage("I'm awake !","startup");
};
</script>
</body>


Only "exception" handler is working on MIF with "Object expected" error.:(

TomChiverton
7 Dec 2009, 1:30 AM
@Tom --
well. MIFPanel would be the recommended choice for a layout:

That's spot on, cheers ! Looks like the examples at the start of the thread are a bit out of date.

cobnet
7 Dec 2009, 1:44 AM
Your Ext version and MIF versions aren't compatable. Note that MID 2.1 requires Ext 3.1 for instance.


Interesting looks like miframe2.zip is for Ext 3.0.3???????? I have tried all versions and receive the same message from each?

any other ideas?

Tinki
7 Dec 2009, 5:03 AM
Cant get it, where are the posts I'm writing?:-?
Still no luck:(
My parent frame looks like this:

<script type="text/javascript" src='js/ext/adapter/ext/ext-base.js'></script>
<script type="text/javascript" src='js/ext/ext-all.js'></script>
<script type="text/javascript">
try {
Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';
} catch (ex){}
</script>
<script type="text/javascript" src='js/ext/miframe.js'></script>
<script type="text/javascript" src='js/ext/mifmsg.js'></script>
....
<script type="text/javascript">
Ext.onReady(function(){
var chiefTable = new Ext.Panel({
renderTo: 'mainDiv',
autoScroll: false,
tbar: mainTBar,
plugins: [new Ext.ux.plugins.FitToParent('mainDiv')],
items: [{
width: 250,
height: '100%',
items: tree
},{
columnWidth: 1,
layout: 'fit',
height: '100%',
items: [{
xtype: 'mif',
id: 'centerFrame',
name: 'centerFrame',
frameConfig: {id: 'centerIFrame'},
listeners: {
message: function(){
alert("!!!!");
},
domready: function(frame){ },
exception: function(frame, exc){
alert(exc.message);
}
},
border: false,
autoScroll:true,
disableMessaging: false,
margins: '0 0 0 0',
defaultSrc : 'startPage.html'
}]
}]
});
});
</script>
And "startPage.html"

...
<body>
<script type="text/javascript">
sendMessage("I'm awake !","startup");
</script>
</body>

Only alert with exception "Object expected" is shown.

Tinki
7 Dec 2009, 5:18 AM
Still no luck:(
My parent frame looks like this:

<script type="text/javascript" src='js/ext/adapter/ext/ext-base.js'></script>
<script type="text/javascript" src='js/ext/ext-all.js'></script>
<script type="text/javascript">
try {
Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';
} catch (ex){}
</script>
<script type="text/javascript" src='js/ext/miframe.js'></script>
<script type="text/javascript" src='js/ext/mifmsg.js'></script>
....
<script type="text/javascript">
Ext.onReady(function(){
var chiefTable = new Ext.Panel({
renderTo: 'mainDiv',
autoScroll: false,
tbar: mainTBar,
plugins: [new Ext.ux.plugins.FitToParent('mainDiv')],
items: [{
width: 250,
height: '100%',
items: tree
},{
columnWidth: 1,
layout: 'fit',
height: '100%',
items: [{
xtype: 'mif',
id: 'centerFrame',
name: 'centerFrame',
frameConfig: {id: 'centerIFrame'},
listeners: {
message: function(){
alert("!!!!");
},
domready: function(frame){ },
exception: function(frame, exc){
alert(exc.message);
}
},
border: false,
autoScroll:true,
disableMessaging: false,
margins: '0 0 0 0',
defaultSrc : 'startPage.html'
}]
}]
});
});
</script>
And "startPage.html"

...
<body>
<script type="text/javascript">
sendMessage("I'm awake !","startup");
</script>
</body>

Only alert with exception "Object expected" is shown.

zombeerose
7 Dec 2009, 7:44 AM
@zombeerose --
For a test, create your MIF this way on IE8 and report back on what happens. :-?


{
xtype : 'iframepanel',
resetUrl : 'javascript:void(0)',
defaultSrc:"/someWhere/else.html"
},



I added the code you suggested but no changes - still permission denied. I added an alert before and after this line
s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s; to see the value of "s." Before "s" is undefined and after, "s" is
javascript:""

This is the frame config:


this._frame = new Ext.ux.ManagedIFrame.Panel({
defaultSrc: this.url
,height: 0 //so user doesn't see the frame
,listeners: {
documentloaded: {scope:this, fn:this.destroyFrame}
}
,resetUrl : 'javascript:void(0)'
,scripts: false
});

TomChiverton
8 Dec 2009, 1:37 AM
I added the code you suggested but no changes - still permission denied. I added an alert before and after this line
s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s;
I'd be tempted to rewrite that line so it's less compact and more readable, set a break point, and see what the values of the various parts are.

Drayton
9 Dec 2009, 3:03 AM
I'm also having trouble in this section of the code:

When running miframepanel as tab and close the tab in Chrome and IE8 the following triggers an error:



Ext.isFunction(s) && ( s = src());
s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s;
win.location.href = s;Error:
Uncaught TypeError: Cannot set property 'href' of undefined

Edit:
Occurs in Chrome 3.0.195.33, IE 8.0.6001.18828 (tested with Ext r5678 & r5748)

Edit 2:
Does not cause any problems in FF 3.5.5 and Opera 10.10

cobnet
9 Dec 2009, 9:29 PM
Interesting looks like miframe2.zip is for Ext 3.0.3???????? I have tried all versions and receive the same message from each?

any other ideas?

Problem is solved now, it seems multidom is different in each version, I was using 2_1 on each attempt. Thanks for taking the time to let me know where to look!!!!

Nice when things work,
til next time....

kohyea
10 Dec 2009, 9:24 PM
Hello hendricd;

First, thanks for your shared your great extendsions!

I want to communicate between ManagedIFramePanel and embedded iframe, but I don't know how to do it, following is my test codes:

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test Iframe</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<!-- LIBS -->
<script type="text/javascript" src="../js/core/adapter/ext-base.js"></script>
<script type="text/javascript" src="../js/core/ext-all.js"></script>

<!-- Test extensions -->
<script type="text/javascript" src="../js/extensions/Ext.ux.ManagedIFrame.js"></script>
<script type="text/javascript" src="../js/extensions/mifmsg.js"></script>
<script type="text/javascript" src="ts-iframe.js"></script>
</head>
<body>
<div id="test-iframe"></div>
</body>
</html>



Javascript(ts-iframe.js):


Ext.ux.TestIframePanel = Ext.extend(Ext.ux.ManagedIFramePanel, {

initComponent: function(){

this.tbar = [{
text: 'Send',
scope: this,
handler: function(){
this.fireEvent('send');
}
}];

Ext.ux.TestIframePanel.superclass.initComponent.call(this);


this.addEvents('send', 'receive');
},


initEvents: function(){
Ext.ux.TestIframePanel.superclass.initEvents.call(this);

this.on('send', function(){
alert('I want to send message to embedded page: test.html');
}, this);

this.on('receive', function(){
alert('I want to receive message from embedded page');
});
}
});
Ext.onReady(function(){
Ext.QuickTips.init();

var iframePanel = new Ext.ux.TestIframePanel({
defaultSrc: 'test.html',
disableMessaging: false,
renderTo: 'test-iframe',
width: 600,
height:400
});
});


embedded iframe (test.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Mon, 22 Jul 2002 11:12:01 GMT">
<script language="javascript">
function send(){
//I want to send message to TestIframePanel
}
function receive(message){
//I want to receive message from TestIframePanel here!
document.getElementById('logger').innerHTML = message.data;
}
</script>
</head>
<body text="#000000" bgcolor="#ffffff" link="#00000" vlink="#00000">
<a href="javascript:send();">Send Message to TestIframePanel</a><br />
<div id="logger"></div>
</div>
</body>
</html>



Thanks a lot.
Kohyea.

luca.santaniello
11 Dec 2009, 12:16 AM
I using Ext 3.0.3 and downloaded miframe2_01.zip

I use Ext.ux.ManagedIFrame.Window and it run.

Do I must import all js file?

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

Txs

hendricd
11 Dec 2009, 1:25 PM
@luca.santaniello--
Review the included readme.txt file. This is likely all you'll need:

<script type="text/javascript" src="js/miframe[-debug].js"></script>
<script type="text/javascript" src="js/mifmsg.js"></script>

kohyea
11 Dec 2009, 2:20 PM
Anyone knows how to solve my problem?

Thanks,
Kohyea.

kohyea
13 Dec 2009, 11:57 PM
I created a test page following the page:
http://www.extjs.com/learn/ManageIframe:Manual:Frame_Messaging#Sending_Cross-frame_Messages

But there is a error told me onhostmessage is not defined.

Air_Mike
14 Dec 2009, 6:53 AM
Please help.

I had no problem with miframe version 2, but with the latest Ext version from SVN I had to use miframe version 2.1 and then problem occurred.

I have desktop implementation and from start menu link I'm creating Ext.ux.ManagedIFrame.Window that has defaultUrl.

So far so good. My desktop is still functioning and I have content in miframe window that I wanted. But when I click button (in that miframe window) that changes location.href of that iframe, content appears and I can work on it, but everything outside that miframe window stops. I can no longer open start menu on my desktop, or work with other windows that I opened earlier.

Another case is when I open window with miframe panel init, content shows and desktop is working (content outside tha miframe) but when I close that window (not destroy just hide) desktop hangs and I can no longer click on anything.

What can it be.

Thank You.

DTT_11-1983
16 Dec 2009, 7:30 PM
I have a TabPanel that content an mIFrame panel. I want to completely remove this mIFrame when changing tab. Which function should I use there ? Thanks

hendricd
17 Dec 2009, 6:53 AM
I have a TabPanel that content an mIFrame panel. I want to completely remove this mIFrame when changing tab. Which function should I use there ? Thanks
@DTT--
That would look like:

yourTabs.remove(someMIFPanel);

mysticav
17 Dec 2009, 3:29 PM
I'm using this extension to load xhtml pages from a database which have relative links to images and css files. My question is the issue with setSrc() function. When I first load the panel, the defaultSrc will be about:blank. Then based on what the user does with the various navigations, I will call setSrc(). What happens if there is a 2 second delay in getting the page from the database, with all of its dependencies, and the user clicks the next page button several times, causing me to call setSrc() again and again(). On approach is that if rendered is false, I just defer the setSrc() until true, but this has the problem that a frustrated user would queue several pages by clicking repeatedly on forward.\

I don't know how desesperate your users are, but maybe the loadMask option could help:
loadMask:{msg:'Please be patience...Stop clicking again and again !'},

mysticav
17 Dec 2009, 7:07 PM
Can somebody explains me why the iframe is generated in this way:


<iframe id="ext-gen1074" class=" ux-mif" frameborder="0" name="card-6" style="overflow: auto; width: 582px; height: 520px;" src="http://mydomain.com">
<html>
<head>
</head>
<body marginwidth="0" marginheight="0">
<embed height="100%" width="100%" name="plugin" src="http://mydomain.com" type="application/pdf"/>
</body>
</html>
</iframe>

Instead of just:


<iframe id="ext-gen1074" class=" ux-mif" frameborder="0" name="card-6" style="overflow: auto; width: 582px; height: 520px;" src="http://mydomain.com"></iframe>


I'm not criticizing anything, just want to know the reason.

mskdev
21 Dec 2009, 10:40 PM
F off Share the full source for this plug in. I tried for more than 3 hours to re-create.

Hagge
22 Dec 2009, 2:24 AM
Please help.

I had no problem with miframe version 2, but with the latest Ext version from SVN I had to use miframe version 2.1 and then problem occurred.

I have desktop implementation and from start menu link I'm creating Ext.ux.ManagedIFrame.Window that has defaultUrl.

So far so good. My desktop is still functioning and I have content in miframe window that I wanted. But when I click button (in that miframe window) that changes location.href of that iframe, content appears and I can work on it, but everything outside that miframe window stops. I can no longer open start menu on my desktop, or work with other windows that I opened earlier.

Another case is when I open window with miframe panel init, content shows and desktop is working (content outside tha miframe) but when I close that window (not destroy just hide) desktop hangs and I can no longer click on anything.

What can it be.

Thank You.

I have the same issue, it seams to happen when the the content you open in the iframe also use the ExtJs library.

peteryjk
22 Dec 2009, 7:31 PM
same problem, when close any 1 iframepanel, other component like tabpanel's tab no more working....
any idea? anything i missing?

Dumbledore
23 Dec 2009, 2:41 AM
Hi,

when i include mif2.1 on my page i can not use Ext.ux.Lightbox. Without mif2.1 all runs fine

Sample-Code runs if you remove mif-files. The imagecontainer will not resized and there ist no black overlay (see Image). Any ideas?


<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />

<!-- Include Ext stylesheets: -->
<link rel="stylesheet" type="text/css" href="lib/js/ext/resources/css/ext-all.css" />

<!-- Include application icon: -->
<link href="/images/app.ico" rel="shortcut icon" />

<!-- Disable IE Image-Toolbar: -->
<meta http-equiv="imagetoolbar" content="no" />

<!-- ExtJS -->
<script type="text/javascript" src="lib/js/ext/adapter/ext/ext-base.js?_dc="></script>
<script type="text/javascript" src="lib/js/ext/ext-all.js?_dc="></script>

<!-- ManagedIFrame -->
<script type="text/javascript" src="lib/js/ext-ux/Ext.ux.ManagedIFrame/uxvismode.js?_dc="></script>
<script type="text/javascript" src="lib/js/ext-ux/Ext.ux.ManagedIFrame/multidom.js?_dc="></script>
<script type="text/javascript" src="lib/js/ext-ux/Ext.ux.ManagedIFrame/mif.js?_dc="></script>

<!-- Ext.ux.Lightbox -->
<script type="text/javascript" src="lib/js/ext-ux/Ext.ux.Lightbox/lightbox.js?_dc="></script>
<link rel="stylesheet" type="text/css" href="lib/js/ext-ux/Ext.ux.Lightbox/lightbox.css" />

<script type="text/javascript" language="javascript">
Ext.onReady(function(){
Ext.ux.Lightbox.register('a[rel^=lightbox]', true); // true to show them as a set

var win = new Ext.Window({
height: 300,
width: 400,
modal: true,
items: [{
xtype : 'panel',
height: 300,
width: 400,
layout: 'fit',
html : '<div class="thumbnail">' +
'<a href="1_256x256.png" rel="lightbox" title="Click on the right side of an image to move forward."><img src="1_256x256.png" width="40" height="40"></a>' +
'</div>' +
'<div class="thumbnail">' +
'<a rel="lightbox" href="2_256x256.png"><img height="40" width="40" src="2_256x256.png"></a>' +
'</div>'
}]
})

win.show();
});
</script>
</head>
<body>

</body>
</html>

dtex-lab
23 Dec 2009, 6:06 AM
Hi
I need to generate directly from javascript an IFrame content... also setting the content-disposition (and maybe the content-type)
So I need to simulate a server response... but the response is generated by the javascript/extjs client side.

Can this extension help me ?
Or someone know some way to do it ? (wihout post to the server something and return it back... ) ?

thanks

fanspace
23 Dec 2009, 6:22 AM
when i use extjs desktop ,i create a window that contain a iframepanel . i call it "a",

in "a " is a formPanel as "b", its target is itself, the target is another page with grid ,i call it "c",

now go to this step ,it seems good, but when i close the "a" the extall-debug.js throw a warn msg, the el.dom.expand is undefined

paolocavelli
23 Dec 2009, 7:50 AM
same problem, when close any 1 iframepanel, other component like tabpanel's tab no more working....
any idea? anything i missing?

same problem. An example follows:

a.html

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<link rel='stylesheet' type='text/css' href='js/ext-3.1.0/resources/css/ext-all.css' />
<script type='text/javascript' src='js/ext-3.1.0/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='js/ext-3.1.0/ext-all-debug.js'></script>
<script type='text/javascript' src='js/ext-3.1.0/Ext.ux.ManagedIframe.2.1.js'></script>
</HEAD>
<BODY CLASS=me_class>
<SCRIPT type='text/javascript'>

function getSframe() {
var iframePanel;
iframePanel = new Ext.ux.ManagedIFrame.Panel( {
header:false,
autoScroll: false,
defaultSrc: 'b.html',
closable: true,
title: 'new'
} );
var tabs = Ext.getCmp('me_tabs');
tabs.setActiveTab(tabs.add(iframePanel));
}

Ext.onReady(function(){

Ext.QuickTips.init();

var tabPanelItems = [];
tabPanelItems[tabPanelItems.length] = new Ext.Panel ({
title: 'title 1',
layout: 'fit',
tbar: [
{ xtype:'button', text:'click me', handler: getSframe}
],
items: [
{ html: ' ' }
]
});

var tabs = new Ext.TabPanel({
id: 'me_tabs',
activeTab: 0,
region:'center',
deferredRender: true,
enableTabScroll:true,
items: [
tabPanelItems
],
layoutOnTabChange: true
});

var win = new Ext.Viewport ({
id: 'xme_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
tabs
]
});
});
</SCRIPT>
</BODY>
</HTML>
b.html


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

Ext.onReady(function(){

Ext.QuickTips.init();

var panel = new Ext.Panel({
region:'center',
layout:'fit',
items: [
{ html: 'hello' }
]
});

var win = new Ext.Viewport ({
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
panel
]
});
});
</SCRIPT>
</BODY>
</HTML>

hendricd
23 Dec 2009, 8:21 AM
@MIF Users:

The ManagedIframe Component Library SVN has and always will be -- open to the public.

Please review it for recent changes frequently as Ext 3.1 is still a bit of a moving target and MIF is often forced to adapt to it.

Complete builds of the latest miframe[-debug].js are available in trunk/builds (http://code.google.com/p/managediframe/source/browse/#svn/trunk/source/build). Mankind need not live on forum zip-files alone. ;)

NOTE: This tabPanel demo (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav)reflects the current MIF build against the latest Ext 3.1 trunk.
Stay current, and report any problems.

Dumbledore
23 Dec 2009, 9:48 AM
me again...

i found the reason for the incompatibility between mif2.1 and Ext.ux.Lightbox. When i replace all Ext.fly to Ext.get inside the Lightbox-Code all runs fine...

@Hendric... Did you overwrite Ext.fly?

hendricd
23 Dec 2009, 10:42 AM
me again...

i found the reason for the incompatibility between mif2.1 and Ext.ux.Lightbox. When i replace all Ext.fly to Ext.get inside the Lightbox-Code all runs fine...

@Hendric... Did you overwrite Ext.fly?

Yes, there is an adjustment made for Ext.fly. I'll check that one again.

fanspace
23 Dec 2009, 7:34 PM
in extjs examples

MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
id:'grid-win',
init : function(){
this.launcher = {
text: 'this is text',
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:'titile',
width:680,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
// html: '<iframe src=news/articleQuery.jsp height=100% width=100% id=articleQueryFrame></iframe>',
//autoLoad:{url:'news/articleQuery.jsp',scripts:true},
/*items :[ new Ext.ux.ManagedIFrame.Panel({
xtype : 'iframepanel',
id : 'articleQuery',
loadMask : {msg: 'loading...... '},
frame : true,
//frameConfig : {autoCreate:{id: 'articleQueryFrame' }},
defaultSrc : 'news/articleQuery.jsp',
layout : 'fit',
bodyBorder : false,
//border : false,
header : false
}) ] ,*/




layout: 'fit',
modal:true
});

win.add({
xtype : 'iframepanel',
id : 'articleQuery',
loadMask : {msg: 'loading...... '},
frame : true,
frameConfig : {autoCreate:{id: 'articleQueryFrame'}},
defaultSrc : 'news/articleQuery.jsp',
layout : 'fit',
header : false
});


}
//alert(win.id);

win.show();
}
});







in articleQuery.jsp
cotain a formPanel
is submit method like this

submit: function() {

this.getEl().dom.action='articleList.jsp';

this.getEl().dom.submit();



in articleList.jsp
contain a grid get data from json

when i submit the form, js can not work on correctly



my javascript include
<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="js/miframe-debug.js"></script>

fanspace
23 Dec 2009, 7:50 PM
in extJs desktop examples
i create a window

MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
id:'grid-win',
init : function(){
this.launcher = {
text: '........',
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:'................',
width:680,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
// html: '<iframe src=news/articleQuery.jsp height=100% width=100% id=articleQueryFrame></iframe>',
//autoLoad:{url:'news/articleQuery.jsp',scripts:true},
/*items :[ new Ext.ux.ManagedIFrame.Panel({
xtype : 'iframepanel',
id : 'articleQuery',
loadMask : {msg: 'loading...... '},
frame : true,
frameConfig : {autoCreate:{id: 'articleQueryFrame' }},
defaultSrc : 'news/articleQuery.jsp',
layout : 'fit',
bodyBorder : false,
header : false
}) ] ,*/

layout: 'fit',
modal:true
});

win.add({
xtype : 'iframepanel',
id : 'articleQuery',

loadMask : {msg: 'loading...... '},
frame : true,
frameConfig : {autoCreate:{id: 'articleQueryFrame'}},
defaultSrc : 'news/articleQuery.jsp',
layout : 'fit',
header : false
});


}

win.show();
}
});

in this window , i use mif to get the page articleQuery.jsp
the articleQuery.jsp contain a formPanel
its post method like that

submit: function() {

this.getEl().dom.action='articleList.jsp';

this.getEl().dom.submit();


the target is 'articleList.jsp .
it open in the same window.
the 'articleList.jsp contain a grid
which get data from json

in fact the pages are all test successfully by use html:'........'
but when i use mif,
load is correcty
then i close the window
it failed

pardon me ,my english is poor
hope you can understand what i say

btw i get the recently miframe.js from svn trunck
the extjs version is 3.1

pcr
24 Dec 2009, 7:39 AM
Hi, I use an miframe. Until ExtJS 3.0.3 miframe works like a charm. With ExtJS and miframe 2.1 It works in FF 3.5 but not in IE8. In IE8 I got this message:

Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)
Tijdstempel: Thu, 24 Dec 2009 15:32:52 UTC


Bericht: '__e_' is leeg of geen object
Regel: 273
Teken: 28
Code: 0
URI: http://maps.gstatic.com/intl/nl_ALL/mapfiles/193c/maps2.api/main.js

In FF there are no javascript problems reported in firebug.

pcr
24 Dec 2009, 7:48 AM
To understand the message IE8 reported, her a tranlation in English

Message: '__e_' is empty or no object
Row: 273
Position: 28
Code: 0

I tested in Opera 10.10 and Safari 4.0.4 both no problem. Allthough in Opera 10.10 a googlemap does not display the flags I set. Maybe another problem. This is only a Opera 10.10 problem.

alien3d
24 Dec 2009, 4:18 PM
I used ie8 and developer toolbar in Windows server 2008 r2 and windows 7 rc2. No bugs on 3.03 + this iframe 2.0

hendricd
24 Dec 2009, 8:47 PM
Hi, I use an miframe. Until ExtJS 3.0.3 miframe works like a charm. With ExtJS and miframe 2.1 It works in FF 3.5 but not in IE8. In IE8 I got this message:

Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)
Tijdstempel: Thu, 24 Dec 2009 15:32:52 UTC


Bericht: '__e_' is leeg of geen object
Regel: 273
Teken: 28
Code: 0
URI: http://maps.gstatic.com/intl/nl_ALL/mapfiles/193c/maps2.api/main.js

In FF there are no javascript problems reported in firebug.

An English report would really help out here. :-?

mystix
25 Dec 2009, 12:31 AM
An English report would really help out here. :-?

yo @doug, i think he pasted the translation in post #401.

pcr
25 Dec 2009, 1:49 AM
Mystix is right. I allready posted the translated error-message. Like alien3d sad, me too not problems with ExtJS 3.0.3 and miframe 2.0. Even IE8 was working correct.

Here it is again:

To understand the message IE8 reported, her a tranlation in English

Message: '__e_' is empty or no object
Row: 273
Position: 28
Code: 0

I tested in Opera 10.10 and Safari 4.0.4 both no problem. Allthough in Opera 10.10 a googlemap does not display the flags I set. Maybe another problem. This is only a Opera 10.10 problem.

xor
25 Dec 2009, 7:51 AM
Semicolon is missing in file miframe2_1.zip/build/miframe_debug.js, line 4875:

})()/* global Ext */


It caused FF and Chrome to throw errors. Spend some significant time to find it. :)

Sorry, if it is not new information.

Ankai
25 Dec 2009, 10:54 AM
I have a window with button which shows new Ext.ux.ManagedIFrame.Window in this way:



new Ext.ux.ManagedIFrame.Window({
title: 'Window',
frameConfig: {
allowtransparency: true,
autoScroll: true
},
defaultSrc: '/Image.ashx?id=' + app.userId,
loadMask: {
msg: 'Wait'
},
width: 400,
height: 400,
manager: app.getDesktop().getManager()
}).show();After I close miframe window and parent window Firebug shows error "this.dom is undefined" in ext-all-debug.js (line 2813) and call stack starts at multidom.js (line 1678). After this error I can't open parent window again and catch this error "dom is undefined" in multidom.js (line 667). And at the next trying it shows "this.resizer.proxy is null" at ext-all-debug.js (line 24060) and don't react to next clicks.

I use ExtJs 3.1 and miframe 2.1.

Who can help?

Air_Mike
26 Dec 2009, 7:30 AM
Is there any solution for previously mentioned freezing problems?

Thank You

simplessus
28 Dec 2009, 5:03 AM
Hello,

I am just downloaded miframe 2.1 and I use ExtJS 3.1 .

When I open various tabs and then reload I receive a JS error in Firebug

El._flyweights is undefined
chrome://firebug/content/blank.gif (El._flyweights[named] = El._fly...named] || new El.Flyweight()).dom = el;\n

Whenever I close a tab I can no longer view any other existing tab. Seems like tab is freezed.

Thanks for your help,
Bjoern

geese0090
29 Dec 2009, 11:35 AM
Hi,

I have the same freezing problem mentioned above (after upgrading to ExtJS 3.1 and miframe 2.1).

Anytime a tab is closed, all the other tabs freeze and cannot be clicked on or switched to. Same thing happens to all buttons / menus (interactive items) which are outside the tab panel, they all freeze and cannot be clicked on (unless the whole page is reloaded).

Thanks for your help.

hp
30 Dec 2009, 5:25 PM
First off, I'm not sure if this is a problem with MIF or EXT 3.1. Look at the attached screenshot. The height of the IFRAME element is 45px, which is the same number that appears after the decimal point in the parent element's height (510.45px). Question would be why does the parent element's height have a deciaml point after it and why would the child interpret the numbers after the decimal as the container height? Note that this is just happening in Firefox.

albertyips
2 Jan 2010, 12:30 PM
I get a "Permission Denied" error when trying to remove a MIF. The IFRAME contains an HTML file which is basically empty but has single CSS and Content-Type declaration. Deleting the IFRAME by directly accessing the DOM does not cause an error.

Here is the IFRAME content (docview_broken.html) that causes the problem ..


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<LINK REL="stylesheet" TYPE="text/css" HREF="blank.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#003366" VLINK="#660033" ALINK="#3300FF">
This file contains a blank CSS and Content-Type Declaration. <HR>
Click on Tab2 using IE and you will get an "Permission Denied" error.
</body>
</html>


We are able to generate an error each time IE is started using the tab panels code below (testmiframe.js). Subsequent attempts to remove the IFRAME don't cause a problem.


Ext.onReady(function(){
var tabs = new Ext.TabPanel({
renderTo: document.body,
activeTab: 1,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
xtype: 'panel',
id : 'iframe',
title: 'mif iframe tab'
},{
title: 'Tab 2',
html: "To test click on mif iframe tab"
}
]
});

Ext.getCmp('iframe').on('activate', function(){
var miframe = Ext.getCmp('mif-iframe');
if (!miframe) {
miframe = new Ext.ux.ManagedIFrame.Panel({
id : 'mif-iframe',
title: '',
border: false,
layout:'fit',
autoHeight: true
});
this.add(miframe);
this.doLayout();
}
var d = new Date();
//miframe.setSrc('docview_works.html')
miframe.setSrc('docview_broken.html?t='+d.getTime());
});

Ext.getCmp('iframe').on('deactivate', function(){
var miframe = Ext.getCmp('mif-iframe');
this.remove(miframe);
});
});


Strangely, inverting the order of the Content-Type and CSS lines makes the problem disappear.


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL="stylesheet" TYPE="text/css" HREF="blank.css" />


Not sure why this happens. Files of this type are very common in our environment and have caused our application to crash and sometimes even crash the browser. Our current workaround is to delete the IFRAME directly from the DOM, but we have cases where despite our fix errors still occur.

Are we deleted the MIF correctly or is this MIF bug? Is anyone else experiencing this problem?

Sample files are attached.

Thanks,
Albert

hendricd
2 Jan 2010, 1:10 PM
@albertyips --
Try running your document fragment through the validator (http://validator.w3.org/check) and try again. It does not appear to be valid for the DOCTYPE you have chosen.

Also, give your testPanel a layout to ensure the MIF is sized/rendered properly:



var tabs = new Ext.TabPanel({
renderTo: document.body,
activeTab: 1,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
xtype: 'panel',
id : 'iframe',
layout : 'fit',
title: 'mif iframe tab'
},{
title: 'Tab 2',
html: "To test click on mif iframe tab"
}
]
});

hendricd
2 Jan 2010, 1:14 PM
First off, I'm not sure if this is a problem with MIF or EXT 3.1. Look at the attached screenshot. The height of the IFRAME element is 45px, which is the same number that appears after the decimal point in the parent element's height (510.45px). Question would be why does the parent element's height have a deciaml point after it and why would the child interpret the numbers after the decimal as the container height? Note that this is just happening in Firefox.

@hp - Firefox 3.5+ has introduced the notion of fractional size metrics. 8-| Ext 3.1 has just been recently modified to support it. Should be available in the next public build Ext 3.1.1.

albertyips
3 Jan 2010, 11:27 AM
You are right, that HTML was not valid, but making it compliant didn't seem to help.

Open the browser, load the page, click the "mif-iframe" tab. When i click the "tab2" tab to remove the IFRAME i get the permission denied error on both IE6 and IE8.

Here is the compliant file i used ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="blank.css" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title> Any Title</title>
</head>
<body BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#003366" VLINK="#660033" ALINK="#3300FF">

W3C Compliant This file contains a blank css and Content-Type Declaration. <HR>
Click on Tab2 using IE and you will get an "Permission Denied" error.

</body>
</html>

Albert

hp
3 Jan 2010, 2:25 PM
@hp - Firefox 3.5+ has introduced the notion of fractional size metrics. 8-| Ext 3.1 has just been recently modified to support it. Should be available in the next public build Ext 3.1.1.

Thanks for the heads up. So this makes me think it is a EXT bug. I am using the latest build out of SVN and not the public 3.1 because it is addressing a few of my other problems.

hp
3 Jan 2010, 6:29 PM
Thanks for the heads up. So this makes me think it is a EXT bug. I am using the latest build out of SVN and not the public 3.1 because it is addressing a few of my other problems.

FYI... tested fix in SVN. Works great. Thanks for the quick response.

tester1
4 Jan 2010, 2:48 AM
Hi,

I have the same freezing problem mentioned above (after upgrading to ExtJS 3.1 and miframe 2.1).

Anytime a tab is closed, all the other tabs freeze and cannot be clicked on or switched to. Same thing happens to all buttons / menus (interactive items) which are outside the tab panel, they all freeze and cannot be clicked on (unless the whole page is reloaded).

Thanks for your help.

I gave this freezing problem as well. (Ext 3.1 final and newest miframe from SVN (r80). It occurs without closing a tab. And I can't see in Firebug what exactly fails. As there is no error shown.

Some hints anybody?

Thanks.

mcouillard
4 Jan 2010, 12:04 PM
MIF 2.1 with Ext 3.1 fails in IE7 like previous posts have shown. MIF 2.0 and Ext 2.2 had been working fine in our production app. It even seemed to work fine on Ext 3.0.3 but it wasn't as heavily tested.

Here's a breakdown of the errors I've seen:

"body is null or not an object"
how: when changing the MIF page using setSrc()
function: getAnchorXY
line: vp = me.dom == doc.body || me.dom == doc,


"dom is null or not an object"
how:
function: garbageCollect
line: d = el.dom;


"c is null or not an object"
how: on refresh of a MIF page after I get other MIF errors
function: El.data
line: var c = resolveCache(el)[el.id].data;


"permission denied" / "no such interface supported"
how: on browser window size change
function: not sure... points to ext-all.js


I've tried trapping all errors in Try/Catch but that just caused more problems. I've even tried the newer mif.js and multidom.js files from SVN - no better.

I would greatly appreciate any assistance.

hendricd
4 Jan 2010, 1:43 PM
@mcouillard -- Due internal changes to the Ext 3.x builds, you MUST follow these MIF release guidelines:

Ext version -> MIF Version

2.x -> 1.x
3.0.x -> 2.0
3.1 -> 2.1

All that said, there are more internal changes coming (to Ext 3.1.1+) that will impact MIF 2.1 compatibility. So things are on hold a bit, until the final track is clear.

mcouillard
4 Jan 2010, 1:58 PM
Understood, that's how I've done it. In my shorthand I forgot to mention that along with 3.0.3 we used MIF 2.0. But again, I'm not sure if IE was free of problems at that point - before fully testing internally we jumped to 3.1.

I appreciate the quick response and look forward to future updates!

gurpal2000
4 Jan 2010, 5:16 PM
Has anyone got a *working* example to demonstrate this with Ext 3.1.0 and miframe?

This is the scenario:

1. tabPanel in center region of viewport
2. first tab is hardcoded in
3. second tab gets dynamically added and switched to
4. second tab has an iframe with no height specified

as per this long thread, 100% etc are illegal. How can the miframe in the 2nd tab be set to 100% height of its container. Width doesn't seem to be an issue.

Thank you

hendricd
4 Jan 2010, 7:14 PM
Has anyone got a *working* example to demonstrate this with Ext 3.1.0 and miframe?

This is the scenario:

1. tabPanel in center region of viewport
2. first tab is hardcoded in
3. second tab gets dynamically added and switched to
4. second tab has an iframe with no height specified

as per this long thread, 100% etc are illegal. How can the miframe in the 2nd tab be set to 100% height of its container. Width doesn't seem to be an issue.

Thank you

Working example is here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav).
You should NOT be specifying a height in a managed-Ext-Layout but, let's see some of your layout. Might be something obvious there. :-?

gurpal2000
5 Jan 2010, 12:12 AM
Working example is here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav).
You should NOT be specifying a height in a managed-Ext-Layout but, let's see some of your layout. Might be something obvious there. :-?

Hi doug here's the code. There may be something obvious. Even the tabpanel itself doesn't fit the center it's been added to. Even if i set the height of the tabpanel in this simple example, the iframe does not 'fill' up the space. Im using f/f 3.5.6 BTW. Thanks!



Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif';
Ext.QuickTips.init();

var tab;

function addnewtab() {
if (!tab) {
tab = tabPanel.add({
title: 'New tab',
items: [{
xtype: 'iframepanel',
defaultSrc: 'http://www.google.com'
}]
});
}

tabPanel.setActiveTab(tab);
}

var tabPanel = new Ext.TabPanel({
activeTab: 0,
deferredRender: false,
layoutOnTabChange: true,
items: [{
title: 'tab 1',
items: [{
xtype: 'button',
text: 'add a new tab',
handler: addnewtab
}]
}]
});

new Ext.Viewport({
layout: 'border',
border: false,
items: [{
region: 'north',
html: 'my header goes here'
}, {
region: 'center',
items: [ tabPanel ]
}]
});
});

DTT_11-1983
5 Jan 2010, 12:14 AM
Hi hendricd,
Can you show me how to remove a ManagedIFramePanel from my layout ? I wonder what is the best code to do that. Currently I used this:


this._htmlPanel.getFrame().destructor();
this._htmlPanel.body.update('');
this._htmlPanel.getEl().remove();
this.remove(this._htmlPanel);
delete this._htmlPanel;
this._htmlPanel = null;

I've some question about that code:
- Do I make any mistake with that code, will it cause any problem ?
- Do all listeners be removed also ?
Thanks.
p/s: you did a great extension. :)

zombeerose
5 Jan 2010, 8:31 AM
@hendricd

I'm trying to use a MIF portlet within the portal example (http://www.extjs.com/deploy/dev/examples/portal/portal.html). I've simplified my use-case for this example. Below is the config for the MIF:



var cfg = {
html: '<script>document.write("hi");</script>'
,scripts: true
,title: 'MIF Portlet'
};
var mif = new Ext.ux.ManagedIFrame.Portlet(cfg);


The MIF loads fine but when I drag/drop the MIF to a new column within the "portal", the document does not refresh and the page goes blank. This is probably really easy to fix so thanks in advance!

Ext version 3.0.3
MIF version 2.01

zombeerose
5 Jan 2010, 8:33 AM
@hendricd

I'm trying to use a MIF portlet within the portal example (http://www.extjs.com/deploy/dev/examples/portal/portal.html). I've simplified my use-case for this example. Below is the config for the MIF:



var cfg = {
height: 200
,html: '<script>document.write("hi");</script>'
,scripts: true
,title: 'MIF Portlet'
};
var mif = new Ext.ux.ManagedIFrame.Portlet(cfg);


The MIF loads fine but when I drag/drop the MIF to a new column within the "portal", the document does not refresh and the page goes blank. This is probably really easy to fix so thanks in advance!

Ext version 3.0.3
MIF version 2.01

gurpal2000
5 Jan 2010, 5:16 PM
ok for my problem it seems i need a layout: 'fit' in the addTab method and i removed the 'over nesting' for the tabPanel and specified region: 'center' in the tabPanel var.

SOLVED after hours :-/

here is the revised code. If you're having issues getting the iframe to fill the tab use this small example:



Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif';
Ext.QuickTips.init();

var tab;

function addnewtab() {
if (!tab) {
tab = tabPanel.add({
title: 'New tab',
layout: 'fit',
items: [{
xtype: 'iframepanel',
defaultSrc: 'http://www.google.com'
}]
});
}

tabPanel.setActiveTab(tab);
}

var tabPanel = new Ext.TabPanel({
activeTab: 0,
region: 'center',
deferredRender: false,
layoutOnTabChange: true,
items: [{
title: 'tab 1',
items: [{
xtype: 'button',
text: 'add a new tab',
handler: addnewtab
}]
}]
});

new Ext.Viewport({
layout: 'border',
border: false,
items: [{
region: 'north',
html: 'my header goes here'
}, tabPanel ]
});
});

hendricd
5 Jan 2010, 7:28 PM
@gurpal2000 --
Glad to hear you've got things rolling, but:
You're still "over-nested". There is no need to render MIF's into intermediate containers.
Consider this instead:


var tab;

function addnewtab() {
if (!tab) {
tab = tabPanel.add({
title: 'New tab',
layout: 'fit',
items: [{
xtype: 'iframepanel',
defaultSrc: 'http://www.google.com'
}]
});
}

tabPanel.setActiveTab(tab);
}
...

gurpal2000
6 Jan 2010, 12:11 AM
@gurpal2000 --
Glad to hear you've got things rolling, but:
You're still "over-nested". There is no need to render MIF's into intermediate containers.
Consider this instead:


var tab;

function addnewtab() {
if (!tab) {
tab = tabPanel.add({
title: 'New tab',
layout: 'fit',
items: [{
xtype: 'iframepanel',
defaultSrc: 'http://www.google.com'
}]
});
}

tabPanel.setActiveTab(tab);
}
...



That makes sense thanks very much!

achui_1980
6 Jan 2010, 12:39 AM
when i use Mif2.1 and Ext3.1,a problem occour ,even if i ref the script mif2.1,this problem also happen

my code is very simple like this


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

});
</script>
</head>
<body>
</body>
</html>

in ie7 script error in the attachment,it was miframe-debug.js error
in FF3.0 it said line 2119 to line 4869 in miframe-debug.js was not a function
my mif download from svn

i don't know why this happened ,anybody can help me ?

mschwartz
6 Jan 2010, 1:35 PM
Doug,

I am using my own Ajax request to get HTML content I want to put in a ManagedIFrame.Panel.

my code looks like this:



success: function(response) {
var result = Ext.decode(response.responseText);
var f = iframe.getFrame();
f.update(result.html, true, function() {
});


I do have javascripts (and google analytics) in the html.

What I get is a white iframe, but I see a flash (brief) of the expected HTML first.

I step into f.update() and see this:


this._frameAction = true;
doc.write(content);
doc.close();


If I step, the doc.write() puts the content in the iframe, and step over the doc.close() works fine, too.

But if I run it full speed, it looks like the doc.close() is where the contents go white.

I examine the DOM with firebug and see just this:


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


No body!

I am using the 2.01.zip from the first post.

hendricd
6 Jan 2010, 1:58 PM
@mschwartz -- How about some version details (browser(s), Ext..)? Tried the latest from SVN?

mschwartz
7 Jan 2010, 6:16 AM
@mschwartz -- How about some version details (browser(s), Ext..)? Tried the latest from SVN?

FF 3.0, Windows XP, Ext 3.0.0.

I know what the problem is, and made a patch, but I'm not certain it's a very good one.

This code in the page:



<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>


The document.write() isn't getting to execute before the miframe code does its document.close()

So in update(), I made this change:



(function() {
doc.close();
}).defer(5000);


At 2000, it wasn't a long enough delay.

You've had your head around this stuff forever, so maybe there's some better way to do this. You need to detect that the scripts in the iframe have gotten the chance to fully execute before you can close the document.

BTW, I see this when I view source of the iframe:



</body>
</html><script src='http://www.google-analytics.com/ga.js' type='text/javascript'></script>


So my fix isn't doing what I expect or want... The <script tag outside the </html tag can't be a good thing.

hendricd
7 Jan 2010, 7:01 AM
@mschwartz --

There can be no document.writing going on while MIF already has the document opened for writing, and


...You need to detect that the scripts in the iframe have gotten the chance to fully execute before you can close the document.Huh? ...document DOMs do not come to life until the document is closed, so that won't really work for you either.

I'd recommend adding GA to the document after it's closed:



yourMif.on('domready', function(frame){
frame.getBody().createChild({
{ tag: 'script',
type: 'text/javascript',
src : String.format('http{0}://www.google-analytics.com/ga.js', Ext.isSecure ? 's' : '')
});
});
or, just include the raw markup
<script src='http://www.google-analytics.com/ga.js' type='text/javascript'></script> within yours (without document.write)! ;)

hendricd
7 Jan 2010, 7:11 AM
when i use Mif2.1 and Ext3.1,a problem occour ,even if i ref the script mif2.1,this problem also happen

.... i don't know why this happened ,anybody can help me ?

@achui_1980 -- Unless you have SVN access to Ext, I'm afraid I don't have a solution for you that will run on the public Ext 3.1.0 release. Core 3.1 internals have just changed again (only avail, at the moment, through SVN) and you would need to rebuild the entire Ext framework to get current.

There is MIF 2.1 update for Ext 3.1.1, but I hesitate posting to MIF-SVN because someone will try to use it on 3.1.0. And a full MIF test-cycle must begin all over again, anyway. 8-|

mschwartz
7 Jan 2010, 8:27 AM
@mschwartz --

There can be no document.writing going on while MIF already has the document opened for writing, and

Huh? ...document DOMs do not come to life until the document is closed, so that won't really work for you either.

I'd recommend adding GA to the document after it's closed:



yourMif.on('domready', function(frame){
frame.getBody().createChild({
{ tag: 'script',
type: 'text/javascript',
src : String.format('http{0}://www.google-analytics.com/ga.js', Ext.isSecure ? 's' : '')
});
});
or, just include the raw markup
<script src='http://www.google-analytics.com/ga.js' type='text/javascript'></script> within yours (without document.write)! ;)

I don't have a choice, the HTML content is coming from our design dept. and many of the pages are going to include the google analytics script the way google says to on their site...

hendricd
7 Jan 2010, 9:11 AM
I don't have a choice, the HTML content is coming from our design dept. and many of the pages are going to include the google analytics script the way google says to on their site...

Your left with only one choice then: Use the defaultSrc/setSrc instead and load it traditionally.

Is there a reason why you must use the Updater functions anyway?

Henrik Rutzou
8 Jan 2010, 5:46 AM
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');
}

mschwartz
8 Jan 2010, 6:07 AM
Your left with only one choice then: Use the defaultSrc/setSrc instead and load it traditionally.

Is there a reason why you must use the Updater functions anyway?

Yeah, I need to modify the dom in the iframe dynamically. An HTML editor of sorts, on steroids.

mschwartz
8 Jan 2010, 7:39 AM
Another Q for you Doug...

I have an Ext.menu.Menu that I want to show, but I want it clipped by the iframe. See attached image.

You can see the menu is on top of the iframe's scrollbar.

The iframe's right edge is the browser's right edge, so you can see the menu is clipped by that.

weblin
9 Jan 2010, 7:44 AM
ExtJS 3.1.0 (release)
MIF 2.1 (2009-12-21)

While trying to implement TinyMCE window got errors in FF, Opera and Chrome (but works smoothly in IE6, not tested in IE7-8) in miframe-debug.js line 1077 "Cannot convert undefined or null to Object" (getStyle). Actually, el.style was undefined for some objects. I did not dig deep into the issue, just insert one simple IF statement. Not sure if it is absolutely correct, but works in my case. Please note blue line with comment below:



getStyle : function(){
var getStyle =
view && view.getComputedStyle ?
function GS(prop){
var el = !this._isDoc ? this.dom : null,
v,
cs,
out;

if(!el || el == DOC || Ext.isDocument(el)) return null;
if(typeof el.style == "undefined") return null; // This line was inserted
prop = chkCache(prop);
out = (v = el.style[prop]) ? v : (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
// Webkit returns rgb values for transparent.
if(Ext.isWebKit && out == 'rgba(0, 0, 0, 0)'){
out = 'transparent';
}
return out;
} :
function GS(prop){
var el = !this._isDoc ? this.dom : null,
m,
cs;
if(!el || el == DOC || Ext.isDocument(el)) return null;
if (prop == 'opacity') {
if (el.style.filter.match) {
if(m = el.style.filter.match(opacityRe)){
var fv = parseFloat(m[1]);
if(!isNaN(fv)){
return fv ? fv / 100 : 0;
}
}
}
return 1;
}
prop = chkCache(prop);
return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
};
var GS = null;
return getStyle;
}(),

lemanli
11 Jan 2010, 12:20 AM
I used mif 2.1,and extjs 3.1(release),IE7 or IE8

they all freeze and cannot be clicked on (unless the whole page is reloaded),but do many times(click menu's button or accordion panel),there are all freeze (click ,no response)


if I used mif 2.01,and extjs.3.0 (In the Vista ,IE7 or IE8),(In the XP,no problem !!)
report error ("c is null or not an object"),code:resolveCache(el) is null ,the accordion panel can't display


var viewport = new Ext.Viewport({
id:'mainViewPort',
layout:'border',
// monitorResize :true,
//topBanner,
//renderTo:document.body,
items:[
topBanner,

testLeft,
//rightView,
tabPanel
]
});

var tabPanel = new Ext.TabPanel({
id:"tabPanelid",
region:"center",
margins:"5 0 0 0",
hideParent:true,
// resizeTabs:true,
border:false,
enableTabScroll:true,
header:false,
activeTab: 0,
// defaults:{autoScroll: true},
// defaults:{
// style :{position:!Ext.isIE?'absolute':'relative'}
// ,hideMode :!Ext.isIE?'nosize':'display'
// ,closable :true,
// autoScroll: true
// },
// hideMode :!Ext.isIE?'nosize':'display',

// deferredRender:true,
layoutOnTabChange:true,
frame:true,
defaultType:"iframepanel",
//plain:true,
items:[mainIframePanel],
listeners: {
render:function() {
this.stripWrap.addClass('notabs');

},
remove:function(c) {
var i = c.items.getCount();
if (i <= 1) {
this.stripWrap.addClass("notabs");
}
}
}
});


var mainIframePanel = new Ext.ux.ManagedIFrame.Panel({
id:'mainIframePanelid',
region:"center",
title:'main window',
layout: 'fit',
margins:"0 0 0 0",
border:false,
closable:false,
frameConfig : {autoCreate:{name:'myIframeIdx',nocache: true}},
defaultSrc:'../qxj/common/testindex.jsp'
}
);


The treepanel in the accordion panel,access iframe use href target;
Tree Node


expanded: true,
hasChildren: funData.hasChildren,
id: nodeId,
text: funData.name,
href : contextPath + "/" + funData.url,
iconCls: funData.pic,
disabled: funData.disabled,
hrefTarget:"myIframeIdx",
isTarget :true,
type: funData.type


topBanner(Top menu),testLeft(Accordion Panel),tabPanel(xtype:'iframe',dynamic add or replace src)

albertyips
11 Jan 2010, 12:25 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

hendricd
11 Jan 2010, 6:40 AM
Another Q for you Doug...

I have an Ext.menu.Menu that I want to show, but I want it clipped by the iframe. See attached image.

You can see the menu is on top of the iframe's scrollbar.

The iframe's right edge is the browser's right edge, so you can see the menu is clipped by that.

@mschwartz --

You'll have to shim anything that is intended to sit on top of the frame (embedded PDF's included):

Ext.useShims = true;

This will add an IFRAME shim to ALL floating Layers in your App, so be selective as what gets shimmed with:

shim : true

to any Container (menu in your case).

hendricd
11 Jan 2010, 7:04 AM
@all --

I'm sorry to announce: There will never be a compatible MIF release for Ext 3.1.0 (public release).

Attempting to provide one would require yet another release of MIF, ONLY for that soon-to-be-obsolete release (suicide). With 3.1.1 coming out shortly (after significant internal Core changes yet again -- event management and DOM internals have all changed again), this is only practical (from my standpoint) to maintain any level of quality for those that depend on this extension.

Put another way:
Due to non-trivial changes in the 3.1.1/Core trunk, the google.code MIF SVN/trunk IS NOT Compatible with Ext 3.1.0 (release) at all, nor will it ever be!

Thus, those of you with SVN/trunk access the Ext 3.1.1, are encouraged to try the latest MIF 2.1 SVN with the 3.1.1 build only. But be warned -- recent changes to Ext 3.1.1 internals are still not "cast in stone". There likely will be additional changes required for MIF to support it as well.

Futher, to eliminate confusion regarding compatible builds, current MIF downloads will only be available via the MIF google.code site.

To add: Most of the problems you have encountered with MIF 2.1 on Ext 3.1.0 (public release) have been been resolved by the latest code in MIF/SVN, (again - designed for Ext 3.1.1 only!).

zombeerose
11 Jan 2010, 1:54 PM
@hendricd - sorry to be a bother but have you had a chance to look at my previous post from 01-05-2010, 09:33 AM regarding MIF portlets? Any suggestions? Do I need to update to the latest ext/mif, which I have been hesitant to do until 3.1.1 comes out. I'm currently using Ext version 3.0.3 and MIF version 2.01.

Thx!

hendricd
11 Jan 2010, 2:25 PM
@hendricd - sorry to be a bother but have you had a chance to look at my previous post from 01-05-2010, 09:33 AM regarding MIF portlets? Any suggestions? Do I need to update to the latest ext/mif, which I have been hesitant to do until 3.1.1 comes out. I'm currently using Ext version 3.0.3 and MIF version 2.01.

Thx!

@zombeerose --
Yes, I've seen it, and unfortunately, here is little MIF can do about it. Here (http://www.extjs.com/forum/showthread.php?p=406168#post406168) is why. :s

mschwartz
12 Jan 2010, 6:31 AM
@mschwartz --

You'll have to shim anything that is intended to sit on top of the frame (embedded PDF's included):

Ext.useShims = true;

This will add an IFRAME shim to ALL floating Layers in your App, so be selective as what gets shimmed with:

shim : true

to any Container (menu in your case).

You missed the point of my question. I am using ManagedIFrame.manager.shim() for my menus (and found that Ext 3.0.0 does not fire beforeshow event for the menus!). My question is if it's possible to have ExtJS running outside the iframe but showing menus over the iframe that are CLIPPED by the iframe. That'd be so it looks like the menus are part of the code in the iframe...

And when is iframe going to be part of ExtJS proper? :D

hendricd
12 Jan 2010, 6:40 AM
.... (and found that Ext 3.0.0 does not fire beforeshow event for the menus!). My question is if it's possible to have ExtJS running outside the iframe but showing menus over the iframe that are CLIPPED by the iframe. That'd be so it looks like the menus are part of the code in the iframe...


@mschwartz --
In a word, no. Ext.MenuMgr binds listeners to only one document context (the parent page). You can render the menu inside the frame context, but not all the listeners will work.

I'll look into the beforeshow method for menus.

mschwartz
12 Jan 2010, 6:47 AM
Doug,

Here's my code for menus:



Ext.namespace('Ext.ux.menu');

Ext.ux.menu.Menu = Ext.extend(Ext.menu.Menu, {
initComponent: function() {
Ext.ux.menu.Menu.superclass.initComponent.apply(this, arguments);
if (Ext.ux.ManagedIframe) {
this.on('beforerender', function() {
Ext.ux.ManagedIFrame.Manager.showShims();
}, Ext.ux.ManagedIFrame.Manager);
this.on('beforehide', function() {
Ext.ux.ManagedIFrame.Manager.hideShims();
return true;
}, Ext.ux.ManagedIFrame.Manager);
}
this.on('itemclick', function() {
this.hide();
});
},
onRender: function(ct, position) {
Ext.ux.menu.Menu.superclass.onRender.call(this, ct, position);
this.getEl().on('contextmenu', function(e) {
e.stopEvent();
return false;
});
}
});
Ext.reg('ux-menu', Ext.ux.menu.Menu);


I had to change 'beforeshow' to 'beforerender' on about line 10 to make it work. I set a breakpoint on the showShims() line in the handler and it never fired. The beforehide one gets called at least twice ;/

This is 3.0.0.

As for the menus, I suggest an additional feature, via configuration item:



clipTo: elementId (mixed)


Right now the menu code likely clips to the viewport/browser window. It'd be nice to be able to clip it to any DOM element, such as the iframes...

Also, the menus don't behave properly, IMO, at the right edge of the browser anyway. They shouldn't render 99% clipped - the left edge X of the menu should be bumped so the menu is 100% visible. It does the right thing for submenus by rendering them to the left of the parent menu if they'd be clipped.

hendricd
12 Jan 2010, 6:58 AM
@mschwartz -- Ah, I see your trickery now. :-?

hendricd
12 Jan 2010, 8:04 AM
@mschwartz -- I'd recommend posting something in Feature Requests for Menu 'clipping'.

FYI: Ext 3.0.3 properly fires beforeshow, beforehide events on menus. Why are you still using 3.0.0?

mschwartz
12 Jan 2010, 8:10 AM
@mschwartz -- Ah, I see your trickery now. :-?

While you're at it, the menus have another bug related to grid rowcontextmenu. If you have a grid renderTo a div and the page can scroll, the menu logic doesn't take into account the browser's scrollbars...

You can see if this is fixed in 3.1 and later by taking one of the grid examples and adding a simple rowcontextmenu to it.

Resize the browser so you can barely see the bottom row of the grid. Right click, and the menu pops up with scroller arrows, since it can't be fully displayed at the bottom. That's correct. Now scroll the browser so that bottom row of the grid is somewhere in the middle of the page. Right click and the menu is messed up.

These changes I propose should add very little code/logic to the menu code.

mschwartz
12 Jan 2010, 8:13 AM
@mschwartz -- I'd recommend posting something in Feature Requests for Menu 'clipping'.

FYI: Ext 3.0.3 properly fires beforeshow, beforehide events on menus. Why are you still using 3.0.0?

Yes, still using 3.0.0.

My app uses about 30 extensions, user contributed and my own. Every time I've upgraded to newer versions of Ext, I've had to debug them all and apply fixes. Or most of them...

Upgrading to MIF 2.1 required some subtle changes to my code even. You changed the names of the classes. :D

hendricd
12 Jan 2010, 8:51 AM
While you're at it, the menus have another bug related to grid rowcontextmenu. If you have a grid renderTo a div and the page can scroll, the menu logic doesn't take into account the browser's scrollbars...

You can see if this is fixed in 3.1 and later by taking one of the grid examples and adding a simple rowcontextmenu to it.

Resize the browser so you can barely see the bottom row of the grid. Right click, and the menu pops up with scroller arrows, since it can't be fully displayed at the bottom. That's correct. Now scroll the browser so that bottom row of the grid is somewhere in the middle of the page. Right click and the menu is messed up.

These changes I propose should add very little code/logic to the menu code.

To keep track of all these, please post these in Bugs/Feature requests as appropriate. This isn't the place for them.
B)

mschwartz
13 Jan 2010, 6:36 AM
To keep track of all these, please post these in Bugs/Feature requests as appropriate. This isn't the place for them.
B)

I did, I did.
:D

KommS
13 Jan 2010, 7:25 AM
Hi,

I have a problem with ManagedIframe 2.1.x and ExtJS 3.1.x.
In the iframe run some other sites based on ExtJS. I can change the content in the iframe 2 times then the whole side freezes. This problem appears only on ManagedIframe 2.1.0 and ExtJS 3.1.0/3.1.1. With MiF 2.0.1 and ExtJS 3.0.3 there is no problem.


Thank you!

hendricd
13 Jan 2010, 7:36 AM
@KommS --

Review this post (http://www.extjs.com/forum/showthread.php?p=426151#post426151), and understand that MIF 2.1 and Ext 3.1.1 are still works in progress.
I'll post any updates on the status as soon as I have word.

KommS
13 Jan 2010, 8:09 AM
yeah, I know, the programming is still in progress! Maybe you can add this problem to the todo list!

ExtJS in the MiF ok. Change to another site with ExtJS in the MiF -> Freeze of the whole application.

Thank you!

MacSimon
15 Jan 2010, 8:48 AM
Hi everyone,

I have a little problem with my loadingmask.

I have the following config.

a managed iframe panel:



//managed IFramePanel for loading report
var reportDetailsPanel = new Ext.ux.ManagedIFrame.Panel({
id: 'reportDetailsPanel',
title: "Détails du résultat",
closable: false,
loadMask: { hideOnReady: false, msg: 'Loading Report....' },
tbar: assessmentsReportToolBar
});


a tabpanel wich contains the managed iframe panel and a grid:



//the tabpanel that contains the grid and the reportDetails
var tabPanel = new Ext.TabPanel({
region: "center",
id: "tabPanel",
activeTab: 0,
border: true,
items: [gridPanel, reportDetailsPanel]
});


my code for showing the report in the managed iframe panel:



//Shows the report for the correspondig row in the grid
function ShowReport(id) {
Ext.getCmp("tabPanel").activate('reportDetailsPanel');
var Url = "myUrl?Id=" + id;
Ext.getCmp("reportDetailsPanel").setSrc(Url);
}


The problem I have with the loadingmask is that it is shown from the top of the page to about half of my toolbar.
The message is shown correctly in the center of the managedIframe.

Sometimes is crashes because the corresponding element of the panel is not found.


The page I am trying to load inside the panel has a config like below:



var mainPanel = new Ext.Panel({
id: 'mainPanel',
autoScroll: true,
border: false
});

var viewPort = new Ext.Viewport({
id: 'viewPort',
layout: 'fit',
items: [mainPanel]
});


with inside the mainpanel some more panels with html content wich is specified like this:



//(layout column is because it hase some more items added later in the code..)
var row = new Ext.Panel({
layout: 'column',
border: false,
title: title,
collapsible: item.collapsible,
width: widthOfTheReport,
html: item.html
});

mainPanel.add(row);



Thanks for your help.

sirioz10
21 Jan 2010, 8:11 AM
Hi,
when miframe.js is loaded and I upload an image using Ext.ux.FileUploader IE8 simply crash without error log.
Some Idea about the function that can cause the crash?

In firefox 3.5 all work fine. [Ext 3.1.1 MIF 2.1].

May be the same problem mentioned by albertyips :http://www.extjs.com/forum/showthread.php?t=71961&page=45

Please help me!

Thanks in advance.

sirioz10
21 Jan 2010, 8:34 AM
When Mif is loaded, upload a file cause crash in IE8, and my Ext version is the 3.1.1

The following code cause the crash (Connection.js, function doFormUpload, line: 436):


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

The following override in miframe.js line: 1808 return an element instead of dom, so Ext.removeNode cause the error:

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

if (el = Ext.getDom(el, doc)) {
(ret = flies[named] = (flies[named] || new El.Flyweight())).dom = el;
Ext.isDocument(el) && (ret._isDoc = true);
}
return ret;
};

fermo111
21 Jan 2010, 11:34 AM
I have the following problem:

1) include the google maps library
2) include the ManagedIFrame extension
3) set firebug to break on all errors

FB breaks at this line

rules[ssRules[j].selectorText.toLowerCase()] = ssRules[j];
in the file ext/src/util/CSS.js. This line is executed as the result of the call highlighted below

var CSS = Ext.util.CSS;
if(CSS){
CSS.getRule('.x-hide-nosize') || //already defined?

Since I wish to have "break on all errors" enabled, I don't know exactly how to fix it. Any suggestion?

amit_gupta
21 Jan 2010, 2:38 PM
Hi

I am new to Ext JS and this is my first post on this forum.

I am trying to do something similar to Westside Story demo where we have a TreePanel based menu for external links on the left side and Tabbed panel in the center to display the linked applications.

First time when I click on a URL link in the Tree Panel, application open successfully in a new tab. Next time, When I click on a link, a new tab is created, the tab is split into two parts, showing first application in the first (top) part and the second application in the second (bottom) part.

I am using ext-3.1.1-beta_5899-129 with ManagedIFrame 2.1. Any help would be highly appreciated.

bkraut
21 Jan 2010, 2:59 PM
I'm successfully creating an iframe and open it inside a window with following code:



var iframe = new MIF.Panel({
//xtype: 'iframepanel',
border: false,
width: 800,
height: 600,
header: false,
loadMask: {
msg:"Loading..."
},
defaultSrc: 'Reporter/' + node.attributes.attributes[0].nodeId,
});


I would like to send some parameters also. How can I do that? Is my config unapropriate for sending parameters?

hendricd
21 Jan 2010, 6:17 PM
@fermo --
Indeed, Firebug is not perfect. If you break on all errors, it will ! Even in a try{}catch block.

Get used to it. ;)




I have the following problem:

1) include the google maps library
2) include the ManagedIFrame extension
3) set firebug to break on all errors

FB breaks at this line

rules[ssRules[j].selectorText.toLowerCase()] = ssRules[j]; in the file ext/src/util/CSS.js. This line is executed as the result of the call highlighted below

var CSS = Ext.util.CSS;
if(CSS){
CSS.getRule('.x-hide-nosize') || //already defined?Since I wish to have "break on all errors" enabled, I don't know exactly how to fix it. Any suggestion?

hendricd
21 Jan 2010, 6:19 PM
A reminder (http://www.extjs.com/forum/showthread.php?p=426151#post426151)for you MIF 2.1 fans:

Ext 3.1.x and MIF 2.1 still don't play well together, and likely wont fully support each other until after the 3.1.1 beta.

Newcomers to the Ext framework interested in IFRAME development should consider 3.0.x first and migrate as things evolve.

hendricd
21 Jan 2010, 6:21 PM
@bkraut --
Are you wanting to POST or GET to the frame? MIF 2.0.x has methods for both.




I'm successfully creating an iframe and open it inside a window with following code:



var iframe = new MIF.Panel({
//xtype: 'iframepanel',
border: false,
width: 800,
height: 600,
header: false,
loadMask: {
msg:"Loading..."
},
defaultSrc: 'Reporter/' + node.attributes.attributes[0].nodeId,
});
I would like to send some parameters also. How can I do that? Is my config unapropriate for sending parameters?

bkraut
22 Jan 2010, 12:08 AM
I'd like to use POST.

amit_gupta
22 Jan 2010, 7:43 AM
Hendricd - Thanks for your quick reply. I am using 3.1.1 beta with MIF 2.1 but still getting the problem specified earlier. Do you suggest I should wait until 3.1.1 (not the beta) is released.


A reminder (http://www.extjs.com/forum/showthread.php?p=426151#post426151)for you MIF 2.1 fans:

Ext 3.1.x and MIF 2.1 still don't play well together, and likely wont fully support each other until after the 3.1.1 beta.

Newcomers to the Ext framework interested in IFRAME development should consider 3.0.x first and migrate as things evolve.

smokeman
22 Jan 2010, 8:15 AM
I'd like to go ahead and get 2.1 for ext3.1.1, and play with it. If you do a svn checkout on trunk, is that 2.1? I noticed tags for all the others, but 2.0 is the last branch under tags.

amit_gupta
22 Jan 2010, 9:22 AM
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 tab.

I am not getting this error in FF.

hendricd
22 Jan 2010, 4:16 PM
I'd like to use POST.

@bkraut -- For posting to an IFRAME, use MIF 2.0.x submitAsTarget method. Demo source (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit)here.

MIF 2.1 and Ext 3.1.x are not yet fully compat with one another. Don't even try !!!!

hendricd
22 Jan 2010, 4:18 PM
I'd like to go ahead and get 2.1 for ext3.1.1, and play with it. If you do a svn checkout on trunk, is that 2.1? I noticed tags for all the others, but 2.0 is the last branch under tags.

Yes, SVN is always the latest trial/error (esp with Ext 3.1.1 only!)

matmosis
25 Jan 2010, 7:33 AM
I hendricd, very good work with this ext plugin!

i wonder if there is a possibility to close Ext.ux.ManagedIFrameWindow from the page inside the iframe
(an html page with a close button on it)

thank you,
Mat

NOSLOW
25 Jan 2010, 11:16 AM
hendricd,

I noticed in the latest version of miframe-debug.js, you moved a block of code inside a loop whereas previously it was outside of the loop:

BEFORE (see last block beginning with comment "// Cleanup IE COM Object Hash reference leaks"):


function garbageCollect(){
if(!Ext.enableGarbageCollector){
clearInterval(El.collectorThreadId);
} else {
var eid,
el,
d,
o,
EC = Ext.elCache;

for(eid in EC){
o = EC[eid];
if(o.skipGC){
continue;
}
el = o.el;
d = el.dom;
// -------------------------------------------------------
// Determining what is garbage:
// -------------------------------------------------------
// !d
// dom node is null, definitely garbage
// -------------------------------------------------------
// !d.parentNode
// no parentNode == direct orphan, definitely garbage
// -------------------------------------------------------
// !d.offsetParent && !document.getElementById(eid)
// display none elements have no offsetParent so we will
// also try to look it up by it's id. However, check
// offsetParent first so we don't do unneeded lookups.
// This enables collection of elements that are not orphans
// directly, but somewhere up the line they have an orphan
// parent.
// -------------------------------------------------------

if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){
if(Ext.enableListenerCollection){
Ext.EventManager.removeAll(d);
}
delete EC[eid];
}

}

// Cleanup IE COM Object Hash reference leaks
if (Ext.isIE) {
var t = {};
for (eid in EC) {
t[eid] = EC[eid];
}
Ext.elCache = Ext._documents[Ext.id(document)] = t;
t = null;
}
}
}

AFTER:


function garbageCollect(){
if(!Ext.enableGarbageCollector){
clearInterval(El.collectorThreadId);
} else {
var eid,
el,
d,
o,
EC = Ext.elCache;

for(eid in EC){
o = EC[eid];
if(o.skipGC){
continue;
}
el = o.el;
d = el.dom;
// -------------------------------------------------------
// Determining what is garbage:
// -------------------------------------------------------
// !d
// dom node is null, definitely garbage
// -------------------------------------------------------
// !d.parentNode
// no parentNode == direct orphan, definitely garbage
// -------------------------------------------------------
// !d.offsetParent && !document.getElementById(eid)
// display none elements have no offsetParent so we will
// also try to look it up by it's id. However, check
// offsetParent first so we don't do unneeded lookups.
// This enables collection of elements that are not orphans
// directly, but somewhere up the line they have an orphan
// parent.
// -------------------------------------------------------

if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){
if(Ext.enableListenerCollection){
Ext.EventManager.removeAll(d);
}
delete EC[eid];
}


// Cleanup IE COM Object Hash reference leaks
if (Ext.isIE) {
var t = {};
for (eid in EC) {
t[eid] = EC[eid];
}
Ext.elCache = Ext._documents[Ext.id(document)] = t;
t = null;
}
}
}
}

The reason I ask is because now IE8 is throwing the "unresponsive script" warning because of the increased looping going on. Changing just this block back to its previous location outside the loop solves this issue for me.

Was there a particular reason that you moved this block of code inside the loop, and if so, had you considered the performance implications of this change?

Thanks,
NOSLOW

hendricd
25 Jan 2010, 4:07 PM
@noslow--

Bah, no, that should be isolated from the loop! Nice catch.

bkraut
26 Jan 2010, 3:13 PM
Thanks - it works now.

matmosis
27 Jan 2010, 2:27 AM
I hendricd, very good work with this ext plugin!

i wonder if there is a possibility to close Ext.ux.ManagedIFrameWindow from the page inside the iframe
(an html page with a close button on it)

thank you,
Mat

hendricd
27 Jan 2010, 4:26 AM
@matmosis -- See this (http://www.extjs.com/forum/showthread.php?t=77579).


I hendricd, very good work with this ext plugin!

i wonder if there is a possibility to close Ext.ux.ManagedIFrameWindow from the page inside the iframe
(an html page with a close button on it)

thank you,
Mat

matmosis
27 Jan 2010, 7:54 AM
that's works!!
thank you!

mat

matmosis
27 Jan 2010, 8:50 AM
Hi,
after i close the managediframe.window (with parent.Ext.getCmp('I').close(); from inner page or the window close button x) the other extjs control (in my case a formpanel with a textfiled and button) are BLOCKED

have you got an idea?

thx,
Mat

bkraut
29 Jan 2010, 8:13 AM
I'm using jawr for compressing files on the server.
With the new version of mif compression crashes and the output is not accepted by firefox.

Error is:


(function(){var _XFrameMessaging=funct...lts){if(defaults){apply(o,defaults);}

asagala
29 Jan 2010, 11:05 AM
Does this extension support drag and drop? For example can I drag a node from a tree? I am asking cause I would like to implement drag and drop to the TinyMCE component that uses MIF.

Thanks

hendricd
30 Jan 2010, 9:35 AM
I'm using jawr for compressing files on the server.
With the new version of mif compression crashes and the output is not accepted by firefox.

Error is:


(function(){var _XFrameMessaging=funct...lts){if(defaults){apply(o,defaults);}


@bkraut -- I just ran the entire MIF package thru JSBuilder2 (uses the YUI compressor) with no problems.

Any idea what jawr is choking on? Any error messages, etc?

hendricd
30 Jan 2010, 9:51 AM
Does this extension support drag and drop? For example can I drag a node from a tree? I am asking cause I would like to implement drag and drop to the TinyMCE component that uses MIF.

Thanks

@asagala --
Cross-frame drag drop is planned for a future MIF 2.x+(GPL) release, but not the legacy MIF 1.x(LGPL) codebase that ux.tinyMCE 0.6 requires.

mschwartz
2 Feb 2010, 11:46 AM
Any ETA on when this is going to work with the 3.1.1 RC and beyond?

bkraut
3 Feb 2010, 1:16 AM
@bkraut -- I just ran the entire MIF package thru JSBuilder2 (uses the YUI compressor) with no problems.

Any idea what jawr is choking on? Any error messages, etc?

I'm running 3.1.0 Extjs. Maybe it will go away when 3.1.1. will be available.

hendricd
3 Feb 2010, 3:48 PM
Any ETA on when this is going to work with the 3.1.1 RC and beyond?

@mschwartz -- Keep an eye on MIF/svn/trunk for updates. I committed some changes last weekend.

hendratan
4 Feb 2010, 10:03 PM
Hi All,
im new with extjs and need enlightenment, i try to do simple test with viewport that have menu on west (using accordion) and the menu will load the content inside iframe (on center). this is done and working, however the accordion is stop working (an seems ext js is not working) when i submitted a form in the iframe content which is also have Ext been loaded inside. pls help, here are the simple code that i use:

the parent page that contains accordion:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Spike</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

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

<script type="text/javascript" src="../../ext-all.js"></script>

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

<script type="text/javascript">
Ext.onReady(function() {

var viewport = new Ext.Viewport({
layout:'border',
items:[
{region:'west',id:'menu-panel',title:'Menu',split:true,width: 220,minSize: 220,maxSize: 400,
collapsible: true,margins:'35 0 5 5',cmargins:'35 5 5 5',layout:'accordion',
layoutConfig:{animate:true,titleCollapse: true,fill: false,collapseFirst: true},
scope: 'local'
},
{
region: "center",
id: 'content_panel',
title : 'Welcome',
margins:'35 5 5 5',
xtype: 'iframepanel',
frameCfg : { name : 'content_panel' },
height: 120,
html: 'Welcome...',
stateful : true,loadMask: true,autoShow: true,scope: 'local'
}
]
});

viewport.getComponent(0).add(new Ext.Panel({
collapsible: true,
title: 'test',
html: Ext.get('test1').dom.innerHTML,
layout:'fit'
}));

viewport.doLayout();
});
</script>

</head>
<body>
<div style="display: none">
<div id='test1'>
<ul>
<li>
<a href='frame.html' target='content_panel'>the frame</a>
</li>
</ul>
</div>
</div>
</body>
</html>
the frame:


<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>my frame</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

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

<script type="text/javascript" src="../../ext-all.js"></script>

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

<script type="text/javascript">
Ext.onReady(function() {

});
</script>
</head>
<body>
<form>
<input type="text" name="name" />
<input type="submit" value="klick me!!"/>
</form>
</body>
</html>

cyrhades
6 Feb 2010, 2:11 AM
Hello,
sorry for my english, I'm french.
I have a error (Error : object required.) on in extension .hta and not error in extension .html Why ???:


var i = 0;

// Ouverture d'une nouvelle fenetre avec parametre
var createWindow = function(id_fenetre, titre,largeur, hauteur, pos_x, pos_y,close,mini,maxi,resize,unique,contenu){
i++;
id_fenetre_2 = "fenetre_"+i;
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

var fenetre_admin = new Ext.Window({
title: titre,
width: largeur,
height: hauteur,
id:id_fenetre_2,
plain: true,
constrainHeader: true,
minimizable: mini,
ddScroll: false,
border: false,
bodyBorder: false,
layout: 'fit',
closable: close,
maximizable: maxi,
items: [{
id: 'center_id',
xtype: 'iframepanel',
frameCfg: {name: 'center_iframepanel_id'},
defaultSrc: 'toto.txt'
}]
});

fenetre_admin.show();
alert("stop");
};
createWindow('11','test',500,250,50,50,1,1,1,1);


Please help me.
I use extjs 3.0 and miframe 2.01

Thx

hendricd
6 Feb 2010, 8:10 AM
Hi All,
im new with extjs and need enlightenment, i try to do simple test with viewport that have menu on west (using accordion) and the menu will load the content inside iframe (on center). this is done and working, however the accordion is stop working (an seems ext js is not working) when i submitted a form in the iframe content which is also have Ext been loaded inside. pls help, here are the simple code that i use:

the parent page that contains accordion:
the frame:

@hendratan --

A reminder, MIF 2.1 is only designed for use with Ext 3.1.1 beta or higher.

You have not indicated what version of Ext (or browsers) you are using.

hendricd
6 Feb 2010, 8:12 AM
Hello,
sorry for my english, I'm french.
I have a error (Error : object required.) on in extension .hta and not error in extension .html Why ???:


var i = 0;

// Ouverture d'une nouvelle fenetre avec parametre
var createWindow = function(id_fenetre, titre,largeur, hauteur, pos_x, pos_y,close,mini,maxi,resize,unique,contenu){
i++;
id_fenetre_2 = "fenetre_"+i;
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

var fenetre_admin = new Ext.Window({
title: titre,
width: largeur,
height: hauteur,
id:id_fenetre_2,
plain: true,
constrainHeader: true,
minimizable: mini,
ddScroll: false,
border: false,
bodyBorder: false,
layout: 'fit',
closable: close,
maximizable: maxi,
items: [{
id: 'center_id',
xtype: 'iframepanel',
frameCfg: {name: 'center_iframepanel_id'},
defaultSrc: 'toto.txt'
}]
});

fenetre_admin.show();
alert("stop");
};
createWindow('11','test',500,250,50,50,1,1,1,1);
Please help me.
I use extjs 3.0 and miframe 2.01

Thx

@cyrhades -- What hta? What IE version?

Try your initial development efforts on Firefox/Firebug first. Get the basics working on a browser you can investigate things with.

hendratan
7 Feb 2010, 11:44 PM
@hendratan --

A reminder, MIF 2.1 is only designed for use with Ext 3.1.1 beta or higher.

You have not indicated what version of Ext (or browsers) you are using.

previously using 3.1.0 but after I upgraded it to 3.1.1 beta I am still facing the same issue. browser: firefox 3.5.7
pls help, thanks.

hendricd
8 Feb 2010, 4:26 PM
previously using 3.1.0 but after I upgraded it to 3.1.1 beta I am still facing the same issue. browser: firefox 3.5.7
pls help, thanks.

@hendratan -- Some elimination will be required to scope this. What happens if your iframe is not an MIF? Does the same thing happen?

Does excluding MIF AGAIN in the nested page yield a diff result?

Elimination will be key..

zlt
8 Feb 2010, 11:51 PM
Hello hendricd,
The Ext.get() that is defined in your code does not work correctly when the argument is an "El" object wrapping a window. The problem is caused by the fact that you use Ext.isWindow() to decide whether the argument is a DOM object that should be wrapped in an "El" object. However Ext.isWindow() also returns true for an El element wrapping a window. So the result is wrapped one too many times. The problem is successfully reproduced in FF 3.0.17 for Linux.

I am attaching a patch against miframe-debug.js which (SVN r82). The patch was tested on FF 3.0.17 for Linux and the problem was fixed successfully.

florin.raicu
9 Feb 2010, 4:26 AM
@all --

I'm sorry to announce: There will never be a compatible MIF release for Ext 3.1.0 (public release).

Attempting to provide one would require yet another release of MIF, ONLY for that soon-to-be-obsolete release (suicide). With 3.1.1 coming out shortly (after significant internal Core changes yet again -- event management and DOM internals have all changed again), this is only practical (from my standpoint) to maintain any level of quality for those that depend on this extension.

Put another way:
Due to non-trivial changes in the 3.1.1/Core trunk, the google.code MIF SVN/trunk IS NOT Compatible with Ext 3.1.0 (release) at all, nor will it ever be!

Thus, those of you with SVN/trunk access the Ext 3.1.1, are encouraged to try the latest MIF 2.1 SVN with the 3.1.1 build only. But be warned -- recent changes to Ext 3.1.1 internals are still not "cast in stone". There likely will be additional changes required for MIF to support it as well.

Futher, to eliminate confusion regarding compatible builds, current MIF downloads will only be available via the MIF google.code site.

To add: Most of the problems you have encountered with MIF 2.1 on Ext 3.1.0 (public release) have been been resolved by the latest code in MIF/SVN, (again - designed for Ext 3.1.1 only!).

Just to understand and eliminate any confusions - right now the Ext 3.1.1 has been released. What version of MIF should I use to be compatible?
I'm asking because I have a huge bug described at http://www.extjs.com/forum/showthread.php?p=435148 which is crashing the browser (IE7, IE8) and after the crash the only action available is to close it. I'm guessing the bug is related to this ticket, or not. I don't know.

Thank you!

paolocavelli
9 Feb 2010, 5:15 AM
same problem. An example follows:

Same problem again.
extjs 3.1.1 + mif 2.1
Closing a tab, the interface will be freezed

a.html

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<link rel='stylesheet' type='text/css' href='js/ext-3.1.1/resources/css/ext-all.css' />
<script type='text/javascript' src='js/ext-3.1.1/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='js/ext-3.1.1/ext-all-debug.js'></script>
<script type='text/javascript' src='js/ext-3.1.1/Ext.ux.ManagedIframe.2.1.js'></script>
</HEAD>
<BODY CLASS=me_class>
<SCRIPT type='text/javascript'>

function getSframe() {
var iframePanel;
iframePanel = new Ext.ux.ManagedIFrame.Panel( {
header:false,
autoScroll: false,
defaultSrc: 'b.html',
closable: true,
title: 'new'
} );
var tabs = Ext.getCmp('me_tabs');
tabs.setActiveTab(tabs.add(iframePanel));
}

Ext.onReady(function(){

Ext.QuickTips.init();

var tabPanelItems = [];
tabPanelItems[tabPanelItems.length] = new Ext.Panel ({
title: 'title 1',
layout: 'fit',
tbar: [
{ xtype:'button', text:'click me', handler: getSframe}
],
items: [
{ html: ' ' }
]
});

var tabs = new Ext.TabPanel({
id: 'me_tabs',
activeTab: 0,
region:'center',
deferredRender: true,
enableTabScroll:true,
items: [
tabPanelItems
],
layoutOnTabChange: true
});

var win = new Ext.Viewport ({
id: 'xme_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
tabs
]
});
});
</SCRIPT>
</BODY>
</HTML>
b.html


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

Ext.onReady(function(){

Ext.QuickTips.init();

var panel = new Ext.Panel({
region:'center',
layout:'fit',
items: [
{ html: 'hello' }
]
});

var win = new Ext.Viewport ({
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
panel
]
});
});
</SCRIPT>
</BODY>
</HTML>

tester1
9 Feb 2010, 6:35 AM
Same problem again.
extjs 3.1.1 + mif 2.1
Closing a tab, the interface will be freezed


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.