PDA

View Full Version : Ext Messagebox appearing behind modal window



Zolcsi
17 Mar 2011, 8:06 AM
Hi,

recently I found some strange behaviour which I can't figure out.
I've opened a modal window, and then I tried to show a confirmation dialog using Ext.Msg.confirm()
But the confirm window was behind the main window, obivously it was a problem with z-indexes somehow. I don't use any special WindowMgr-s, only the main one and only one instance.
I was able to work around the problem, but it's not really a good solution:



beforePanelClose: function(panel)
{
var msgWin = Ext.Msg.confirm('Delete', 'Are you sure?', function(btn) {
if(btn == 'yes')
{
panel.close();
}
}, this);
Ext.WindowMgr.register(msgWin);
Ext.WindowMgr.bringToFront(msgWin);
return false;
}

If I remove the two lines starting with Ext.WindowMgr, then it won't work.
But this "solution" raises two errors in the console:



ext-all-debug.js:28159 TypeError: Result of expression 'win.on' [undefined] is not a function.
ext-all-debug.js:28114 TypeError: Result of expression 'win.setZIndex' [undefined] is not a function.


I'm guessing it's because the MessageBox is not a child of the Ext.Window class.

So my question is this: Do you have any idea about what's causing this?

Thanks!

fay
17 Mar 2011, 8:24 AM
Have you tried it with msgWin.getDialog() - which refers to the 'underlying' window - when registering/bringingToFront?

Zolcsi
17 Mar 2011, 8:32 AM
Using the getDialog() the errors are gone, but the messagebox will stay under the dialog. I'm thinking maybe the messagebox was correctly registered with the windomanager upon creation, that's why the getDialog won't make any difference, because maybe the windowmanager notices, that this window is already registered with me, why register it again.

Zolcsi
19 Mar 2011, 1:37 AM
I've started debugging the problem, and here's what I got so far:
The original modal window is "ext-comp-1190" and the new window which should appear above it is "winNewPartnerContact".
I put some debug lines in Ext.Window's setZIndex method, so this is what it looks like now:


setZIndex : function(index){
console.debug('z-index: '+index);
console.debug('id: '+this.id);
console.trace();
if(this.modal){
this.mask.setStyle('z-index', index);
}
this.el.setZIndex(++index);
index += 5;

if(this.resizer){
this.resizer.proxy.setStyle('z-index', ++index);
}

this.lastZIndex = index;
},

After clicking the button that triggers the opening of the new window, this is what happens:


z-index: 9000
id: ext-comp-1190
console.trace()
Ext.Window.Ext.extend.setZIndex
orderWindows
bringToFront
Ext.Window.Ext.extend.toFront
Ext.Window.Ext.extend.afterShow
Ext.Window.Ext.extend.show
Ext.extend.beforePanelClose <- This is where I trigger the showing of the new window
EXTUTIL.Event.fire
EXTUTIL.Observable.fireEvent
Ext.TabPanel.Ext.extend.onStripMouseDown
h

z-index: 9010
id: winNewPartnerContact
console.trace()
Ext.Window.Ext.extend.setZIndex
orderWindows
bringToFront
Ext.Window.Ext.extend.toFront
Ext.Window.Ext.extend.afterShow
Ext.Window.Ext.extend.show
Ext.extend.beforePanelClose <- This is where I trigger the showing of the new window
EXTUTIL.Event.fire
EXTUTIL.Observable.fireEvent
Ext.TabPanel.Ext.extend.onStripMouseDown
h

z-index: 9000
id: winNewPartnerContact
console.trace()
Ext.Window.Ext.extend.setZIndex
orderWindows
bringToFront
Ext.Window.Ext.extend.toFront
h

z-index: 9010
id: ext-comp-1190
console.trace()
Ext.Window.Ext.extend.setZIndex
orderWindows
bringToFront
Ext.Window.Ext.extend.toFront
h


So, it seems to me, that at first everyhting is fine, ext-comp-1190 has a lower z-index than winNewPartnerContact, but after that Ext.Window.toFront screws up something and the two windows switch places.
This is what I've got so far, I'll continue to investigate, but if anybody has an idea about what is going on... :)

Zolcsi
19 Mar 2011, 1:44 AM
Whoaa, nailed it :)
So, as it turns out, the second toFront was called because it was listening to an event.
In Ext.Window.initEvents there is this line of code:


this.mon(this.el, 'mousedown', this.toFront, this);

So when I click on the close button of a tab (this was the event that triggered the opening of the new window) this event will also fire, thus bringing the old window to the front.
I am not yet sure on how to solve this, but at least I figured out the problem.

[Daniel]
19 Mar 2011, 2:23 AM
Thank you very much! I just had the same problem yesterday and found your topic on Google, but I didn't notice the date and didn't know that this topic was from the day before yesterday.

Now, that we know where the problem comes from, it should be possible to solve it. Let me put the hamster into his wheel to power my brain...

[Daniel]
19 Mar 2011, 3:10 AM
After some research, I've found two solutions to fix the problem.
1. Listen to the messagebox' element's DOMAttrModified event - Window.toFront() will set the zindex which causes a call to this event. Unfortunately, I've found no proper possibility to check whether the messagebox is on the front or not. So, this is not a very efficient solution.

2. Set a timer to bring the messagebox to the front after some time.

I'm missing an event here, kind of senttoback which we could catch to bring it to the front again..

Please let us know if you find a more proper solution.

Zolcsi
19 Mar 2011, 3:12 AM
Well, unfortunately I couldn't find any better solution, as a matter of fact I ended up with exactly the same solution as your second point.

Akrion
26 Jul 2011, 12:24 PM
Hi, not sure if this helps in your case but I had a similar issue with Sencha Touch Ext.Msg and i resolved is with a css and Ext.Msg.show

HERE (http://www.sencha.com/forum/showthread.php?141752-Ext.Msg.config-shows-behind-popup-(Sheet)-window&p=630063#post630063)