UiBinder Grid inside VerticalLayoutContainer

[jtaekema]

I have a grid inside of a ContentPanel which displays a large number of items, The grid scrolls when there are too many items to show on the screen.

<gxt:ContentPanel ui:field="panel" headingText="Passenger Count">
   <grid:Grid ui:field="grid" cm="{cm}" store="{store}" view="{view}" selectionModel="{sm}" borders="false" deferHeight="true" />
 </gxt:ContentPanel>

However when I put the grid inside of a VerticalLayoutContainer the grid looses the scrollbar and instead just cuts off most of the items as well as the paging toolbar which should appear below the grid.

<gxt:ContentPanel ui:field="panel" headingText="heading">
  <container:VerticalLayoutContainer>
    <toolbar:ToolBar>
      <toolbar:FillToolItem />
      <button:TextButton ui:field="myButton" text="a button" />
    </toolbar:ToolBar>
    <grid:Grid ui:field="grid" cm="{cm}" store="{store}" view="{view}" selectionModel="{sm}" borders="false" deferHeight="true" />
    <toolbar:PagingToolBar ui:field="pagingToolBar" pageSize="100" />
  </container:VerticalLayoutContainer>
</gxt:ContentPanel>

I inspect the html generated and although the bottom paging tool bar exists, I can't see it displayed on the page.

I redid the same thing in code without the UiBinder and the grid had a scroll bar like expected. I have experimented with adding <container:child layoutData={data}> and setting deferHeight="true" but I can't seem to figure this out.

[jtaekema]

In the code version with no layout data: no scroll bar on the grid.
In the code version with VerticalLayoutData(1, 1): scroll bar appears on the grid
In the UiBinder version with no layout data: no scroll bar on the grid
In the UiBinder version with the following layout data: no scroll bar on the grid

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"><ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
    xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
    xmlns:grid="urn:import:com.sencha.gxt.widget.core.client.grid"
    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">


    <ui:with type="com.sencha.gxt.widget.core.client.grid.ColumnModel" field="cm" />
    <ui:with type="com.sencha.gxt.data.shared.ListStore" field="store" />


    <ui:with type="com.sencha.gxt.widget.core.client.grid.GridSelectionModel" field="sm" />
    <ui:with type="com.sencha.gxt.widget.core.client.grid.GridView" field="view">
        <ui:attributes stripeRows="true" autoFill="true" />
    </ui:with>
    
    <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="layoutData">
        <ui:attributes width="1" height="1" />
    </ui:with>


    <gxt:ContentPanel ui:field="root" headingText="Counts">
        <container:VerticalLayoutContainer>
            <container:child>
                <toolbar:ToolBar>
                    <toolbar:FillToolItem />
                    <button:TextButton ui:field="button" text="Button" />
                </toolbar:ToolBar>
            </container:child>
            <container:child layoutData="{layoutData}">
                <grid:Grid ui:field="grid" cm="{cm}" store="{store}" view="{view}" selectionModel="{sm}" borders="false" />
            </container:child>
            <container:child>
                <toolbar:PagingToolBar ui:field="pagingToolBar" pageSize="100" />
            </container:child>
        </container:VerticalLayoutContainer>
    </gxt:ContentPanel>


</ui:UiBinder>

I can't seem to get a scroll bar on the grid...

[phickey]

Hi have the same problem using GXT 3.0.1

Please let us know what the correct method to get the UiBinder working is.

Thanks
Patrick

[branflake2267]

These guides could help you get the configuration you would like:

http://docs.sencha.com/gxt-guides/3/ - home
http://docs.sencha.com/gxt-guides/3/...ontainers.html
http://docs.sencha.com/gxt-guides/3/...s/Layouts.html
http://docs.sencha.com/gxt-guides/3/...Container.html

This has a simple grid configuration with UiBinder example.
http://docs.sencha.com/gxt-guides/3/...grid/Grid.html

Brandon

[Colin Alworth]

Layout data is indeed required - a Grid doesn't make sense without a height being assigned (and 100% is assigning a width), but the default in this case is to ask the child how much space it needs. The values 1.0,1.0 (meaning width=100%, height=100%) makes sense in this case, but the question then becomes this: what is sizing the parent? The VLC is being added to a ContentPanel - that ContentPanel must either be sized or be added to something which sizes it (BorderLayoutContainer, HLC, Viewport are all possible options, among others).

You explained that you built this in two ways, once with UiBinder and one without. Are there any other differences between the two? Inheritance, the parent of the ContentPanel, what you add the entire panel to could all make a difference here, so any discrepencies in how your tests are wired up could make a difference.

Without a full test case, I haven't tried your samples, but here is a sample that *does* work, with VLC and a Grid in UiBinder:
http://www.sencha.com/examples/#Exam...nguibindergrid

[phickey]

Hi Colin,

I have included an example project in post 964371

Example

Please download this example to see what is happening with the grid.

Regards
Patrick