0

編集

Colin のおかげで、Grid 自体の問題は修正されましたが、BorderLayoutPanelまだ奇妙な (小さい) 高さでグリッドが初期化され、中央の境界線がどこにも見つかりません。

--

次のように、別の BorderLayoutContainer を含む BorderLayoutContainer を含む GXT ビューポートを持つ GWT アプリケーションがあります。 ページ構造のスケッチ

Grid を GXT に置き換えると、これは正常に機能しますContentPanel。 Grid の代わりに ContentPanel を使用する

しかし、グリッドを実装すると、不愉快な驚きを覚えます。

グリッドは私のコーディングを承認しません

グリッドによって、北コンポーネントのサイズが突然小さくなり、ヘッダーの下にさらに隠れて (北コンポーネントには既に 10px のマージントップがあります)、グリッドとグリッドの間の線をTabPanelつかんでサイズを変更できなくなります。ビューポート。また、このシナリオでは、グリッドにスクロールバーが表示されることが予想されます。また、Grid の ContentPanel を折りたたむときに、中央のコンポーネントが残りのスペースを埋めようとしません。

GridGWT パネル ( DockLayoutPanel、 ) を使用したときは問題なく機能していたので、グリッドを( GXT 内で)SplitLayoutPanelラップすることに進みました。変化はありませんでした。VerticalPanelContentPanel

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

1 に答える 1

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を呼び出すか、まったく処理せずに を実装して を返すかのいずれかです。ContentPanelonResizeCompositeIsWidgetasWidget()ContentPanel

この場合、Java のサイズ変更ワイヤリングが正しいことになります。ただし、asWidget() が複数回呼び出されると、ウィジェットの複数のコピーが生成されることになります。おそらく、フィールドに保存して null かどうかをチェックすることにより、常に同じものを返すようにしてください (つまり、createAndBind がまだ呼ばれていません）。

于 2013-03-07T23:13:11.003 に答える