Layout/Grid problem

[sven]

LayoutContainer lc = new LayoutContainer();
lc.setLayout(new FlowLayout());
lc.add(new Text("hi there how are you"));
lc.add(new Text("oh i'm just dandy"));
cp.setSize(600,400);
lc.add(cp);
v.add(lc, new MarginData(20));

[n0thing]

That doesn't work in hosted mode, IE, or FF (e.g. no scrollbars appear when the window size is reduced). Also, recall that the issue here is that the grid should automatically resize to fill the available space on the screen. Providing a static size is not a valid solution. Did I misunderstand?

[sven]

You could always listen for resize events and resize the grid as you need it.

Also default scrollmode is no scrollbars. So, everything that happens, happens as excepted.

I suggest you to buy some support subscription (http://extjs.com/store/gxt/#support-table).

[sven]

Also have you read the javadocs about FlowLayout? How can you expect, that something resizes?

[n0thing]

Why should it matter that it is a FlowLayout? Scrollbars don't appear because GXT is explicitly setting overflow to hidden on elements that it generates. No one is asking GXT to resize anything...we just want it not to chop things off the screen for users running a low resolution.

[sven]

You have to set the correct scrollmode of you want scrollbars on that container. The the javadocs for setScrollMode.

And it metters. The javadocs clearly say that FlowLayout isnt resizing it children. So why you are expecting some resizing?

[n0thing]

Again, I don't want things to be resized...I just want them to be visible. If that requires a scrollbar, then that's fine.

Let's see if we can get the example we've been using to work. The requirement is that the grid should take the available space on the screen (a la FitLayout) AND if the window size is reduced such that the stuff on the screen is not visible a scrollbar shall appear. Here's the snippet that ALMOST works:

LayoutContainer lc = new LayoutContainer();
        lc.setLayout(new BorderLayout());
        LayoutContainer northContainer = new LayoutContainer();
        Button btn = new Button("a reaaaaaally huge button with lots of text because btn.setWidth does nothing...blah blah blah...be bigger than the grid below....");
        btn.setWidth("800px");
        northContainer.add(btn);
        lc.add(northContainer, new BorderLayoutData(Style.LayoutRegion.NORTH, 30));
        lc.add(cp, new BorderLayoutData(Style.LayoutRegion.CENTER));
        v.add(lc, new MarginData(20));
        v.setScrollMode(Scroll.AUTO);

The grid is properly handled here, but now the button gets chopped!

[sven]

Again, I don't want things to be resized...I just want them to be visible. If that requires a scrollbar, then that's fine.

Let's see if we can get the example we've been using to work. The requirement is that the grid should take the available space on the screen (a la FitLayout) AND if the window size is reduced such that the stuff on the screen is not visible a scrollbar shall appear

Well, so if i start my browser with 100 x 100 you want the grid to be 100 x 100. Now i maximize the window and the grid
should not be resized, but scrollbars should be visible if needed (yes i know they are not needed in this example). Bad application design or?

=> I am working on a maximized window with a 100 x 100 grid.

[n0thing]

Here's a full code sample that demonstrates what I'm trying to do. You'll see that the grid behaves properly, but the area above the grid does not. The red area with a border could contain anything...textfields, buttons, checkboxes, whatever. When the window size is reduced stuff in this area gets chopped and becomes useless. How can we avoid this?

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Html;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.MarginData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class TestWidget implements EntryPoint {
    
    public void onModuleLoad() {
        Viewport v = new Viewport();
        v.setLayout(new FitLayout());
        ContentPanel cp = new ContentPanel(new FitLayout());
        cp.setHeading("Grid Test");
        cp.setFrame(true);

        List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

        ColumnConfig column = new ColumnConfig();
        column.setId("make");
        column.setHeader("Make");
        column.setWidth(100);
        configs.add(column);

        column = new ColumnConfig();
        column.setId("model");
        column.setHeader("Model");
        column.setWidth(300);
        configs.add(column);

        column = new ColumnConfig();
        column.setId("year");
        column.setHeader("Year");
        column.setAlignment(HorizontalAlignment.RIGHT);
        column.setWidth(75);
        configs.add(column);

        ListStore<CarModel> store = new ListStore<CarModel>();
        store.add(new CarModel("Honda","CRV",2002));
        store.add(new CarModel("Mazda","MX5",2006));
        store.add(new CarModel("SAAB","9000",1993));
        store.add(new CarModel("BMW","2002",1973));

        ColumnModel cm = new ColumnModel(configs);
        
        Grid<CarModel> grid = new Grid<CarModel>(store, cm);
        cp.add(grid);

        LayoutContainer lc = new LayoutContainer();
        lc.setLayout(new BorderLayout());
        Html html = new Html("<div style=\"width: 800px; height: 50px; background-color: red; border: 3px solid black\"></div>");
        lc.add(html, new BorderLayoutData(Style.LayoutRegion.NORTH, 30));
        lc.add(cp, new BorderLayoutData(Style.LayoutRegion.CENTER));
        v.add(lc, new MarginData(20));
        v.setScrollMode(Scroll.AUTO);

        RootPanel.get().add(v);
      }

      public class CarModel extends BaseModel implements
          Serializable {

        private static final long serialVersionUID = 3758482745348423852L;

        public CarModel() {

        }

        public CarModel(String make, String model,
            Integer year) {

          set("make", make);
          set("model", model);
          set("year", year);

        }

        public Integer getYear() {
          return (Integer) get("car_year");
        }

        public String getMake() {
          return (String) get("car_make");

        }

        public String getModel() {
          return (String) get("car_model");
        }
      }
        
}

[sven]

Html html = new Html("<div style=\"overflow: scroll;\"><div style=\"width: 800px; height: 50px; background-color: red; border: 3px solid black\"></div></div>");

Also you dont have to set a scrollmode on the viewport. It has a FitLayout and will never ever have scrollbars