PDA

View Full Version : Sheet mask conflicts with modal mask (Msg.alert)



csullins
18 Apr 2011, 1:54 PM
When a Sheet is open (e.g. a DatePicker), and a MessageBox is opened on top of it (via Ext.Msg.alert), the Sheet's mask will disappear when the MessageBox's "OK" button is clicked. This obviously looks bad. It is present in at least versions 1.0 and 1.1.


var Test = Ext.regApplication({
name: 'Test',
defaultTarget: 'viewport',
launch: function() {
this.viewport = new Test.Viewport();
}
});

Test.Viewport = Ext.extend(Ext.Panel, {
id: 'viewport',
fullscreen: true,
items: {
xtype: 'datepickerfield'
}
});

Does someone know of a workaround for this?

eallik
15 May 2011, 6:38 AM
I just ran into the same issue. Has anybody been able to solve this or find a workaround?

(Ext.MessageBox is also an Ext.Sheet, so it's really a problem of displaying 2 sheets on top of each other.)

Workaround:

I managed to work around this issue by simply re-masking the body right after the topmost Sheet (MessageBox) has been hidden. This cannot be done in the callback function but instead in the hide event handler as the hiding is animated:



Ext.Msg.alert(...).on('hide', function() {
Ext.getBody().mask();
}, null, {single: true});


(The {single: true} is necessary because Ext.Msg is a singleton and we don't want that workaround on all message boxes.)

eallik
16 May 2011, 5:33 AM
Update:

This is not only/really about hiding the mask, it's about one not being created in the first place.
The result of this is not just that any previously visible mask is unwantedly removed but also that setting the second Sheet/MessageBox to be modal has no effect whatsoever — anything behind it (i.e. the first Sheet/MessageBox) is still fully interactable.

My current workaround is to simply disable any controls that the user might interact with while the "modal" box is open.

Update2:

The problem is also that the z-index value of any Sheet/MessageBox that is opened is 10000 no matter how many of them are already visible. This means that sometimes the upper Sheet/MessageBox is rendered below the already existing one. My workaround:



Ext.getCmp('some-control').disable();
var msgBox = Ext.Msg.alert(...);
msgBox.on('hide', function() {
Ext.getBody().mask();
Ext.getCmp('some-control').enable();
}, null, {single: true});
var zIndex = parseInt(existingSheet.el.getStyle('z-index')) + 1;
msgBox.el.setStyle('z-index', '' + zIndex + ' !important');


Update3:

When opening a modal:false MessageBox, the mask of any existing modal Sheet is destroyed. This does not make much sense — a Sheet/MessageBox should not destroy anything that was there before it.