Question

我正在尝试创建一个垂直调整大小的数据网格，以确保所有渲染器都完整显示。此外，

渲染器的高度可变
渲染者可以调整自己的大小

一般来说，事件的流程如下：

其中一个项目渲染器调整自身大小（通常是响应用户点击等）
它调度父数据网格拾取的冒泡事件
DataGrid尝试调整大小以确保所有渲染器保持完整可见。

我目前正在数据网格中使用此代码来计算高度：

height = measureHeightOfItems(0, dataProvider.length ) + headerHeight;

这看起来高度不正确。我尝试了很多变种，包括callLater（确保调整大小已经完成，因此度量可以正常工作），并覆盖meausre（）并调用invalidateSize（）/ validateSize（），但都不起作用。

下面是3个类，它们将说明问题。单击项目渲染器中的按钮可以调整渲染器的大小。网格也应该扩展，以便全部显示所有3个渲染器。

任何建议都将不胜感激。

此致

玛蒂

DataGridProblem.mxml（应用程序文件）

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    xmlns:view="view.*">
    <mx:ArrayCollection id="dataProvider">
        <mx:String>Item A</mx:String>
        <mx:String>Item B</mx:String>
        <mx:String>Item C</mx:String>
    </mx:ArrayCollection>
    <view:TestDataGrid
        id="dg" 
        dataProvider="{ dataProvider }"
        width="400">
        <view:columns>
            <mx:DataGridColumn dataField="text" />
            <mx:DataGridColumn itemRenderer="view.RendererButton" />
        </view:columns>
    </view:TestDataGrid>
</mx:Application>

view.TestDataGrid.as

package view
{
    import flash.events.Event;

    import mx.controls.DataGrid;
    import mx.core.ScrollPolicy;

    public class TestDataGrid extends DataGrid
    {
        public function TestDataGrid()
        {
            this.verticalScrollPolicy = ScrollPolicy.OFF;
            this.variableRowHeight = true;
            this.addEventListener( RendererButton.RENDERER_RESIZE , onRendererResize );
        }
        private function onRendererResize( event : Event ) : void
        {
            resizeDatagrid();
        }
        private function resizeDatagrid():void
        {
            height = measureHeightOfItems(0, dataProvider.length ) + headerHeight;
        }
    }
}

view.RendererButton.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Button width="50" height="50"
        click="onClick()" />

    <mx:Script>
        <![CDATA[

            public static const RENDERER_RESIZE : String = "resizeRenderer";
            private function onClick() : void
            {
                this.height += 20;
                dispatchEvent( new Event( RENDERER_RESIZE , true ) );
            }
        ]]>
    </mx:Script>
</mx:HBox>

Answer 1

您可以使用以下代码使用AdvancedDataGrid实现此目标。如果删除this.headerHeight，它也适用于List，这使我相信它应该适用于常规的旧DataGrid。

  override protected function measure():void
  {
   super.measure();

   if ( this.dataProvider )
   {
    var newHeight : int = measureHeightOfItems( 0, this.dataProvider.length ) + this.headerHeight;

    this.minHeight = newHeight;
    this.height = newHeight;
   }
  }

Answer 2

要在运行时重新调整数据网格的大小....使用rowcount属性并将其与dataprovider长度绑定。随着数据提供者的更新，所以行数也是如此您可以在flex here

中查看如何使用rowcount的示例

Answer 3

要做一些事情，例如可变宽度和高度的单元格/行/列，以及其他“高级”功能 - 尝试扩展AdvancedDataGrid而不是更旧，更无聊的DataGrid

Answer 4

对于它的价值，我从未设法解决这个问题。代码很快就被处理边缘案件所困扰。

我最终抛弃了dataGrid方法，并使用VBox＆amp; amp;编写了一个解决方案。 HBox便于调整大小。

Answer 5

它的价值;你应该使用datagrid / advanced datagrid的variableRowHeight =“true”属性。

如果它让你感觉更好我创建了自定义VBox，HBox解决方案然后发现它已经完成!! （卡!!）

祝你好运！

Answer 6

您的方法存在潜在问题。 ItemRenderers旨在以一致的方式呈现数据项，如果您抛出当前渲染器并创建一个新渲染器并设置新渲染器的data属性，它应该与前一个渲染器看起来相同。您不应该在数据成员之外对渲染器进行瞬态更改，并且渲染器在您执行此操作时会以奇怪的方式运行。

我怀疑如果您将数据模型对象更改为包含count属性，并且数据将渲染器的高度绑定到表达式“{50 + data.count * 20}”，然后使按钮的单击处理程序增加data.count 1，这将正常工作。（我的经验是，只要在调用makeRowsAndColumns（）之前由于data属性完成更改，DataGrid将重新绘制每行的正确大小。）我没有为您的示例尝试过这种方法，所以我不能肯定它确实有效，但当然这是使用项目渲染器的正确心态。

Answer 7

对于这样的问题，我有一点点肮脏的解决方案试试这个

private function ResizeGrid():void{
    if ( this.dg.maxVerticalScrollPosition > 0 ){
        this.dg.height +=5;
        setTimeout(this.ResizeGrid,100);
    }
}

如下所示延迟调用你的函数

setTimeout(this.ResizeGrid,100);

这是一种肮脏的方法，但它适用于我：）

Answer 8

gridItemRenderer中的以下代码帮助了我：

protected function resize():void
{
    column.grid.validateSize();
    column.grid.validateDisplayList();
}

Answer 9

我有解决此问题的方法，渲染器更改需要与您的dataprovider同步。然后只有measureHeightOfItems方法才能给出准确的结果。

Flex - 自动调整数据网格大小的问题

9 个答案: