second Modal window opens behind first Modal window

[ortizjose]

I am trying to customize a calender entry form. I am starting from the code in this thread.

http://forums.smartclient.com/showthread.php?t=4900&highlight=ExtendedCalendar

I can pop the calendar in a new window and I am trying to popup another window to enter the event information. The problem I have is the second form window appears in the back of the calendar.

I have try to set the zIndex, make them modal dialogs but nothing seems to work.

Does somebody have any idea why the second window is always behind?

Thanks

[Isomorphic]

What version are you using? There was an issue similar to this that was fixed last year.

[ortizjose]

I am using:
Smart GWT 3.0

I also trying to set the zIndex like here:
http://forums.smartclient.com/showthread.php?t=12222
and sendToFront/sendToBack functions but that didn't work either.

[ortizjose]

How is the default event add window created? When I use the default the add window shows on top of the calendar. Is that from one of the javascript files?

[ortizjose]

I found that this only happens when I click in the calendar to add a new entry. When I click in the + icon from the tool bar it opens the window on top of the calendar. I am basically running the class ExtendedCalendar in this thread. The code being called from both events is exactly the same. See below:

Any suggestions?

// overrides the eventDialogWindow show method
Function function = new Function()
{
public void execute()
{
JavaScriptObject eventDialog = JSOHelper.getAttributeAsJavaScriptObject( getOrCreateJsObj(), "eventDialog" );
if ( JSOHelper.getAttributeAsJavaScriptObject( eventDialog, "event" ) == null ) // trying to edit, not add
{
CalendarEventAdd eventAdd = getNewEventAdd( null );
handler.onEventAdd( eventAdd );
if ( !eventAdd.isCancelled() )
{
ActivityWindow aw = new ActivityWindow(thisCalendar);
aw.setStartTime(eventAdd.getStartTime());
aw.setEndTime(eventAdd.getEndTime());
aw.show();
}
else
{
clearCalendarSelection();
}
}
}
};

[pghosh]

Still happening in v5.0p
FF:26

public class Main7 implements EntryPoint {

	public static class EditEventDialog extends Dialog{
		private static int tid = 100;
		public EditEventDialog(final Calendar calendar, final CalendarEvent event, final boolean isNew){
			setTitle("Edit Event");
			setHeight(175);
			setIsModal(true);
			addItem(new VLayout(4){{
				final DynamicForm form = new DynamicForm(){{
					setFields(new TimeItem("startDate", "Start Time"),
							new TimeItem("endDate", "End Time"),
							new TextItem("name", "Label"));
					editRecord(event);
				}};
				addMember(form);
				addMember(new HLayout(4){{
					setAlign(Alignment.RIGHT);
					addMember(new Button("Save"){{
						addClickHandler(new ClickHandler() {
							@Override
							public void onClick(ClickEvent event0) {
								Record record = form.getValuesAsRecord();
								Date startDate = record.getAttributeAsDate("startDate");
								Date endDate = record.getAttributeAsDate("endDate");
								String name = record.getAttribute("name");
								if(isNew){
									calendar.addEvent(startDate, endDate, name, name);
								}else{
									event.setStartDate(startDate);
									event.setEndDate(endDate);
									event.setName(name);
									event.setDescription(name);
								}
								close();
							}
						});
					}});
					addMember(new Button("Cancel"){{
						addClickHandler(new ClickHandler() {
							@Override
							public void onClick(ClickEvent event) {
								close();
							}
						});
					}});
				}});
			}});
		}
	}
	@Override
	public void onModuleLoad() {
		new Window(){{
			setWidth(600);
			setHeight(400);
			setIsModal(true);
			addItem(new Calendar(){{
				final Calendar _this = this;
				setAttribute("showAddEventButton", false, true);
				setEventDialogCustomizer(new EventDialogCustomizer() {
					@Override
					public boolean showEventDialog(CalendarEvent event, Boolean isNew) {
						new EditEventDialog(_this, event, isNew).show();
						return false;
					}
				});
			}});
		}}.show();
	}
}

[Isomorphic]

The problem here is that we always bring a modal window to the front on a mouseDown event, and in this usage, the mouseDown on the Calendar, which launches the event editing dialog, bubbles up to the modal parent window and causes it to be brought to the front (obscuring the new event editing dialog).

A couple of quick workarounds come to mind - the simplest is probably to add a 'mouseUp' handler to the parent window to suppress the standard bring to front behavior in this case:

    .... // Other code from the sample
    ....
	public void onModuleLoad() {
		new Window(){{
			
			addMouseUpHandler(new MouseUpHandler() {
				
				@Override
				public void onMouseUp(MouseUpEvent event) {
					Canvas[] items = getItems();
					if (items.length > 0 && items[0].contains((Canvas)event.getSource(), true)) {
						event.cancel();
					}
				}
			});

    .... // Other code from the sample
    ....

Meanwhile we're looking at how best to avoid this gotcha in the future.

Regards
Isomorphic Software

[pghosh]

Thanks. I'll implement that.

[Isomorphic]

Having looked at your code, the proper fix here is just to ensure that you add the custom editor dialog as a child of the Calendar.

setEventDialogCustomizer(new EventDialogCustomizer() {
    @Override
    public boolean showEventDialog(CalendarEvent event, Boolean isNew) {
        EditEventDialog dialog = new EditEventDialog(_this, event, isNew);
        _this.addChild(dialog);
        dialog.show();
        return false;
    }
});

[pghosh]

Thanks. I'll make the appropriate changes.

However, I get the following error message and the edit dialog is not modal.

[ERROR] [admit] - 13:27:24.871:MUP6:WARN:Window:isc_EditCalendarWindow_EditEventDialog_6:Window specified with 'isModal' set to true, but this window has a parentElement. Only top level Windows can be shown modally.