GXT Grid in ContentPanel messes up BorderLayout

Question

EDIT

Although, thanks to Colin, the problems with the Grid itself are now fixed, the BorderLayoutPanel still initializes the grid on a strange (small) height and the middle border is nowhere to be found.

--

I have a GWT application that has a GXT viewport, containing a BorderLayoutContainer containing another BorderLayoutContainer, like so: Page structure sketch

Now this works fine if I substitute my Grid for a GXT ContentPanel: working with ContentPanel instead of Grid

However, I am unpleasantly surprised when I implement the Grid:

The grid disapproves of my coding

The grid suddenly brings the size of the North component back to something smaller, it hides further under the header (the north component already has a margin-top of 10px), and the line between the grid and TabPanel can no longer be grabbed to resize the viewports. Also, one'd expect the grid to show scrollbars in this scenario. Also, on collapsing the Grid's ContentPanel, the center component doesn't proceed to fill up the leftover space as it should.

The Grid worked fine back when I used GWT panels (DockLayoutPanel, SplitLayoutPanel), so I proceeded to wrap the grid in a VerticalPanel (within a GXT ContentPanel). No changes ensued.

DocGrid UiBinder

Any help or clues are greatly appreciated.

EDIT

by request, 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 {
}

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

@UiField
ColumnModel cm;

@UiField
ListStore store;

@UiField
Grid grid;

@UiField
GridView view;

@UiField
PagingToolBar toolBar;

@UiField
ContentPanel contentPanel;

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

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


    List> l = new ArrayList>();
    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(l);
    store = new ListStore(props.key());

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

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

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

    GridFilters filters = new GridFilters();
    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 createColumnModel() {
    return cm;
}

@UiFactory
ListStore createListStore() {
    return store;
}

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

        @Override
        public void onSuccess(ArrayList 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);
}

}

EDIT: BLP UiBinder

This is the UiBinder code that includes the DocGrid. This is the one directly on the RootPanel.


    .important {
        font-weight: bold;
    }

The relevant java is as such (constructor of the UiBinder's class):

    initWidget(uiBinder.createAndBindUi(this));

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

    docGrid.fillGrid(user);

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

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

GXT Grid in ContentPanel messes up BorderLayout

Answers (1)

Related Questions