Grid in VerticalLayoutContainer doesn't resize like rest of children in container

[nbuesing]

If I place a grid in a VerticalLayoutContainer, it does not resize like the other children in the VerticalLayoutContainer. The screenshot is after resizing the window and the first child resizes, while the grid doesn't. A patch to the GridExample is provided to demonstrate this defect.grid_not_resizing.jpg

### Eclipse Workspace Patch 1.0#P Ext GWTIndex: com.sencha.gxt.examples/src/main/java/com/sencha/gxt/explorer/client/grid/GridExample.java===================================================================--- com.sencha.gxt.examples/src/main/java/com/sencha/gxt/explorer/client/grid/GridExample.java	(revision 2109)+++ com.sencha.gxt.examples/src/main/java/com/sencha/gxt/explorer/client/grid/GridExample.java	(working copy)@@ -13,6 +13,7 @@ import com.google.gwt.i18n.client.DateTimeFormat; import com.google.gwt.i18n.client.NumberFormat; import com.google.gwt.safehtml.shared.SafeHtmlBuilder;+import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.IsWidget; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.Widget;@@ -29,6 +30,7 @@ import com.sencha.gxt.state.client.GridStateHandler; import com.sencha.gxt.state.client.StateManager; import com.sencha.gxt.widget.core.client.ContentPanel;+import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer; import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer; import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData; import com.sencha.gxt.widget.core.client.form.SimpleComboBox;@@ -133,7 +135,24 @@     // content) that are setup in the change GridCellRenderer     new QuickTip(grid);     -    return cp;+    +//Resizing of Grid doesn't work as expected.    +    BorderLayoutContainer b = new BorderLayoutContainer();+    VerticalLayoutContainer v = new VerticalLayoutContainer();+    ContentPanel panel = new ContentPanel();+    panel.setHeadingText("HEADER");+    panel.add(new HTML("first child of view layout container, header resizes as expected."));+    v.add(panel);+    v.add(cp);+    b.add(v);+    +    //Resizing of Grid works as expected, but scrollbar is cropped.    +//    BorderLayoutContainer b = new BorderLayoutContainer();+//    SimpleContainer sc = new SimpleContainer();+//    b.setCenterWidget(sc);+//    sc.add(cp);+    +    return b;   }    @Override

[sven]

You cannot simple replace some inner container and hope that something magically works. The parent containers never resize their childrens. Do do that, you need to set fit to true on the annotation.

[nbuesing]

You cannot simple replace some inner container and hope that something magically works. The parent containers never resize their childrens. Do do that, you need to set fit to true on the annotation.

I changed the annotation and that did not fix this issue

@Detail(fit=true, name = "Basic Grid", icon = "basicgrid", category = "Grid", classes = Stock.class)

It did, however, fix the other issue I reported (with the cropped scrollbar).

Thanks.

[sven]

There are more issues in your layout code. Attached is a proper solution:

Index: src/main/java/com/sencha/gxt/explorer/client/grid/GridExample.java===================================================================
--- src/main/java/com/sencha/gxt/explorer/client/grid/GridExample.java	(revision 2113)
+++ src/main/java/com/sencha/gxt/explorer/client/grid/GridExample.java	(working copy)
@@ -13,11 +13,13 @@
 import com.google.gwt.i18n.client.DateTimeFormat;
 import com.google.gwt.i18n.client.NumberFormat;
 import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
+import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.IsWidget;
 import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.sencha.gxt.cell.core.client.form.ComboBoxCell.TriggerAction;
 import com.sencha.gxt.core.client.GXT;
+import com.sencha.gxt.core.client.util.Margins;
 import com.sencha.gxt.data.shared.ListStore;
 import com.sencha.gxt.data.shared.StringLabelProvider;
 import com.sencha.gxt.examples.resources.client.TestData;
@@ -29,6 +31,7 @@
 import com.sencha.gxt.state.client.GridStateHandler;
 import com.sencha.gxt.state.client.StateManager;
 import com.sencha.gxt.widget.core.client.ContentPanel;
+import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
 import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
 import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
 import com.sencha.gxt.widget.core.client.form.SimpleComboBox;
@@ -41,7 +44,7 @@
 import com.sencha.gxt.widget.core.client.toolbar.LabelToolItem;
 import com.sencha.gxt.widget.core.client.toolbar.ToolBar;
 
-@Detail(name = "Basic Grid", icon = "basicgrid", category = "Grid", classes = Stock.class)
+@Detail(name = "Basic Grid", icon = "basicgrid", fit = true, category = "Grid", classes = Stock.class)
 public class GridExample implements IsWidget, EntryPoint {
 
   private static final StockProperties props = GWT.create(StockProperties.class);
@@ -49,11 +52,11 @@
   @Override
   public Widget asWidget() {
     final NumberFormat number = NumberFormat.getFormat("0.00");
-    
+
     ColumnConfig<Stock, String> nameCol = new ColumnConfig<Stock, String>(props.name(), 200, "Company");
     ColumnConfig<Stock, String> symbolCol = new ColumnConfig<Stock, String>(props.symbol(), 100, "Symbol");
     ColumnConfig<Stock, Double> lastCol = new ColumnConfig<Stock, Double>(props.last(), 75, "Last");
-    
+
     ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
     changeCol.setCell(new AbstractCell<Double>() {
 
@@ -64,8 +67,7 @@
         sb.appendHtmlConstant("<span " + style + " qtitle='Change' qtip='" + v + "'>" + v + "</span>");
       }
     });
-    
-    
+
     ColumnConfig<Stock, Date> lastTransCol = new ColumnConfig<Stock, Date>(props.lastTrans(), 100, "Last Updated");
     lastTransCol.setCell(new DateCell(DateTimeFormat.getFormat("MM/dd/yyyy")));
 
@@ -84,8 +86,7 @@
     cp.setHeadingText("Basic Grid");
     cp.getHeader().setIcon(ExampleImages.INSTANCE.table());
     cp.setPixelSize(600, 300);
-    cp.addStyleName("margin-10");
-    
+
     final Grid<Stock> grid = new Grid<Stock>(store, cm);
     grid.getView().setAutoExpandColumn(nameCol);
     grid.setBorders(false);
@@ -94,13 +95,13 @@
     grid.setColumnReordering(true);
     grid.setStateful(true);
     grid.setStateId("gridExample");
-    
+
     GridStateHandler<Stock> state = new GridStateHandler<Stock>(grid);
     state.loadState();
-    
+
     ToolBar toolBar = new ToolBar();
     toolBar.add(new LabelToolItem("Selection Mode: "));
-    
+
     SimpleComboBox<String> type = new SimpleComboBox<String>(new StringLabelProvider<String>());
     type.setTriggerAction(TriggerAction.ALL);
     type.setEditable(false);
@@ -122,18 +123,33 @@
       }
     });
     toolBar.add(type);
-    
+
     VerticalLayoutContainer con = new VerticalLayoutContainer();
     cp.setWidget(con);
-    
+
     con.add(toolBar, new VerticalLayoutData(1, -1));
     con.add(grid, new VerticalLayoutData(1, 1));
-    
-    // needed to enable quicktips (qtitle for the heading and qtip for the
-    // content) that are setup in the change GridCellRenderer
+
     new QuickTip(grid);
-    
-    return cp;
+
+    // Resizing of Grid doesn't work as expected.
+    BorderLayoutContainer b = new BorderLayoutContainer();
+    VerticalLayoutContainer v = new VerticalLayoutContainer();
+    ContentPanel panel = new ContentPanel();
+    panel.setHeadingText("HEADER");
+    panel.add(new HTML("first child of view layout container, header resizes as expected."));
+    v.add(panel, new VerticalLayoutData(1, -1));
+    v.add(cp, new VerticalLayoutData(1, 1, new Margins(10)));
+    b.add(v);
+
+    // Resizing of Grid works as expected, but scrollbar is cropped.
+    // BorderLayoutContainer b = new BorderLayoutContainer();
+    // SimpleContainer sc = new SimpleContainer();
+    // b.setCenterWidget(sc);
+    // sc.add(cp);
+
+    return b;
+
   }
 
   @Override

[nbuesing]

Thanks, I had tried VerticalLayoutData to no luck earlier, but not w/out the fit=true on the annotation, so I'm guessing that is why it didn't work (or I was using the wrong values).

Two questions:

1) Is there documentation on VerticalLayoutData? What does -1 vs 1 do? I thought a value > 0 was absolute and < 0 was to fill/fit to whatever the container would allow you to do.

2. Now for these examples, I you do the fit=true in the annotation? What does that exactly do?

Thanks again for your help.

[robferguson]

Hi,

I have had some luck with nested layout containers.

For example, a view (MVP) with a VerticalPanel and a ToolBar and Gird:

-> http://gwt-cx.com/extgwt-serendipity....html#Accounts

    // add the Tool Bar, and the Grid to the View's layout container
    getPanel().add(getToolBar(), new VerticalLayoutData(1, -1));
    getPanel().add(getGrid(), new VerticalLayoutData(1, 1));

and a view (MVP) with a VerticalPanel and a Gird:

    // add the Grid to the View's layout container
    getPanel().add(getGrid(), new VerticalLayoutData(1, 1));

You can browse the source:

-> http://code.google.com/p/gwt-cx/source/browse/

Cheers
Rob

http://code.google.com/p/gwt-cx/

[nbuesing]

I am trying to understand the "fit to true" on the annotation. When looking at the Details annotation, it talks about the FitLayout, which doesn't exist. In looking at older code, it looks like FitLayout was in GXT 2, but is not in GXT3.

In my attempt to look at the code more, I cannot find where the parent layout changes based on this annotation.

the only part I see it used in the example generator

protected void writeExample(SourceWriter sw, String bundleName, ExampleDetailModel example) {
sw.println("icon = %1$s.%2$s();", bundleName, example.getIconMethodName());


// TODO escape name
sw.println("e = new Example(\"%1$s\", icon, new %2$s(), %3$b);", example.getName(),
example.getExampleType().getQualifiedSourceName(), example.usesFitLayout());


/**
* Whether or not to use a FitLayout when drawing the example. Defaults to
* false.
*/
boolean fit() default false;

[sven]

In my attempt to look at the code more, I cannot find where the parent layout changes based on this annotation.

Its in the Page class.