PDA

View Full Version : Issue with IE8 Ext.window.WIndow and modal true



mwmayer4
6 Sep 2013, 5:50 AM
The giant, evil gorilla rears it's ugly head again. I have an app that looks great in Chrome but unfortunately needs to be deployed using IE8 and above. It is hard to explain this but I'll give it my best shot. I have searched for days and tried everything I can think of, but, alas, no luck..

I have a MVC app. The viewport has a border layout and in the center region I have a panel defined. Inside the panel there is an item which has a component defined with an autoEL that contains an iframe. Inside that iframe there will be a PDF document displayed based on the user request. Works great! The code for that looks like this:



var pdfpanel = this.getPDFwindow();
pdfpanel.removeAll();
pdfpanel.add({
xtype: 'component',
itemId: 'pdfdoc',
id: 'pdfdoc',
autoEl: {
tag: 'iframe',
src: pdfurl,
style: 'height: 100%; width: 100%; border: none'
}
});
pdfpanel.show();


Once the PDF is displayed the user may select options from a toolbar above. The problems occurs when I attempt to put up a window on top of the iframe (or anywhere in the browser) for the user to fill in a form.

The issue in IE8 is, you don't see the window!!! Nor will you see a Ext.MessageBox that is displayed upon execution of the form nor the completion message box. Since the message box has modal:true, after the function runs the entire browser is "locked" in modal:true. The code for the prompt window (which is not being displayed in IE8) looks like:



var promptwindow = Ext.create('Ext.window.Window', {
title: 'Email Image',
width: 400,
height: 450,
layout: 'fit',
closeAction: 'destroy',
itemId: 'promptwindow',
items: [{
xtype: 'emailform'
}]
}).show();

Such a simple thing!!! The message box which you also can't see in IE8 looks like:


Ext.MessageBox.show({
title: 'Send Email',
msg: 'Sending Email..',
width: 300,
wait: true,
waitConfig: {
interval: 200
},
progress: true,
closable: false,
modal: true
});

Again, such a simple thing! (all works in Chrome)

I've tried toBack(), toFront(), put X and Y coordinates on the message boxes and window prompt, but none have any effect.

Anyone have an idea how to slay the evil giant?
Thanks!

ettavolt
6 Sep 2013, 6:18 AM
Somewhere I've seen something about those ie iframe problems. But people were able to put some element over it. If you find what styles do the trick, you can apply them to something like .x-layer.

Hm, looks like this may help: http://jsfiddle.net/gaby/BS4Ww/3/