GWT DataGrid 不可见（UIBinder 和 LazyPanel）

Question

我正在构建一个 GWT 应用程序。

在这个应用程序中，我有许多显示从服务器检索的数据的 DataGrid 实现。在一个面板中，我有一个 TabLayoutPanel，每个选项卡上都有一个 DataGrid。

我正在尝试在父选项卡可见时延迟加载 DataGrid。

这里是 ui.xml：

<g:TabLayoutPanel width="800px" height="450px" barUnit='EM' barHeight='3'>
<g:tab>
  <g:header size='7'><b>Volunteer Assignments</b></g:header>
  <grid:VolunteerAssignmentGrid/>
</g:tab>
<g:tab>
  <g:header size='7'><b>Volunteer Details</b></g:header>
  <g:LazyPanel ui:field="lazyDetails">
    <grid:VolunteerFieldsGrid/>       
  </g:LazyPanel>
</g:tab>
</g:TabLayoutPanel>

在上述代码中，VolunteerAssignmentGrid 和 VolunteerFieldsGrid 是 DataGrid 的子类。

VolunteerAssignmentGrid 立即可见，数据显示正常。

但是，下一个选项卡上的 VolunteerFieldsGrid 根本不显示。

奇怪的是，它在正确的时间（当我单击另一个选项卡时）请求数据，并且服务器响应是正确的。就好像桌子不可见一样。

知道为什么第二个 DataGrid 不可见吗？

编辑：

UiBinder 类：

public class VolunteerDetailsPanel extends DialogBox {

interface Binder extends UiBinder<Widget, VolunteerDetailsPanel> {}
private static final Binder binder = GWT.create(Binder.class);

@UiField LazyPanel lazyDetails;
private Record volunteerRecord;
private String fullName;
private String volunteerId;

public VolunteerDetailsPanel(Record record) {
    this.volunteerRecord = record;
    fullName = volunteerRecord.getValue("forename")+" "+volunteerRecord.getValue("surname");
    volunteerId = volunteerRecord.getValue("id");
    setText(fullName);
}

public void initComponent() {
    setWidget(binder.createAndBindUi(this));
}

@UiFactory VolunteerAssignmentGrid createAssignmentGrid() {
    return new VolunteerAssignmentGrid(volunteerId, fullName);
}

@UiFactory VolunteerFieldsGrid createFieldsGrid() {
    return new VolunteerFieldsGrid(volunteerId);
}


}

根据要求，还有 VolunteerFieldsGrid 类。它扩展了 ListGrid（我的一个，但是太长了在这里发布，我所有其他的 Grid 都扩展了它并且没问题），这反过来又扩展了 GWT 的 DataGrid：

public class VolunteerFieldsGrid extends ListGrid {

public VolunteerFieldsGrid(String volunteerId) {

    super(100, "name", false);
    setWidth("100%");

    ListGridColumn<?>[] columns = new ListGridColumn<?>[] {
        new FieldNameColumn("Field", "name").width(75),
        new TextColumn("Value", "value").width(300)
    };
    setColumns(columns);

    ListGridDataProvider data = ListGridDataProvider.getInstance("field",
            "/volunteer/"+volunteerId, "name", false);

    setDataProvider(data);
}

}

Answer 1

您必须在TabLayoutPanel 中为SelectionEvent 注册一个处理程序，该处理程序将调用LazyPanel.setVisible(true)。在 UiBinder 中尝试这样的事情：

@UiHandler("yourTabPanelUiField")
void onSelectionEvent(SelectionEvent event) {
  //for extra functionality check if EventTarget equals the correct tab
  lazyDetails.setVisible(true);
}