PDA

View Full Version : Changing the zindex on a window and/or MessageBox.confirm dialog....



javabee
26 Aug 2010, 5:30 AM
Hi all, simple one hopefully... I have a confirm dialog that is fired based on a button click in an Ext window. The dialog is appearing behind the window. Does anyone have any thoughts on the best way to set the z-index of a window or panel. I've read a few posts that mention the zSeed etc but this just seems to adjust the 'starting z-index' of subsequent windows...
Ideally i'd just like to set the z-index in the config e.g something like....(i know this doesn't work:)


new Ext.Window(
{
title: 'blah',
style: 'zIndex:9000'
...
});
p.s apologies if this looks similar to another item i've raised today but the initial item was raised 4 hours ago and i've yet to see it in the forums... if i find it, i'll request deletion.

Thanks in advance...

darthwes
26 Aug 2010, 6:05 AM
how about
myWin.show(oldWin.getBody());? Doesn't that show myWin over oldWin?



ps "oldWin.getBody" might be wrong, try oldWin

javabee
26 Aug 2010, 6:22 AM
thanks darthwes, thing is... the subwindow shows fine over the main window, its only when i call a dialog (MessageBox.confirm) from the sub window that the resultant confirm dialog appears under the subwindow i.e nested between the main screen and the subwindow.... i really either need to ensure that the initial subwindow will have a definate lower z-index than the resultant dialog though perhaps config (code section in initial post) or be able to set the resultant MessageBox.confirm dialog to have a definate higher z-index than a standard subwindow!?....

darthwes
26 Aug 2010, 8:54 AM
Ext.onReady(function() {
new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
}, {
region: 'north',
height: 75
}, {
region: 'south',
height: 125
}, {
region: 'west',
collapsible: true,
split: true,
width: 300,
items:[{
xtype: 'button',
text: 'show mid window',
handler: function() {
var mWin = Ext.getCmp('mwin');
if(!Ext.isDefined(mWin)) {
mWin = new Ext.Window({
id: 'mwin',
height: 200,
width: 300,
title: 'My Window',
closeAction: 'hide',
items: [{
xtype: 'label',
html: '<p> Some writing </p>',
}, {
xtype: 'button',
text: 'Open confirm',
handler: function() {
Ext.Msg.confirm('X', 'Confirmation message',
function() {
}, this);

}
}]
});
}
mWin.show();
}
}]
}]
});
});


Works fine for me. Can you create a simple example that demonstrates the problem and post it for us to see?

javabee
27 Aug 2010, 6:09 AM
Thanks darthwes, yep it all seems to work fine in other areas but i just cant spot this one. I think its the way i'm applying the RowSelect listener (scoping issue?)... simple button clicks etc all fire fine but a selection on the grid always puts the dialog behind the subwindow... thanks in advance



var myStore = new Ext.data.XmlStore(
{
url: 'test.xml',
record: 'user',
idPath: 'id',
fields: ['id','firstname','surname']
});

var grid= new Ext.grid.GridPanel(
{
id: 'myGrid',
width: 400,
height: 200,
loadMask: true,
title: 'Test Grid',
store: myStore,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
columns:
[
{ header: "id", width: 100, dataIndex: 'id', sortable: true },
{ header: "firstname", width: 100, dataIndex: 'firstname', sortable: true, hidden: false, align: 'center'},
{ header: "surname", width: 100, dataIndex: 'surname', sortable: true, hidden: false, align: 'center'}
]
});
myStore.load(); // Initiate first load

grid.getSelectionModel().on('rowselect', function(sm,rowIdx, r)
{
Ext.MessageBox.alert("ext message" + r.data.id);
});

javabee
27 Aug 2010, 6:13 AM
p.s apologies for not being clear on the fact that a datagrid/rowselect was involved!? i was trying to simplify to the bare bones of what i thought was the problem :/

darthwes
27 Aug 2010, 8:41 AM
Oh, nice. There's no way to manage z index without a functional Window Manager. Ext.WindowMgr doesn't seem to actually do anything, though.

Any fellow developers know why Ext.WindowMgr doesn't want to work out of the box like all the documentation alludes to? I mean some information is available from it, but the methods like bringToFront/sendToBack don't work at all, have no documentation, and nothing but questions across the forums (no actual answers for it unless you count "Hey, mine works" comments that don't include any real information).

Similarly lots of people have the MessageBox appearing behind their windows, and none of them seem to have an answer.

mschwartz
27 Aug 2010, 12:24 PM
Ext.WindowMgr needs to be completely rethought and implemented properly.

darthwes
30 Aug 2010, 5:25 AM
Bump...Really?

javabee
31 Aug 2010, 3:10 AM
mmm, i'd kind've hoped i was doing something wrong in the code... really cant believe that nobody has ever needed to open a window, containing a grid then fire off an alert on row selection, anyone!?...

javabee
31 Aug 2010, 4:50 AM
I'm guessing there must be a solution as the same question was posted by a 'premium member'?

http://www.sencha.com/forum/showthread.php?84519-Ext.MessageBox.alert%28%29-z-order-problem-shows-behind-window&highlight=z-order

mschwartz
31 Aug 2010, 5:05 AM
I do windows with grids in them that have buttons that open modal windows on top with grids in those, etc.

javabee
31 Aug 2010, 6:21 AM
ok, i'm sure a better solution could be found but for now, assigning the Window to a new WindowGroup seems to get around the issue.



// Created a new window group
this.myWindowGroup = new Ext.WindowGroup();

// then, in the Ext.Window config i assigned the manager attribute to the new WindowGroup.
var wnd = new Ext.Window
{
manager: this.myWindowGroup,
...
}

Barzoy
18 Oct 2010, 3:09 AM
Uhm, sorry for necroposting, but it looks like I've found some kind of solution.

The problem arises in the case, when creating instances of the Ext.Window you tell them to use another window manager other than global. In this case, it turns out that the standard dialog boxes (or rather, their Z-Indexes) are regulated by the global window manager, and your own windows - by the manager that you specified when you create them.

There are 2 decisions:
1) The easy way. Do not use any window managers other than global. Just when you create a window does not tell it what the manager to use, it will use the global manager by default.


var myWindow = new Ext.Window ({
// your config here
});

2) The right way. After you create your own window manager, set its zseed property equal to any number less than 9000 (7000 will be just right). This will ensure that any standard dialog box created with Ext.MessageBox, will be shown on top of all of your windows.


var myManager = new WindowGroup ();
myManager.zseed = 7000; / / dont set it via config object, assign only after constructor call

var myWindow = new Ext.Window ({
manager: myManager
});

Animal
18 Oct 2010, 4:48 AM
Uhm, sorry for necroposting...

Love the creative English! I'm going to remember that.