如何让 GXT 网格占据所有可用宽度？
我在 GXT 中有一个网格，如下所示：
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);
这可以很好地创建网格，但有一个例外 - 宽度限制为列宽度的总和。当我放弃列宽时，网格最终宽度为 0。
有没有办法让这个网格及其列扩展以填充其可用的整个区域？
编辑：困难之一是 ColumnConfig.setWidth() 方法仅采用 int 作为参数，因此我无法指定“ 100%”作为字符串或类似的东西。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这是执行此操作的方法：
这是要记住的关键点：使用 setAutoFill() 调整列大小时，gxt 将始终调整所有其他列的大小，以便网格继续适合容器。如果没有自动填充，如果您只使用自动扩展列，如果您调整一列的大小，网格可能会变得比包含组件更大（或更小），在这种情况下，您必须手动调整网格大小以适应 - 这不仅仅是一个痛苦，在大多数情况下，这对于最终用户来说几乎是不可能的。
This is the way to do it:
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.
GridView 中有一个函数可以强制所有列适合可用空间。这就像将每列的 flex 值设置为 1 一样。
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.
GXT 网格有一个名为 setAutoExpandColumn() 的方法，它将获取您想要占用网格中所有可用空间的列的 ID。我将从网格中删除 setAutoHeight 和 setAutoWidth 。
我不确定您是否正在尝试实现固定宽度布局或将根据浏览器的高度/宽度扩展的灵活布局。这是我通常做的事情，因为我希望我的网格占据所有的高度和宽度并在页面上滚动。希望这有帮助。
——维尼
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
您可以尝试使用 css (setStyle/setColumnStyleName) 设置网格/列的样式，然后可以使用 100% 作为宽度。
库帕科布
you can try to style the grid/columns with css (setStyle/setColumnStyleName) and then you can use 100% as width.
cupakob
可能现在已经太晚了，但我尝试将网格的 autoHeight 和 autoWidth 属性设置为 false，将其与设置 autoExpandColumn 结合起来（我不需要更改默认的 autoFill 值）。
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).