java - ContentPanel 中的 GXT 网格弄乱了 BorderLayout

Question

编辑

虽然，多亏了 Colin，网格本身的问题现在已经解决了，但是 BorderLayoutPanel 仍然在一个奇怪的(小)高度上初始化网格，而且中间边框也找不到。

--

我有一个 GWT 应用程序，它有一个 GXT 视口(viewport)，其中包含一个 BorderLayoutContainer，其中又包含另一个 BorderLayoutContainer，如下所示:

现在，如果我用我的网格替换 GXT ContentPanel，效果就很好:

但是，当我实现网格时，我感到非常惊讶:

网格突然使北组件的大小变小，它进一步隐藏在标题下方(北组件已经有 10px 的 margin-top)，以及网格和 TabPanel 之间的线无法再抓取/code> 来调整视口(viewport)大小。此外，人们希望网格在这种情况下显示滚动条。此外，在折叠网格的 ContentPanel 时，中心组件不会继续填充应有的剩余空间。

当我使用 GWT 面板(DockLayoutPanel、SplitLayoutPanel)时，Grid 工作得很好，所以我继续将网格包装在 VerticalPanel(在 GXT ContentPanel 内)。没有发生任何变化。

DocGrid UiBinder

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:with type="com.sencha.gxt.widget.core.client.grid.ColumnModel"
    field="cm"></ui:with>
<ui:with type="com.sencha.gxt.data.shared.ListStore" field="store"></ui:with>

<ui:with type="com.sencha.gxt.widget.core.client.grid.GridView"
    field="view">
    <ui:attributes stripeRows="true" forceFit="true"></ui:attributes>
</ui:with>

<gxt:ContentPanel ui:field="contentPanel" height="100%" width="100%">
    <row:VerticalLayoutContainer borders="false">
        <row:child>
            <grid:Grid ui:field="grid" cm="{cm}" store="{store}" view="{view}"
                loadMask="true" columnReordering="true" borders="false"
                height="500px">
            </grid:Grid>
        </row:child>
        <row:child>
            <toolbar:PagingToolBar pageSize="20" ui:field="toolBar" width="100%"></toolbar:PagingToolBar>
        </row:child>
    </row:VerticalLayoutContainer>
</gxt:ContentPanel>

非常感谢任何帮助或线索。

编辑

根据请求，DocGrid.java

package nl.opensatisfaction.postkamer.client.ui;

import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.List;

import com.google.gwt.cell.client.DateCell;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiFactory;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.IdentityValueProvider;
import com.sencha.gxt.core.client.Style.SelectionMode;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.box.MessageBox;
import com.sencha.gxt.widget.core.client.grid.CheckBoxSelectionModel;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridView;
import com.sencha.gxt.widget.core.client.grid.filters.DateFilter;
import com.sencha.gxt.widget.core.client.grid.filters.GridFilters;
import com.sencha.gxt.widget.core.client.grid.filters.StringFilter;
import com.sencha.gxt.widget.core.client.toolbar.PagingToolBar;

public class DocGrid implements IsWidget {
private static final DocumentNodeProperties props = GWT
        .create(DocumentNodeProperties.class);
AlfrescoServiceAsync metadata = GWT.create(AlfrescoService.class);

interface MyUiBinder extends UiBinder<Widget, DocGrid> {
}

private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

@UiField
ColumnModel<DocumentNode> cm;

@UiField
ListStore<DocumentNode> store;

@UiField
Grid<DocumentNode> grid;

@UiField
GridView<DocumentNode> view;

@UiField
PagingToolBar toolBar;

@UiField
ContentPanel contentPanel;

@Override
public Widget asWidget() {
    IdentityValueProvider<DocumentNode> identity = new IdentityValueProvider<DocumentNode>();
    final CheckBoxSelectionModel<DocumentNode> sm = new CheckBoxSelectionModel<DocumentNode>(identity);
    sm.setSelectionMode(SelectionMode.MULTI);

    ColumnConfig<DocumentNode, String> nameCol = new ColumnConfig<DocumentNode, String>(
            props.nodeRef(), 100, "nodeRef");
    ColumnConfig<DocumentNode, String> documentIdCol = new ColumnConfig<DocumentNode, String>(
            props.documentIdentificatie(), 100, "Document ID");
    ColumnConfig<DocumentNode, Date> ontvangenCol = new ColumnConfig<DocumentNode, Date>(
            props.documentOntvangstdatum(), 100, "Ontvangen");
    ontvangenCol.setCell(new DateCell(OpenPostModule.DATE_FORMAT));
    ColumnConfig<DocumentNode, Date> aanschrijfCol = new ColumnConfig<DocumentNode, Date>(
            props.documentAanschrijfdatum(), 100, "Aangeschreven");
    aanschrijfCol.setCell(new DateCell(OpenPostModule.DATE_FORMAT));
    ColumnConfig<DocumentNode, String> doctypeCol = new ColumnConfig<DocumentNode, String>(
            props.documentTypeOmschrijving(), 100, "Type");
    ColumnConfig<DocumentNode, String> subjectCol = new ColumnConfig<DocumentNode, String>(
            props.afzenderIdentificatie(), 100, "BSN/KVK");
    ColumnConfig<DocumentNode, AlfrescoUser> behandelaarCol = new ColumnConfig<DocumentNode, AlfrescoUser>(
            props.documentBehandelaar(), 100, "Behandelaar"); 
    ColumnConfig<DocumentNode, AlfrescoObject> groepCol = new ColumnConfig<DocumentNode, AlfrescoObject>(
            props.documentGroep(), 100, "Groep");


    List<ColumnConfig<DocumentNode, ?>> l = new ArrayList<ColumnConfig<DocumentNode, ?>>();
    l.add(sm.getColumn());
    l.add(documentIdCol);
    l.add(ontvangenCol);
    l.add(aanschrijfCol);
    l.add(doctypeCol);
    l.add(subjectCol);
    l.add(groepCol);
    l.add(behandelaarCol);

    cm = new ColumnModel<DocumentNode>(l);
    store = new ListStore<DocumentNode>(props.key());

    Widget component = uiBinder.createAndBindUi(this);
    contentPanel.setCollapsible(true);
    contentPanel.setAnimCollapse(true);

    view.setAutoExpandColumn(nameCol);
    grid.setSelectionModel(sm);

    // Column filters
    StringFilter<DocumentNode> nameFilter = new StringFilter<DocumentNode>(props.documentIdentificatie());
    DateFilter<DocumentNode> dateFilter = new DateFilter<DocumentNode>(props.documentOntvangstdatum());
    DateFilter<DocumentNode> dateFilter2 = new DateFilter<DocumentNode>(props.documentAanschrijfdatum());
    StringFilter<DocumentNode> docTypeFilter = new StringFilter<DocumentNode>(props.documentTypeOmschrijving());
    StringFilter<DocumentNode> subjectFilter = new StringFilter<DocumentNode>(props.documentTitel());
    StringFilter<DocumentNode> groepFilter = new StringFilter<DocumentNode>(props.documentGroepLabel());
    StringFilter<DocumentNode> behandelaarFilter = new StringFilter<DocumentNode>(props.documentBehandelaarLabel());

    GridFilters<DocumentNode> filters = new GridFilters<DocumentNode>();
    filters.initPlugin(grid);
    filters.setLocal(true);
    filters.addFilter(nameFilter);
    filters.addFilter(dateFilter);
    filters.addFilter(dateFilter2);
    filters.addFilter(docTypeFilter);
    filters.addFilter(subjectFilter);
    filters.addFilter(groepFilter);
    filters.addFilter(behandelaarFilter);

    return component;
}

@UiFactory
ColumnModel<DocumentNode> createColumnModel() {
    return cm;
}

@UiFactory
ListStore<DocumentNode> createListStore() {
    return store;
}

public void fillGrid(AlfrescoUser user) {
    metadata.getPoststukken(user, new AsyncCallback<ArrayList<DocumentNode>>() {

        @Override
        public void onSuccess(ArrayList<DocumentNode> result) {
            // Sorts DocumentNode by its generatedPriority
            Collections.sort(result);
            store.addAll(result);
            if(result.size()==0) {
                new MessageBox("", "er zijn geen poststukken gevonden.").show();
            }
        }

        @Override
        public void onFailure(Throwable caught) {
            if(caught instanceof CustomException) {
                new MessageBox(((CustomException) caught).getTitle(), caught.getMessage()).show();
                if(caught instanceof CustomException) {
                    // TODO: move logic to PostCenter, then act appropriately
                    new MessageBox("Uitgelogd", "U bent uitgelogd.");
                }
            }
        }
    });
}

public void removeDocument(String documentIdentificatie) {
    for(DocumentNode doc : grid.getStore().getAll()) {
        if(doc.getDocumentIdentificatie().equals(documentIdentificatie)) {
            DebugClient.debug("Removing row with id " + doc.getDocumentIdentificatie(), this.getClass());
            grid.getStore().remove(doc);
            break;
        }
    }
}

public void updateRow(DocumentNode node) {
    DebugClient.debug("Updating row with id " + node.getDocumentIdentificatie(), this.getClass());
    grid.getStore().update(node);
}

}

编辑:BLP UiBinder

这是包含 DocGrid 的 UiBinder 代码。这是直接在 RootPanel 上的一个。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:style>
    .important {
        font-weight: bold;
    }
</ui:style>

<ui:with type="com.sencha.gxt.core.client.util.Margins" field="zeroMargins">
    <ui:attributes top="0" right="0" bottom="0" left="0" />
</ui:with>
<ui:with type="com.sencha.gxt.core.client.util.Margins" field="correctionMargins">
    <ui:attributes top="10" right="0" bottom="0" left="0" />
</ui:with>

<ui:with
    type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
    field="northData">
    <ui:attributes size="35" collapsible="false" split="false"
        margins="{zeroMargins}" />
</ui:with>
<ui:with
    type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
    field="southData">
    <ui:attributes size="20" collapsible="false" split="false"
        margins="{zeroMargins}" />
</ui:with>
<ui:with
    type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
    field="innerWestData">
    <ui:attributes size="600" collapsible="true" split="true"
        margins="{zeroMargins}" />
</ui:with>
<ui:with
    type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
    field="gridContainerData">
    <ui:attributes size="500" collapsible="true" split="true"
        margins="{correctionMargins}" />
</ui:with>


<container:Viewport>
    <container:BorderLayoutContainer
        ui:field="dockPanel">
        <container:north layoutData="{northData}">
            <os:Header ui:field="osHeader" />
        </container:north>

        <container:west layoutData="{innerWestData}">

            <container:BorderLayoutContainer
                ui:field="innerSplitPanel">
                <container:north layoutData="{gridContainerData}">
                    <os:DocGrid ui:field="docGrid" />
                </container:north>
                <container:center>
                    <os:MetaTabPanel ui:field="metaTabs"></os:MetaTabPanel>
                    <!-- <gxt:ContentPanel /> -->
                </container:center>
            </container:BorderLayoutContainer>

            <!-- <g:SplitLayoutPanel ui:field="innerSplitPanel"> <g:north size="500"> 
                <os:DocGrid ui:field="docGrid" /> </g:north> <g:center> <os:MetaTabPanel 
                ui:field="metaTabs" /> </g:center> </g:SplitLayoutPanel> -->

        </container:west>

        <container:center>
            <g:Frame ui:field="viewport" width="100%" height="100%"
                styleName="pdfPanel" />
        </container:center>

        <container:south layoutData="{southData}">
            <container:HtmlLayoutContainer
                ui:field="footer" />
        </container:south>
    </container:BorderLayoutContainer>
</container:Viewport>

</ui:UiBinder>

相关的java是这样的(UiBinder类的构造函数):

    initWidget(uiBinder.createAndBindUi(this));

    osHeader.setMenuLabel(this.user.getLabel());

    docGrid.fillGrid(user);

    // Docgrid selection handler
    docGrid.grid.getSelectionModel().addSelectionChangedHandler(new SelectionChangedHandler<DocumentNode>() {

        @Override
        public void onSelectionChanged(SelectionChangedEvent<DocumentNode> event) {
            List<DocumentNode> selected = event.getSelection();
            if (selected.size()>0) {
                documentSelected(selected.get(0));
            }
        }
    }); 

Answer 1

将布局数据添加到该小部件中 VLC 内的 Grid 和 PagingToolbar。工具栏可能应该设置为 100% 宽度(即 width="1.0")，并仅使用它需要的高度(height="-1")，并且网格应使用所有宽度和所有高度(height="1.0" 和 `width="1.0")。这可能看起来或多或少像这样(来自 http://www.sencha.com/examples/#ExamplePlace:paginguibindergrid )

<ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="middleData">
  <ui:attributes width="1" height="1" />
</ui:with>

<ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="bottomData">
  <ui:attributes width="1" height="-1" />
</ui:with>

<ui:with type="com.sencha.gxt.widget.core.client.grid.GridView" field="view">
  <ui:attributes stripeRows="true" forceFit="true"></ui:attributes>
</ui:with>

<gxt:FramedPanel ui:field="panel" headingText="Grid UiBinder Example" pixelSize="600, 300"
  collapsible="true" addStyleNames="margin-10">
  <row:VerticalLayoutContainer borders="true">
    <row:child layoutData="{middleData}">
      <grid:Grid ui:field="grid" cm="{cm}" store="{store}" view="{view}" loadMask="true" columnReordering="true"
        borders="false">
      </grid:Grid>

    </row:child>
    <row:child layoutData="{bottomData}">
      <toolbar:PagingToolBar pageSize="50" ui:field="toolBar"></toolbar:PagingToolBar>
    </row:child>
  </row:VerticalLayoutContainer>
</gxt:FramedPanel>

同样重要的是，支持该 xml 文件的类能够由其父级调整大小。扩展 ResizeComposite 来获取该通知，或者实现 RequiresResize 并让其调用 ContentPanel 自己的 onResize 函数，或者根本不处理Composite，而只是实现IsWidget，并让asWidget()返回ContentPanel >.

在这种情况下，您的 Java 调整大小接线是正确的。但是，如果多次调用 asWidget()，您最终将生成一个小部件的多个副本 - 确保这始终返回相同的副本，可能通过将其存储在字段中并检查它是否为空(即 createAndBind 尚未尚未被调用)。