编辑
尽管多亏了 Colin,Grid 本身的问题现在已经解决,但BorderLayoutPanel
仍然在一个奇怪的(小)高度上初始化了网格,并且找不到中间边界。
--
我有一个 GWT 应用程序,它有一个 GXT 视口,其中包含一个 BorderLayoutContainer,其中包含另一个 BorderLayoutContainer,如下所示:
现在,如果我将 Grid 替换为 GXT ,这将正常工作ContentPanel
:
但是,当我实现 Grid 时,我感到非常惊讶:
网格突然将 North 组件的大小变小了,它隐藏在标题下方(北方组件已经有 10px 的 margin-top),并且网格之间的线TabPanel
不能再被抓取来调整大小视口。此外,人们希望网格在这种情况下显示滚动条。此外,在折叠 Grid 的 ContentPanel 时,中心组件不会按照应有的方式填充剩余空间。
当我使用 GWT 面板 ( , )Grid
时效果很好,所以我继续将网格包装在 a (在 GXT 内)。没有发生任何变化。DockLayoutPanel
SplitLayoutPanel
VerticalPanel
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));
}
}
});