Question

我有一个现代的ExtJS 6.2.0应用程序。有一个9列的网格。

是否有一种方法可以自动调整列的大小，使其足够宽以显示完整的单元格内容？还是在具有很多列的移动设备上使用网格时的最佳实践是什么？

Answer 1

现代工具包没有列autoSize函数。这是使用渲染功能和HTML5 canvas的一种方法，虽然不理想，但可以使用

{{1}}

Answer 2

为此使用flex，您可以将其与宽度结合起来

flex: <number>

使用flex时，网格的总像素减去任何定义的列宽的总和除以所有flex数量的总和。然后，使用flex将这个数字乘以每列的flex数字。

这是rathet har所要掌握的，所以举个例子：

xtype: 'gridpanel',
width: 500,
columns: [{
    dataindex: 'id',
    width: 125
},{
    dataindex: 'username',
    width: 75
},{
    dataindex: 'lastname',
    flex: 1
},{
    dataindex: 'firstname',
    flex: 2
}]

此处总栅格宽度为500。前两列的定义宽度之和为200像素，重命名的像素剩下300像素。 flex值的总和为3（1 + 2），因此：300/3 = 100。因此，第三列的宽度为（flex）1 * 100 = 100像素，而最后一个是（flex）2 * 100 = 200像素。

如果网格的大小增长到800像素，则后两个的宽度分别为200和400像素。

Answer 3

可以通过在所有网格上添加.x-gridcell-body-el来自动完成网格上9列的大小。这将使每个网格的所有列均具有均匀的宽度。如果您希望某些列比其他列显示更多，可以将flex值更改为更高的数字，例如2或3。如果您不希望在文本溢出时显示椭圆，并且希望查看全文，您可以将一个类添加到网格并将sap.ui.getCore().attachInit(function () { sap.ui.require(["sap/ui/core/ComponentContainer"], function (ComponentContainer) { new ComponentContainer({ name: "yourProject", async: true, manifest: true, height: "100%" }).placeAt("content"); }); });设置为没有空格。

这里是Sencha小提琴，可以帮助您了解flex的工作原理。

https://fiddle.sencha.com/#view/editor&fiddle/2rro

ExtJS Modern-自动调整网格列的大小

3 个答案: