[2.2] MessageBox mask doesn't hide combobox in IE6

[wanderAround]

This issue was briefly discussed in the Premium Member forum:
http://extjs.com/forum/showthread.php?p=211144

To reproduce (only in IE6):
1. Have a page that has a combobox on the page.
2. Call Ext.Msg.alert("title", "msg")
(or any Ext.MessageBox method that pops up a message).

The background is masked, except for the combobox, which is not masked.
Sounds like the mask should include a transparent iframe in order to hide the combo box.

[Condor]

IE6 already uses shims:


Ext.useShims = ((isIE && !isIE7) || (isMac && isGecko && !isGecko3));

But an IFRAME shim can't block out a classic combobox dropdown list (maybe it's time to switch to Ext.form.Combobox?).

[wanderAround]

To test an iframe shim, I just added one to my source html. It masks the combobox.
Looks like div shims don't mask comboboxes, but iframes do.

http://i521.photobucket.com/albums/w340/wanderAround/Clipboard03.jpg

Here's it with the div shim (also in the previous thread):
http://i521.photobucket.com/albums/w340/wanderAround/Clipboard02.jpg



So I'd say this is still a bug, as iframes could be used so that the mask works correctly for IE6.

This is an existing (old) project that we are updating with ExtJS. We can't replace all of our standard combo boxes right now, as the app has hundreds of pages, with lots of forms, which means LOTS of work to convert and test. We're starting small, replacing error messages and such.

[jarrednicholls]

I haven't tested it, just typed it right here on the forums...will give you the idea though.


Ext.MessageBox.show = Ext.MessageBox.show.createSequence(function(){
// Add code to add iframe to DOM
// Something like this...haven't tested this
this.iframeEl = Ext.getBody().createChild({
tag: 'iframe',
src: Ext.BLANK_IMAGE_URL,
style: 'width:' + Ext.lib.Dom.getDocumentWidth() + 'px;' +
'height:' + Ext.lib.Dom.getDocumentHeight() + 'px;' +
'filter:alpha(opacity=0);opacity:0.0;position:absolute;top:0px;left:0px;z-index:19000;'
});
}, Ext.MessageBox);
...
...
...
Ext.MessageBox.alert('My Title', 'My Message', function(){
Ext.MessageBox.iframeEl.remove();
});

You can also make it automatically remove the iframe by attaching to the hide event for the underlying Window object used by MessageBox:


Ext.MessageBox.getDialog().on('hide', function(){
Ext.MessageBox.iframeEl.remove();
});