Ext.ux.ManagedIframePanel gets destroyed every time!

[rezib]

Hello friends,

I have been working on an interesting little application that will make extensive use of managed IFrames. It is built around a container with a splitter where there is a TabPanel container on the left and a regular Panel on the right into which I may drop any number of ManagedIFramePanel objects. The panel on the right is collapsible.

During my unit testing I have found that the ManagedIFramePanel that is contained in the right hand panel gets re-loaded every time I collapse the panel and then again every time I expand the panel.

When I expand it the second time, it throws the following exception.

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMEventTarget.removeEventListener]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::...

Here is the onReady code...



Ext.onReady(function()
{
new Ext.Container(
{
layout: 'border',
renderTo: 'portalBody',
width: '100%',
height: '100%',
items: [
{
xtype: 'tabpanel',
region: 'center',
width: '70%',
split: true,
activeTab: 0,
items: [<?=$portal['infotabs']?>]
},
{
xtype: 'panel',
region: 'east',
width: '30%',
split: true,
collapsible: true,
collapseMode: 'mini',
header: false,
layout: 'absolute',
defaults: { x: 0, y: 0, anchor: '100% 100%', border: false },
items: [<?=$portal['controltabs']?>]
}
],
});


Here is the PHP code that defines 'controltabs'



$portal['controltabs'] = <<<CONTROLTABS
new ....ts.IFramePanel(
{
autoDestroy: false,
defaultSrc: 'http://localhost/ZendServer'
})

CONTROLTABS;


and here is the declaration of the ....ts.IFramePanel



....ts.IFramePanel = Ext.extend(Ext.ux.ManagedIframePanel,
{
disableMessaging: false,
animCollapse: false
});


Can someone help me to determine how to preserve the content between collapse and expand events?

Thanks in advance.

[hendricd]

@rezib --

Frame content destruction is caused by display:none transitions in Ext layouts. Add this your class definition, and use the latest MIF class for a Panel:


....ts.IFramePanel = Ext.extend(Ext.ux.ManagedIFrame.Panel,
{
disableMessaging: false,
animCollapse: false,
autoScroll : true,
hideMode : Ext.isIE ? 'display' : 'nosize'
});Also note that MIF is only supported on Ext 3.x releases greater than 3.1.1

[hendricd]

@rezib -- ALSO, this is not supported:




width: '100%',
height: '100%',

Use an Ext.Viewport instead!

[rezib]

@rezib --

Frame content destruction is caused by display:none transitions in Ext layouts. Add this your class definition, and use the latest MIF class for a Panel:


....ts.IFramePanel = Ext.extend(Ext.ux.ManagedIFrame.Panel,
{
disableMessaging: false,
animCollapse: false,
autoScroll : true,
hideMode : Ext.isIE ? 'display' : 'nosize'
});Also note that MIF is only supported on Ext 3.x releases greater than 3.1.1

I'll give this a try. I should have asked for help sooner... I'm already using the most recent release of ExtJS and ux.ManagedIframe.

[rezib]

@rezib -- ALSO, this is not supported:




width: '100%',
height: '100%',

Use an Ext.Viewport instead!

Doug,

I would normally use a Viewport. My client has some strange ideas about what they want to do, so maybe I need to be using a Ext.Window instead, but I will need to maximize it. What's the easiest way to do that?

[hendricd]

Use
Ext.ux.ManagedIFrame.Window instead with:



maximizable : true

[Sesshomurai]

@rezib -- ALSO, this is not supported:




width: '100%',
height: '100%',

Use an Ext.Viewport instead!

I (believe) I have a similar problem with MIF in Tab Panel with PDF viewer. It works fine at first, but seemingly after I open another MIF (ODT one), then go back to my PDF tab panel, its now gone and says I need to install Adobe Reader.

As far as I know, I'm using the latest MIF drop and 3.2.

PS. Not hijacking this thread, but rather wondering if I am having a similar or same problem and can fix it with the above suggestions as well.