6

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.

enrybo
  • 1,787
  • 1
  • 12
  • 20
Cuga
  • 17,668
  • 31
  • 111
  • 166

5 Answers5

7

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.

Καrτhικ
  • 3,833
  • 2
  • 29
  • 42
5

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);
Dreanaught
  • 51
  • 1
  • 1
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);
Vinny Carpenter
  • 565
  • 7
  • 13
  • This will also ensure that your columns "fill" the grid (or shrink if needed) when resizing the window, or when minimizing the grid area, for instance when it is part of a viewport. Thank you :-) +1 – Tom Teman Nov 01 '11 at 10:12
0

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

cupakob

cupakob
  • 8,411
  • 24
  • 67
  • 76
  • I tried your suggestion, but it makes no difference. It still shows up as nothing unless the integer width/height values are provided, even if I specify setStyle("width: 100%"), and if I specify both, it still only shows up as the integer widths specified. – Cuga Oct 13 '10 at 15:02
  • setStyle("width: 100%") will not work, here you must specify a style name from the stylesheet...for example: setStyle("myGridWidth") and "myGridWidth" is defined in your *.css as follow: .myGridWidth { width: 100% } – cupakob Oct 13 '10 at 17:22
-1

May be it's too late for now, but I tried to set grid's autoHeight and autoWidth properties to false, combining it with setting autoExpandColumn (I didn't need to change default autoFill's value).

grid.setAutoHeight(false);
grid.setAutoWidth(false);
bkg
  • 19
  • 4