PDA

View Full Version : [INFOREQ] [ext-4.0.2.a] Modal Window masked in IE



ShaneMc
21 Jun 2011, 3:28 AM
In Internet Explorer Modal windows themselves are being masked, rather than the background to the window.
There seems to be a general problem with modal windows in Ext4.
Is there a resolution to this problem?

hendricd
21 Jun 2011, 4:34 AM
In Internet Explorer Modal windows themselves are being masked, rather than the background to the window.
There seems to be a general problem with modal windows in Ext4.
Is there a resolution to this problem?
@Shane-

Is there a particular version of IExplorer this occurs with?
Any other competing style sheets involved (from a previous project)?
DOCTYPE?

ShaneMc
21 Jun 2011, 4:58 AM
@Shane-

Is there a particular version of IExplorer this occurs with?
Any other competing style sheets involved (from a previous project)?
DOCTYPE?

This happens in IE8. I haven't tried IE9 yet.
There does not seem to be any competing style sheets involved.
and DOCTYPE is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The window also shows only the first time, when I close the window and reopen it, it does not display but screen is fully masked?

ShaneMc
21 Jun 2011, 5:00 AM
Just checked and also happening in IE9

hendricd
21 Jun 2011, 5:07 AM
Just checked and also happening in IE9

@Shane--

If you are closing the Window the first time ( using the default closeAction: 'destroy' ), attempting to show the same Window instance again (now destroyed) would not do much at all.

Are you re-creating the closed window or using closeAction : 'hide' ?

ShaneMc
21 Jun 2011, 5:14 AM
@hendricd--

Thanks for your reply.
I am re-creating the closed window each time the button is clicked and using the close() method.

Also in all browsers the whole document body gets masked rather than the component the window has been rendered to?

ShaneMc
21 Jun 2011, 6:43 AM
@Shane--

If you are closing the Window the first time ( using the default closeAction: 'destroy' ), attempting to show the same Window instance again (now destroyed) would not do much at all.

Are you re-creating the closed window or using closeAction : 'hide' ?

@hendricd--

I have fixed my problem with the window only displaying once. It seemed to be a problem with adding a new window with the same id conflict.

However the Modal window masking still exists in IE.
And all browsers mask the whole document body rather than the component the window has been rendered to?

ShaneMc
21 Jun 2011, 7:47 AM
I was using renderTo instead of applyTo.
But the whole body still gets masked rather than component I apply the window to?

hendricd
21 Jun 2011, 11:09 AM
I was using renderTo instead of applyTo.
But the whole body still gets masked rather than component I apply the window to?

@Shane --

Have you looked at the examples/window code:

It demonstrates how to render floating objects into other containers (as items).

I've tweaked the sample further to include modal treatment for one of the nested windows:


var win2 = Ext.create('widget.window', {
height: 200,
width: 400,
x: 450,
y: 450,
title: 'Constraining Window, plain: true',
closable: false,
plain: true,
layout: 'fit',
items: [floater = Ext.create('Ext.Component', {
xtype: 'component',
floating: {
shadow: true
},
style : 'background-color:red;',
height: 50,
width: 50,
x: 175,
y: 75
}), constrainedWin = Ext.create('Ext.Window', {
title: 'Constrained Window',
width: 100,
height: 100,
x: 20,
y: 20,
constrain: true,
layout: 'fit',
items: {
border: false
}
}), constrainedWin2 = Ext.create('Ext.Window', {
title: 'Header-Constrained Win',
width: 100,
modal : true,
height: 100,
x: 120,
y: 120,
constrainHeader: true,
layout: 'fit',
items: {
border: false
}
}),{
border: false
}]
});
win2.show();
floater.show();
constrainedWin.show();
constrainedWin2.show();

Done this way, the parent container is the masking target, rather than document.body.

ShaneMc
22 Jun 2011, 12:42 AM
@Shane --

Have you looked at the examples/window code:

It demonstrates how to render floating objects into other containers (as items).

I've tweaked the sample further to include modal treatment for one of the nested windows:


var win2 = Ext.create('widget.window', {
height: 200,
width: 400,
x: 450,
y: 450,
title: 'Constraining Window, plain: true',
closable: false,
plain: true,
layout: 'fit',
items: [floater = Ext.create('Ext.Component', {
xtype: 'component',
floating: {
shadow: true
},
style : 'background-color:red;',
height: 50,
width: 50,
x: 175,
y: 75
}), constrainedWin = Ext.create('Ext.Window', {
title: 'Constrained Window',
width: 100,
height: 100,
x: 20,
y: 20,
constrain: true,
layout: 'fit',
items: {
border: false
}
}), constrainedWin2 = Ext.create('Ext.Window', {
title: 'Header-Constrained Win',
width: 100,
modal : true,
height: 100,
x: 120,
y: 120,
constrainHeader: true,
layout: 'fit',
items: {
border: false
}
}),{
border: false
}]
});
win2.show();
floater.show();
constrainedWin.show();
constrainedWin2.show();

Done this way, the parent container is the masking target, rather than document.body.

@hendricd--

Thank you very much for your response. However this does not seem to work if the parent container is a panel?. The whole body gets masked rather than the parent panel?

hendricd
22 Jun 2011, 1:59 PM
@Shane --

Could you post the relevant portion of your layout config?

ShaneMc
23 Jun 2011, 12:15 AM
For eg. if I change your example so that the parent container is a panel rather than a window. The whole body gets masked.



var win2 = Ext.create('Ext.panel.Panel', {
height: 200,
width: 400,
x: 450,
y: 450,
title: 'Constraining Window, plain: true',
closable: false,
plain: true,
layout: 'fit',
items: [floater = Ext.create('Ext.Component', {
xtype: 'component',
floating: {
shadow: true
},
style : 'background-color:red;',
height: 50,
width: 50,
x: 175,
y: 75
}), constrainedWin = Ext.create('Ext.Window', {
title: 'Constrained Window',
width: 100,
height: 100,
x: 20,
y: 20,
constrain: true,
modal: true,
layout: 'fit',
items: {
border: false
}
}), constrainedWin2 = Ext.create('Ext.Window', {
title: 'Header-Constrained Win',
width: 100,
modal : true,
height: 100,
x: 120,
y: 120,
constrainHeader: true,
layout: 'fit',
items: {
border: false
}
}),{
border: false
}]
});
win2.show();
floater.show();
constrainedWin.show();
constrainedWin2.show();

hendricd
27 Jun 2011, 7:43 AM
@Shane--

In order to render a Window (unmanaged) into another DOM element or (non-floating) Component, you'll need to create a UNIQUE zManager instance to handle it, other floating components, and masking the way you want.


var panel = Ext.create('Ext.panel.Panel', {
height: 500,
width: 700,
title: 'Constraining Panel, plain: true',
closable: true,
plain: true,
renderTo : Ext.getBody()
});
panel.show(); //render it first

var constrainedWin = Ext.create('Ext.Window', {
title: 'Header-Constrained Win',
width: 100,
renderTo : panel.body,
modal : true,
height: 100,
x: 10,
y: 10,
constrainHeader: true,
layout: 'fit',
items: {
border: false
}
});

var zMan = Ext.create('Ext.ZIndexManager', panel.body); //also declares the mask target
zMan.register(constrainedWin); //switch to the new zManager
constrainedWin.show();


Thus, all new Windows (or floating components) destined for that panel should use the same zindexManager instance.

This works well, but exposes another problem. Dropping the Window (after a drag operation) inside the panel does not position the Window properly. Still examining that one..

mitchellsimoens
27 Jun 2011, 7:53 AM
@Doug This has been reported. Positioning and maximizing when constrained is broken as well and is slated to be fixed in 4.0.5.

grubincan
30 Apr 2012, 6:35 AM
Was this fixed in 4.0.5?, because it seems to be broken in 4.0.7.

The example code provided by hendricd results in a mask covering both the panel and the constrained modal window, in IE.