GXT日期字段不能在模态对话框中工作

Question

我有以下代码片段-

  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());

模式对话框中的GXT日期字段似乎不起作用，没有一个日期是可选择的。另一方面，直接添加到RootPanel的那个似乎工作得很好。

关于如何解决这个问题有什么想法吗?

Answer 1

当使用GWT对话框和日期选择器展开时，GWT对话框会阻止单击事件传播到它。因此，在本例中，可以将GWT对话框模态设置为false以使其工作。虽然我建议使用GXT对话框。另一个选项可能是在显示GXT日期选择器的情况下，在DialogBox中覆盖更多的事件处理。

这将允许字段在GWT中工作:

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

显示两者的小测试用例:

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);
  }
}

Answer 2

这个问题可能是由于混合了GWT Dialog和GXT widget。

尝试使用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();

在EXTJS对话框中也可以正常工作。

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();