Hi Guys,

I have created a page that contains 2 grids. The problem is that the grids do not take the complete space in the layout. I have included the UiBinder files and the onModuleLoad method as well as a screen shot.

Is there a correct way to get the grids to use the complete screen real-estate, it seams very straight forward problem, so I am not sure why it is so un-intuitive to program?

Screen Shot 2013-04-02 at 5.22.40 PM.jpg

================= OnModuleLoad
public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.add(new DatasetAdministration());
viewport.setEnableScroll(true);
RootLayoutPanel.get().add(viewport);
}

======================DatasetAdministation
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:client='urn:import:com.sencha.gxt.widget.core.client'
xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
xmlns:control='urn:import:com.firecracker.hotelsfa.client.system.dataset.screen'>


<!-- Create the messages interface for i18n !-->
<ui:with type="com.firecracker.hotelsfa.client.system.dataset.screen.DatasetAdministrationMessages"
field="messages"/>


<!-- Create the dataset administration service !-->
<ui:with type="com.firecracker.hotelsfa.client.system.dataset.DatasetAdminServiceAsync"
field="datasetAdminServiceAsync"/>


<!-- Create the user administration tab item config !-->
<ui:with type="com.sencha.gxt.widget.core.client.TabItemConfig" field="userAdministrationTabItemConfig">
<ui:attributes text="{messages.userAdministrationLabel}" enabled="true"/>
</ui:with>


<!-- Create the region administration tab item config !-->
<ui:with type="com.sencha.gxt.widget.core.client.TabItemConfig" field="regionAdministrationTabItemConfig">
<ui:attributes text="{messages.regionAdministrationLabel}" enabled="true"/>
</ui:with>


<!-- Create the location administration tab item config !-->
<ui:with type="com.sencha.gxt.widget.core.client.TabItemConfig" field="locationAdministrationTabItemConfig">
<ui:attributes text="{messages.locationAdministrationLabel}" enabled="true"/>
</ui:with>


<!-- Create the horizontal container layout data !-->
<ui:with type="com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData"
field="horizontalLayoutData">
<ui:attributes width="1" height="1"/>
</ui:with>


<!-- Create the vertical container layout data !-->
<ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"
field="verticalLayoutData">
<ui:attributes width="1" height="1"/>
</ui:with>


<!-- Create the widget !-->
<container:HorizontalLayoutContainer>
<container:child layoutData="{horizontalLayoutData}">
<controlatasetGrid datasetAdminServiceAsync="{datasetAdminServiceAsync}" ui:field="datasetGrid"/>
</container:child>
<container:child layoutData="{horizontalLayoutData}">
<container:VerticalLayoutContainer>
<container:child layoutData="{verticalLayoutData}">
<controlatasetDetails ui:field="datasetDetails"/>
</container:child>
<container:child layoutData="{verticalLayoutData}">
<client:PlainTabPanel>
<client:child config="{userAdministrationTabItemConfig}">
<control:UserAdministration datasetAdminServiceAsync="{datasetAdminServiceAsync}"
ui:field="userAdministration"/>
</client:child>
<client:child config="{regionAdministrationTabItemConfig}">
<control:RegionAdministration datasetAdminServiceAsync="{datasetAdminServiceAsync}"
ui:field="regionAdministration"/>
</client:child>
<client:child config="{locationAdministrationTabItemConfig}">
<control:LocationAdministration datasetAdminServiceAsync="{datasetAdminServiceAsync}"
ui:field="locationAdministration"/>
</client:child>
</client:PlainTabPanel>
</container:child>
</container:VerticalLayoutContainer>
</container:child>
</container:HorizontalLayoutContainer>
</ui:UiBinder>


============================DatasetDetails
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:client='urn:import:com.sencha.gxt.widget.core.client'
xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
xmlns:field='urn:import:com.sencha.gxt.widget.core.client.form'>


<!-- Create the messages interface for i18n !-->
<ui:with type="com.firecracker.hotelsfa.client.system.dataset.screen.DatasetDetailsMessages" field="messages"/>


<!-- Create the number properties editor !-->
<ui:with type="com.sencha.gxt.widget.core.client.form.NumberPropertyEditor" field="datasetIdPropertyEditor"/>


<!-- Create the widget !-->
<client:FramedPanel headingText="{messages.datasetProperties}">
<container:VerticalLayoutContainer>
<container:child>
<field:FieldLabel text="{messages.datasetIdLabel}">
<field:widget>
<field:NumberField editor="{datasetIdPropertyEditor}" readOnly="true"
emptyText="{messages.datasetIdLabel}..." ui:field="datasetId"/>
</field:widget>
</field:FieldLabel>
</container:child>
<container:child>
<field:FieldLabel text="{messages.datasetNameLabel}">
<field:widget>
<field:TextField emptyText="{messages.datasetNameLabel}..." ui:field="datasetName"/>
</field:widget>
</field:FieldLabel>
</container:child>
<container:child>
<field:FieldLabel text="{messages.validUntilLabel}">
<field:widget>
<fieldateField emptyText="{messages.validUntilLabel}..." ui:field="validUntil"/>
</field:widget>
</field:FieldLabel>
</container:child>
</container:VerticalLayoutContainer>
</client:FramedPanel>
</ui:UiBinder>




================================DatasetGrid
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
xmlns:toolbar='urn:import:com.sencha.gxt.widget.core.client.toolbar'
xmlns:button='urn:import:com.sencha.gxt.widget.core.client.button'
xmlns:grid='urn:import:com.sencha.gxt.widget.core.client.grid'>


<!-- Create the messages interface for i18n !-->
<ui:with type="com.firecracker.hotelsfa.client.system.dataset.screen.DatasetGridMessages" field="messages"/>


<!-- Create the dataset store for the grid !-->
<ui:with type="com.sencha.gxt.data.shared.ListStore" field="datasetStore"/>


<!-- Create the column model !-->
<ui:with type="com.sencha.gxt.widget.core.client.grid.ColumnModel" field="columnModel"/>


<!-- Create the grid view !-->
<ui:with type="com.sencha.gxt.widget.core.client.grid.GridView" field="gridView">
<ui:attributes stripeRows="true" columnLines="true"/>
</ui:with>


<!-- Create the container layout data !-->
<ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"
field="verticalLayoutData">
<ui:attributes width="1" height="1"/>
</ui:with>


<!-- Create the widget !-->
<container:VerticalLayoutContainer>
<container:child>
<toolbar:ToolBar>
<button:TextButton text="{messages.createDatasetAction}" ui:field="createDatasetButton"/>
<button:TextButton text="{messages.deleteDatasetAction}" ui:field="deleteDatasetButton"/>
</toolbar:ToolBar>
</container:child>
<container:child layoutData="{verticalLayoutData}">
<grid:Grid store="{datasetStore}" cm="{columnModel}" view="{gridView}" ui:field="datasetGrid"/>
</container:child>
</container:VerticalLayoutContainer>
</ui:UiBinder>







==============================LocationAdministration
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
xmlns:toolbar='urn:import:com.sencha.gxt.widget.core.client.toolbar'
xmlns:button='urn:import:com.sencha.gxt.widget.core.client.button'>


<!-- Create the widget !-->
<container:VerticalLayoutContainer>
<container:child>
<toolbar:ToolBar>
<button:TextButton>Create</button:TextButton>
<button:TextButton>Delete</button:TextButton>
</toolbar:ToolBar>
</container:child>
</container:VerticalLayoutContainer>
</ui:UiBinder>





=============================RegionAdministration
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
xmlns:toolbar='urn:import:com.sencha.gxt.widget.core.client.toolbar'
xmlns:button='urn:import:com.sencha.gxt.widget.core.client.button'>


<!-- Create the widget !-->
<container:VerticalLayoutContainer>
<container:child>
<toolbar:ToolBar>
<button:TextButton>Create</button:TextButton>
<button:TextButton>Delete</button:TextButton>
</toolbar:ToolBar>
</container:child>
</container:VerticalLayoutContainer>
</ui:UiBinder>






==========================UserAdministration
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
xmlns:toolbar='urn:import:com.sencha.gxt.widget.core.client.toolbar'
xmlns:button='urn:import:com.sencha.gxt.widget.core.client.button'
xmlns:grid='urn:import:com.sencha.gxt.widget.core.client.grid'>


<!-- Create the messages interface for i18n !-->
<ui:with type="com.firecracker.hotelsfa.client.system.dataset.screen.UserAdministrationMessages" field="messages"/>


<!-- Create the dataset store for the grid !-->
<ui:with type="com.sencha.gxt.data.shared.ListStore" field="userStore"/>


<!-- Create the column model !-->
<ui:with type="com.sencha.gxt.widget.core.client.grid.ColumnModel" field="columnModel"/>


<!-- Create the grid view !-->
<ui:with type="com.sencha.gxt.widget.core.client.grid.GridView" field="gridView">
<ui:attributes stripeRows="true" columnLines="true"/>
</ui:with>


<!-- Create the container layout data !-->
<ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"
field="verticalLayoutData">
<ui:attributes width="1" height="1"/>
</ui:with>


<!-- Create the widget !-->
<container:VerticalLayoutContainer>
<container:child>
<toolbar:ToolBar>
<button:TextButton text="{messages.createUserAction}" ui:field="createUserButton"/>
<button:TextButton text="{messages.deleteUserAction}" ui:field="deleteUserButton"/>
</toolbar:ToolBar>
</container:child>
<container:child layoutData="{verticalLayoutData}">
<grid:Grid store="{userStore}" cm="{columnModel}" view="{gridView}" ui:field="userGrid"/>
</container:child>
</container:VerticalLayoutContainer>
</ui:UiBinder>