How to let a GXT grid take up all available width?

Question

I have a grid in GXT, something like this:

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
ColumnConfig config = new ColumnConfig();
config.setId("type");
config.setHeader("Type");
config.setWidth(50);
configs.add(config);
config = new ColumnConfig();
config.setId("text");
config.setHeader("Info");
config.setWidth(75);
configs.add(config);

columnModel = new ColumnModel(configs);
listStore = new ListStore<DtoModel>();

grid = new Grid<DtoModel>(listStore, columnModel);
grid.setAutoHeight(true);
grid.setAutoWidth(true);

VerticalPanel verticalPanel = new VerticalPanel();
verticalPanel.setLayout(new FillLayout());
verticalPanel.add(grid);

This creates the grid just fine with one exception-- the width is limited to the sum of the column widths. When I forgo the column widths, the grid ends up having 0 width.

Is there a way to have this grid and its columns expand to fill the entire area available to it?

Edit: One of the difficulties is the ColumnConfig.setWidth() method only takes an int as a parameter, so I can't specify "100%" as a string or something like that.

Answer 1

This is the way to do it:

grid.getView().setAutoFill(true);

Here is a key point to remember: With setAutoFill() when you resize a column, gxt will always resize all other columns so that the grid continues to fit the container. Without autoFill, if you just use the autoExpand column, if you resize one column, the grid could grow bigger (or smaller) than the containing component and in such a case you have to manually resize the grid to fit - which is not only a pain, it is almost impossible for the end user in most cases.

Answer 2

There is a function in GridView that forces all columns to fit to the availiable space. It is like setting a flex of 1 to every column.

grid.getView().setForceFit(true);

Answer 3

The GXT Grid has a method named setAutoExpandColumn() that will take id of the column that you want to take up all available space in your grid. I would remove the setAutoHeight and setAutoWidth from the grid.

I am not sure if you are trying to achieve a fixed width layout or flexible layout that will expand based on the height/width of the browser. Here's what I typically do as I want my grids to take up all of the height and width and scroll on the page. Hope this helps.

--Vinny

    Viewport viewport = new Viewport();
    viewport.setLayout(new BorderLayout());

    ContentPanel center = new ContentPanel();
    center.setFrame(false);
    center.setLayout(new FitLayout());
    center.add(grid);