PDA

View Full Version : Modal windows and Window Manager



felenka
31 Jan 2011, 7:00 AM
This is not a question, but rather small instructions for whom it may concern based on my recent experience.

Ext.Window may have a link to WindowGroup manager. This feature allows to organize windows into the groups.
As far as you don't have any groups, they all are organized into default hidden group and everything works fine... until you need to open a modal window.

There is a tricky issue: should modal window block all the windows or just inside its own group?
At present, the ExtJS defines the modality of window only in relation to the group it belongs. Moreover, each group starts its z-index from the same default value. Which means that when opening modal window you might be surprised that not all the windows are "shadowed" and disabled.

I could see two solutions depending on what kind of modal windows is needed:

1) if you need your modal window to hide and disable all the windows whatever, use the same global group manager for all of them ("manager" in Ext.Window class). It must be applied to all the windows, inherited or extended Ext.Window class.

For instance, when using Ext.Desktop, you should add Ext.Desktop.windows as a reference to all the windows, no matter if they're desktop windows or standard Ext.Window classes

2) if you need to have "partially modal" window, specify group manager for all the groups of windows, but be aware that their visible zones might be overlapped. In this unlucky situation that will be developer's responsibility to define the behaviour and outlook of the whole layout.

3) Alternatively, don't specify window group manager at all. In this case all the window objects will belong to the same default window group and will be shown correctly. Although, this wouldn't work if you work with 3rd-party library having window group manager in use

Working example see below.
Press button to show the window, then just click on window to show the modal dialog. Repeat for the second window.
Until lines with "manager:" property definition are commented, everything works fine.
Uncomment them and you'll see that you are still able to click on "parent" windows while modal dialog is open


JavaScript:


Ext.onReady(function(){
var win,win2;

var button = Ext.get('show-btn1');
button.on('click', function(){
if(!win){
win = new Ext.Window({
applyTo:'win1',
layout:'fit',
width:300,
height:200,
x: 120,
y: 100,
// manager: Ext.WindowGroup(),
closeAction:'hide',
plain: true,
items:[{
xtype: 'button',
id: 'modal-btn1',
width:50,
height:20,
label: 'Press me',
listeners:{
click: function(){
var w= new Ext.Window({
width:200,
height:200,
x:150,
y:150,
modal:true,
plain:true,
html:'I am modal window #1',
buttons: [{
text: 'Close',
handler: function(){
w.close();
}
}]

});
w.show();
}
}
}],

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});

var button2 = Ext.get('show-btn2');
button2.on('click', function(){
if(!win2){
win2 = new Ext.Window({
applyTo:'win2',
layout:'fit',
width:300,
height:200,
// manager: Ext.WindowGroup(),
x: 220,
y: 150,
closeAction:'hide',
plain: true,
items:[{
xtype: 'button',
id: 'modal-btn2',
width:50,
height:20,
value: 'Press me',
listeners:{
click: function(){
var w= new Ext.Window({
width:200,
height:200,
x:150,
y:150,
modal:true,
plain:true,
html:'I am modal window #2',
buttons: [{
text: 'Close',
handler: function(){
w.close();
}
}]

});
w.show();
}
}
}],

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win2.hide();
}
}]
});
}
win2.show(this);
});

});
Html:



<input type="button" id="show-btn1" value="Win group 1" /><br /><br />
<input type="button" id="show-btn2" value="Win group 2" /><br /><br />

<div id="win1" class="x-hidden"></div>
<div id="win2" class="x-hidden"></div>
Actually it's "upgraded" Hello, World example (see at http://dev.sencha.com/deploy/dev/examples/window/hello.html)

PS. I'm not sure if it's a correct forum, please, move to the necessary place if needed.