PDA

View Full Version : [OPEN-1196] Ext.Msg removes x-body-masked class when openned over modal dialog



dherbolt
11 Aug 2010, 10:44 PM
Ext version tested:

Ext 3.2.1


Adapter used:

ext


css used:

only default ext-all.css


Description:

Ext.Msg removes x-body-masked css class on hide when it is openned over the another modal dialog. This issue is connected to any modal dialog openned over another modal dialog. Hide of one of this dialogs removes x-body-masked class and it may affect css styles definition. Modal dialog should test if there is not any other modal dialog openned and remove x-body-masked class only in this case.
When modal dialog is hiding it should test if there is not any other dialog openned and remove x-body-masked class only when there is not any other modal dialog openned.


Test Case:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var
win,
dialog = Ext.Msg.getDialog(),
log = Ext.get('log');

win = new Ext.Window({
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
html: 'Simple Window',
modal: true,
buttons: [{
text: 'Close',
handler: function(){
win.hide();
}
}]
});

win.show();
log.dom.innerHTML += 'win.show();<br>';
log.dom.innerHTML += 'body.hasClass("x-body-masked"): ' + Ext.getBody().hasClass('x-body-masked') + '<br><br>';

Ext.Msg.alert('Error', 'Something is broken.<br>Be more careful.');
log.dom.innerHTML += 'Show Ext.Msg...<br>';
log.dom.innerHTML += 'body.hasClass("x-body-masked"): ' + Ext.getBody().hasClass('x-body-masked') + '<br><br>';

dialog.hide();
log.dom.innerHTML += 'Hide Ext.Msg...<br>';
log.dom.innerHTML += 'body.hasClass("x-body-masked"): ' + Ext.getBody().hasClass('x-body-masked');
});
</script>

<style type="text/css">
#log {
width: 400px;
height: 200px;
overflow: auto;
border: 1px solid blue;
position: absolute: top: 10px;
left: 10px;
padding: 5px;
margin: 10px;
font-family: verdana, arial;
font-size: 11px;
}
</style>
</head>
<body>
<fieldset id="log"><legend>Log</legend></fieldset>
</body>
</html>


Steps to reproduce the problem:

See log in attached example


The result that was expected:

After MsgBox is hidden body still contains x-body-masked class
Log:


win.show();
body.hasClass("x-body-masked"): true
Show Ext.Msg...
body.hasClass("x-body-masked"): true
Hide Ext.Msg...
body.hasClass("x-body-masked"): FALSE



The result that occurs instead:

x-body-masked class is not removed
Log:


win.show();
body.hasClass("x-body-masked"): true
Show Ext.Msg...
body.hasClass("x-body-masked"): true
Hide Ext.Msg...
body.hasClass("x-body-masked"): TRUE

Jamie Avins
12 Aug 2010, 10:20 AM
Thank you for the report.

joeutz
31 Aug 2010, 12:00 PM
My team has also been affected by this problem. We put in a workaround via an Ext.Window extension, but would be nice if support was built in.



RP.Window = Ext.extend(Ext.Window,
{
beforeShow: function()
{ // HACK: Overcoming an Ext bug where a modal shown on top of another modal removes the body mask class causing our styles to go odd.
if (this.modal)
{
this._wasAlreadyMasked = Ext.getBody().hasClass('x-body-masked');
}

RP.Window.superclass.beforeShow.apply(this, arguments);
},

hide: function()
{ // HACK: Overcoming an Ext bug where a modal shown on top of another modal removes the body mask class causing our styles to go odd.
RP.Window.superclass.hide.apply(this, arguments);

if (this.modal && this._wasAlreadyMasked)
{
Ext.getBody().addClass('x-body-masked');
this._wasAlreadyMasked = false;
}
}
});