PDA

View Full Version : Extjs 3.2.1 not working well in iframe in IE 7/8



forumuser1080
1 Aug 2012, 10:46 AM
I have an ExtJs app that a client is throwing into an iframe. I do not have control over the fact that they want to throw my app as is into an iframe.

In an iframe my app works great in any browser except IE 7/8. Whenever I click on a button in my ui the entire ui turns light blue. Almost like everything tried to get re-sized or re-rendered and is frozen. If I re-size the browser window my app comes back, but the minute I click on anything again my ui turns blue again.

I read somewhere that QuickTips might be causing an issue, I don' call init on QuickTips anymore as a test and I am still seeing the problem.

Anyone have any idea at all on what I can try, I am lost.

Thanks!

Here is a quick sample:



<html>
<head>
</head>
<body>
<iframe src="test.html" width="1000" height="1000"></iframe>
</body>
</html>




new Ext.ViewPort({
id: 'viewport',
layout: 'border',
items: [{
new Ext.TabPanel({
region: 'center',
id: 'tabPanel',
activeTab: 0,
items: [
new Ext.Panel({
title: 'Test tab 1',
tbar: {
items: [{
test: 'click me',
handler: function(button) {
Ext.Msg.show({
title: 'Testing',
msg: 'You clicked me',
width: 150,
butons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
}
}]
}
}),
new Ext.Panel({
title: 'Test tab 2'
})
})
}]

});

scottmartin
1 Aug 2012, 4:46 PM
Are you able to test this in 3.4?

Scott.

forumuser1080
2 Aug 2012, 4:51 AM
I am sure that I can find some time to throw that code into version 3.4. A couple of questions though. Is there any reason to believe that 3.4 fixed this problem? Also my 3.2.1 version lives on a server that contains many apps. Upgrading and testing all these apps is a bit of a monster task.

That being said does anyone really know what is going on in version 3.2.1 that causes it to not work in frames at all? Seems like a pretty big problem. If there are mods I could make to 3.2.1 that would be a much better option to get things working in the next few weeks.

scottmartin
2 Aug 2012, 7:34 AM
This seems to work fine for me in in XP/IE8 (Ext: 3.4)



<html>
<head>
</head>
<body>
<iframe src="test.html" width="1000" height="1000"></iframe>
</body>
</html>




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>f234742</title>

<link rel="stylesheet" type="text/css" href="../../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../extjs/examples/shared/examples.css" />

<script type="text/javascript" src="../../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../extjs/ext-all-debug.js"></script>

<script type="text/javascript" src="example.js"></script>
</head>
<body>
<title>f234742</title>
</body>
</html>




Ext.onReady(function() {

new Ext.Viewport({
layout: 'border',

items: [
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [
{
xtype: 'panel',
title: 'Tab 1',
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'MyButton',
handler: function() {
alert('click');
}
}
]
}
},
{
xtype: 'panel',
title: 'Tab 2'
}
]
}
]
});

});


Scott.

forumuser1080
2 Aug 2012, 4:06 PM
Again anyone know what was fixed from 3.2.1 to 3.4 in regards to using extjs in iframes? I can upgrade to 3.4 but given our schedule that is gonna be months and months away. If I can throw in a few mods to my extjs version 3.2.1 code that is a much better option.

Thanks.

forumuser1080
7 Aug 2012, 1:59 PM
One last try. Anyone know what changed from 3.2.1 to 3.4 that fixed iframe problems in IE 6/7? I would like to mod my 3.2.1 code if possible.

Thanks

Zdeno
7 Aug 2012, 2:36 PM
I didnt find any change log in 3.3.0 but you can check following repository (until will be deleted)

http://trac.geoext.org/browser/ext/

(http://trac.geoext.org/browser/ext/)Try upgrade your app to Ext 3.4. or Ext 4.1.1