GXT DateField not working inside a modal DialogBox

Question

I have the following code snippet -

  Button testButton = new Button("Test");

  testButton.addClickHandler(new ClickHandler() {

     @Override
     public void onClick(ClickEvent event) {
        final DialogBox box = new DialogBox();
        box.setText("Test");
        box.add(new DateField());
        box.setGlassEnabled(true);
        Scheduler.get().scheduleDeferred(new ScheduledCommand() {

           @Override
           public void execute() {
              box.show();
           }
        });

     }
  });
  RootPanel.get().add(testButton);
  RootPanel.get().add(new DateField());

The GXT DateField inside the modal DialogBox doesn't seem to work and none of the dates are selectable. On the other hand, the one added directly to RootPanel seems to works fine.

Any ideas on how to work around this?

Braj · Answer 1 · 2014-06-12T09:19:12.533

The issue might be due to mixing GWT Dialog with GXT widget.

Try this sample code that works with Sencha Dialog

Dialog d = new Dialog();
d.setHeadingText("Enter Date");
d.setWidget(new DateField());
d.setPixelSize(300, 100);
d.setHideOnButtonClick(true);
d.setPredefinedButtons(PredefinedButton.YES, PredefinedButton.NO,
        PredefinedButton.CANCEL);
d.show();

Works fine with EXTJS Dialog as well.

Dialog d = new Dialog();
d.setTitle("Enter Date");
d.add(new DateField());
d.setPixelSize(300, 100);
d.setHideOnButtonClick(true);
d.setButtons(Dialog.YESNOCANCEL);
d.show();

score 1 · Accepted Answer · answered Jun 12 '14 at 12:46

When using the GWT dialog and the date picker expand, the GWT dialog is preventing the click events from propagating to it. So in this case the GWT dialog modal can be set to false to get it to work. Although I would suggest using the GXT DialogBox. Another option might be to override the event handling a bit more in DialogBox in the case the GXT Date picker is displayed.

This will allow the field to work in GWT:

final DialogBox box = new DialogBox(false, false);

Small test case to show both:

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.widget.core.client.Dialog;
import com.sencha.gxt.widget.core.client.form.DateField;

public class DialogWithDateField {

  public DialogWithDateField() {
    RootPanel.get().add(new DateField()); 

    testGwtDialog();
    testGxtDialog();
  }

  private void testGwtDialog() {
    Button testButton = new Button("Test Gwt Dialog");
    testButton.addClickHandler(new ClickHandler() {
      @Override
      public void onClick(ClickEvent event) {
        final DateField field = new DateField();

        final DialogBox box = new DialogBox(false, false);
        box.setText("Test");
        box.add(field);
        box.setGlassEnabled(true);
        box.show();
      }
    });
    RootPanel.get().add(testButton);
  }

  private void testGxtDialog() {
    Button testButton = new Button("Test Gxt Dialog");
    testButton.addClickHandler(new ClickHandler() {
      @Override
      public void onClick(ClickEvent event) {
        DateField field = new DateField();

        final Dialog box = new Dialog();
        box.setHeadingText("Test");
        box.add(field);
        box.setModal(true);
        box.show();
      }
    });
    RootPanel.get().add(testButton);
  }

}

GXT DateField not working inside a modal DialogBox

2 Answers2