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?

Thanks

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

Hi Cuga,

you can try to style the grid/columns with css (setStyle/setColumnStyleName) and then you can use 100% as width.

cupakob

Answer 2

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);