apache-flex - 在包含可变行高的 Spark 数据网格上设置正确的高度

Question

将 mx:AdvanceDataGrid 转换为 s:DataGrid 时，我的可变行高导致 DataGrid 的高度计算不正确。我试图在不使用滚动条的情况下显示所有行。

该图像显示的高度不正确(最后一行被截断):

当行大小增加(例如为了适应自动换行)时，会出现此问题，导致该行与典型项目的大小不同。当我的项目使用 mx:AdvanceDataGrid 时，我们通过使用此处概述的measureHeightOfItems() 方法解决了这个问题 https://stackoverflow.com/a/1889005使用此代码:

private function calculateTableHeight():void
{
    var tableHeightPixelHack:Number = 30;
    var numRows:Number = dataGrid.dataProvider != null ? dataGrid.dataProvider.length : 0;
    tableHeight = dataGrid.measureHeightOfItems(-1, numRows) + tableHeightPixelHack;
}

我的问题是，如何在 s:DataGrid 中获得与在 mx:AdvanceDataGrid 上使用measureHeightOfItems 方法相同的结果？

s:DataGrid组件

<s:DataGrid id="dataGrid"
            width="100%"
            columns="{hostComponent.columns}"
            dataProvider="{hostComponent.data}"
            selectionMode="singleRow"
            sortableColumns="false"
            styleName="goalsDataGrid"
            variableRowHeight="true"
            verticalScrollPolicy="off"
            horizontalScrollPolicy="off"
            doubleClickEnabled="true"
/>

自定义项目渲染器(通过代码分配)

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer   xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      focusEnabled="true">

    <s:Rect top="0" bottom="0" right="0" left="0" z="-1"> 
        <s:fill> 
            <s:SolidColor color="{data.rowColor}"/> 
        </s:fill> 
    </s:Rect>
    <s:Label id="lblData"
             styleName="tableRow"
             text="{label}"
             width="100%"
             height="100%"
             maxDisplayedLines="-1"
             lineBreak="toFit" />        
</s:GridItemRenderer>

Answer 1

在 DataGrid 中设置verticalScrollPolicy="auto"