网格启动后如何启动GridX列宽重新计算？ [英] How to launch GridX column width recalculation after the grid has been started up?

问题描述

根据文档：

https://github.com/oria/gridx/wiki/Create-the-Simplest-Gridx

永远不要忘记调用grid.startup（），因为列宽度
计算和布局渲染需要访问网格DOM节点的几何
信息。

Never forget to call grid.startup(), since the column width calculation and layout rendering need to access the geometry information of grid DOM nodes.

如果我的网格有列，没有指定宽度，而 autoWidth 设置为 false ， startup（）计算列的大小，以便水平填充整个视口。但是，如果视口扩展，并且在最后一列之后插入额外的空白空间。如果视口缩小，最后一列不再可见（并且没有滚动显示）。

If I have the grid with columns, that have no width specified, and autoWidth is set to false, startup() calculates the size of columns so, that they fill the whole viewport horizontally. However, if viewport is expanded, and extra empty space is inserted after the last column. If the viewport is narrowed, the last columns are not more visible (and no scroll is rendered).

所以我认为最好的解决方法是启动重新计算列大小手动调整视口大小后。但是我找不到一个API方法来实现。

So I think the best workaround is to launch the recalculation of columns sizes manually, after the viewport was resized. But I can't find an API method to do that.

如何在现有网格上调用列宽重新计算和布局渲染？

How to call column width recalculation and layout rendering on existing grid?

推荐答案

我为这种情况所做的工作是设置一个事件处理程序来监视窗口大小事件，然后将宽度设置为当前网格宽度。创建网格时：

What I've done for this situation is setup an event handler to watch for window resize events, then set the width to the current grid width. When creating the grid:

function _resizeToWindow(grid, gridId) {
  grid.resize({w: dom.byId(gridId).offsetWidth, h: undefined});
}

on(window, "resize", function() {
  _resizeToWindow(grid, gridId);
});

将网格调整到当前网格宽度看起来有点奇怪，但是调用该函数将导致再次渲染网格，并为新网格宽度使用适当的列宽。

It looks a little odd to resize the grid to the current width of the grid, but calling that function will cause the grid to be rendered again with appropriate column widths for the new grid width.

这篇关于网格启动后如何启动GridX列宽重新计算？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！