PDA

View Full Version : Ext.MessageBox appears behind Window



[Daniel]
18 Mar 2011, 10:10 AM
Hi,

following situation: I got a TabPanel (in a Window) and catch the beforetabchange event to prevent the change in a special case.

Should this occur, the user gets a messagebox to choose between two options.

The problem is that this messagebox opens behind the window which contains the tabpanel.

The code:


onBeforeTabChange: function(tabPanel, newTab, currentTab) {
var ftWindow = this.ownerCt;

if(ftWindow.record.get('id') == null && newTab == ftWindow.mediaCenterTab) {
ftWindow.setDisabled(true);
var mb = Ext.MessageBox.show({
title: PN.i18n.get('mediacenter.save_record_first_to_upload_files_title'),
msg: PN.i18n.get('mediacenter.save_record_first_to_upload_files_text'),
modal: true,
closable: false,
buttons: Ext.MessageBox.OKCANCEL,
fn: function(button) {
if(button == 'yes') {
alert('debug');
}
ftWindow.setDisabled(false);
}
});

return false;
}
}I tried both, mb.getDialog().toFront() and Ext.WindowMgr.bringToFront(mb.getDialog()), none of them is working.

Thanks in advance.

Greetings from Saarland / Germany
Daniel

// Edit: Maybe it's helpful to mention that the window wont be disabled (or covered by the grey div) when setting the messagebox to modal: true).

linuxguy2001
22 Sep 2011, 7:10 AM
Hi Dan, not sure if you're still looking for a solution for this issue. I ran into the same thing today and looked all over the place for help to no avail. Here's what I finally cam up with, apparently you will experience this issue if your grid uses selModel : new Ext.grid.CellSelectionModel(). So What I did was change my grid selection model to selModel : new Ext.grid.RowSelectionModel() and it now all works fine. It could also be because the listener was setup inside the cellSelectionModel and not the grid itself. Anyway, this is what my code looked like before:


selModel : new Ext.grid.CellSelectionModel({
listeners : {
cellselect : function(sm, row, col) {
if (col == 3) {
Ext.Msg.show({
title: "Delete entry",
msg: "Are you sure you want to delete?",
buttons: Ext.Msg.OKCANCEL,
icon: Ext.MessageBox.INFO,
fn: function(btn, text){
if (btn == 'ok'){
// Do something
}
}
});
}
}
}
})


And this is what it looks like now and it works, notice the listener now is for the grid and not the selectionmodel



Ext.grid.EditorGridPanel({
selModel : new Ext.grid.RowSelectionModel({
listeners : {
cellclick : function(grid, rowIndex, colIndex) {
// Need to have this entry here so the grid editor works.
// There is no need to enter anything else in this listener
// since the column renderer appears to take care of that part.
}
}
}),
listeners : {
cellclick : function(grid, rowIndex, colIndex) {

if (colIndex == 3) {
Ext.Msg.show({
title: "Delete entry",
msg: "Are you sure you want to delete?",
buttons: Ext.Msg.OKCANCEL,
icon: Ext.MessageBox.INFO,
fn: function(btn, text){
if (btn == 'ok'){
// Do something
}
}
});
}
}
},
... more grid configs
});



Hope this makes sense and helps someone else out there.