ContentPanel中的GXT网格混乱了BorderLayout

时间：2013-03-07 22:53:18

标签： java gwt gxt uibinder docklayoutpanel

修改

虽然感谢Colin，网格本身的问题现在已经修复，BorderLayoutPanel仍然在一个奇怪的（小）高度上初始化网格，中间边界无处可寻。

-

我有一个GWT应用程序，它有一个GXT视口，包含一个包含另一个BorderLayoutContainer的BorderLayoutContainer，如下所示： Page structure sketch

现在，如果我将网格替换为GXT ContentPanel，这可以正常工作： working with ContentPanel instead of Grid

然而，当我实现Grid时，我感到非常惊讶：

The grid disapproves of my coding

网格突然将North组件的大小恢复到更小的值，它隐藏在标题下面（北部组件已经有10px的边距顶部），以及网格和TabPanel之间的线不能再抓住来调整视口大小。此外，人们希望网格在这种情况下显示滚动条。此外，在折叠Grid的ContentPanel时，中心组件不会按原样填充剩余空间。

当我使用GWT面板（Grid，DockLayoutPanel）时SplitLayoutPanel工作正常，所以我继续将网格包裹在VerticalPanel中（在GXT内{ {1}}）。随后没有变化。

DocGrid UiBinder 

ContentPanel

<!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

}

编辑：BLP UiBinder

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

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


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

相关的java就是这样（UiBinder类的构造函数）：

<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>

1 个答案:

答案 0 :(得分：1)

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

height="1.0"

支持该xml文件的类能够由其父级调整大小也很重要。可以延长<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> 以获取该通知或实施ResizeComposite并将该调用设置为RequiresResize自己的ContentPanel函数，或者不处理onResize全部，但只需实施Composite，并IsWidget返回asWidget()。

在这种情况下，您可以正确调整Java调整大小。但是，如果多次调用asWidget（），您将最终生成窗口小部件的多个副本 - 确保它总是返回相同的窗口，可能是将它存储在字段中并检查它是否为空（即createAndBind没有被称为。）

相关问题
最新问题