PDA

View Full Version : Toolbar menus hidden in BasicDialog



griffiti93
2 Apr 2007, 10:27 PM
If this bug has already been posted, ignore this post. I searched the FAQs, Beta 1 changelog, and forums but could not find anything similar.

I have a BasicDialog that contains a toolbar. Some of my toolbar buttons have drop down menus. Most of the time (3 out of 5 times) the drop down menus render perfectly. However, occasionally they will render behind the BasicDialog. Pulling up Firebug and inspecting the DOM, it appears that element.style overrides the .x-menu z-index value of 15000 with a lesser amount. Even so, it works sometimes and other times, the menu is rendered behind the BasicDialog.

I have a included a screenshot showing the menu behind the BasicDialog, as well as the inspection with Firebug.

http://www.objectworx.com/images/extexamples/hidden_menus.png

jack.slocum
3 Apr 2007, 11:04 AM
Try making this setting:

Ext.DialogManager.zseed = 9000;

If it works (and it should) I will commit it.

griffiti93
3 Apr 2007, 12:37 PM
Thanks Jack. It worked beautifully!

http://www.objectworx.com/images/extexamples/dialog_menus_fixed.png

griffiti93
3 Apr 2007, 1:39 PM
Ok, it's not working again. I updated the JavaScript for the DialogManager. I also updated the .x-dlg in the CSS. It will work the first time. However, for my BasicDialog, if a user clicks save but nothing has changed, I throw up an Ext.MessageBox.alert(). After doing that, the menus start hiding behind the dialog.

Any ideas?

jack.slocum
3 Apr 2007, 5:07 PM
If you open up Menu.js and the line where it initializes the Layer (in render), add a config value:

zindex:15000

let me know if that works.

griffiti93
3 Apr 2007, 7:44 PM
I added the zindex: 15000 in the config literal for the Layer constructor for Menu.js, ext-all.js, and ext-all-debug.js. It still behaves the same. The menu will render, unless I do something that pulls up a MessageBox.alert() dialog. Then the menu hides behind the BasicDialog. :(

griffiti93
3 Apr 2007, 8:10 PM
The constructor sets the Layer initially. After the MessageBox.alert() fires, could I reset the Layer zindex from the menu click? Of course it would be a hack, but get things working for me?

griffiti93
4 Apr 2007, 7:43 AM
Well that idea didn't work. :(

I tried dropping the zindex for the modal CSS. I figure it has something to do with it:

.x-dlg-mask{
z-index:9000;

That didn't help either.

griffiti93
4 Apr 2007, 8:27 AM
I've stepped through Ext.Button.onclick() all the way to showAt() and back again. :) I can't find where and how the message box is messing it up.

griffiti93
5 Apr 2007, 10:50 AM
I've set the alert() call to modal:false but it still affects the visibility of the button drop down menu. :(

griffiti93
5 Apr 2007, 11:46 AM
I figured out the conflict. I'm using Animal's menubar code (which is awesome :) ) for the north region in my layout. If I comment it out, everything works pefectly. I can run MessageBox.alert() calls, and then still pull down the menus just fine.

Screenshot calling the alert():
http://www.objectworx.com/images/extexamples/dialog_menus_minus_menubar_alert.png

Screenshot of menus showing properly just after alert():
http://www.objectworx.com/images/extexamples/dialog_menus_minus_menubar.png

Now if I could just figure out exactly what is conflicting? :-?