Flex - 自动调整数据网格大小的问题 [英] Flex - Problem with auto resizing datagrid

问题描述

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

I'm trying to create a datagrid which will resize vertically to ensure all the renderers are displayed in full. Additionally,

• 渲染器的高度可变
• 渲染器可以自行调整大小

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

Generally speaking, the flow of events is as follows :

• 其中一个项目渲染器调整自身大小(通常响应用户点击等)
• 它调度一个冒泡事件，父数据网格接收该事件
• DataGrid 尝试调整大小以确保所有渲染器保持完整可见.

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

I'm currently using this code within the datagrid to calculate the height:

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

这似乎得到了不正确的高度.我尝试了许多变体，包括 callLater(以确保调整大小已完成，以便测量可以正常工作)，以及覆盖 meausre() 和调用 invalidateSize()/validateSize()，但都不起作用.

This appears to get an incorrect height. I've tried a number of variations including callLater ( to ensure the resize has completed so measure can work correctly), and overriding meausre() and calling invalidateSize() / validateSize(), but neither works.

以下 3 个类将说明问题.单击项目渲染器中的按钮可调整渲染器的大小.网格还应展开，以便完整显示所有 3 个渲染器.

Below are 3 classes which will illustrate the problem. Clicking the button in the item renderers resizes the renderer. The grid should also expand so that all of the 3 renderers are shown in their entirety.

任何建议将不胜感激.

问候

马蒂

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>

推荐答案

无论如何，我从来没有设法解决这个问题.代码很快就沉迷于处理边缘情况.

For what it's worth, I never managed to resolve this issue. Code quickly became obsessed with dealing with edge cases.

我最终放弃了 dataGrid 方法，并使用 VBox & 编写了一个解决方案.HBox 以方便调整大小.

I ended up throwing out the dataGrid approach, and wrote a solution using VBox & HBox to facilitate resizing.

这篇关于Flex - 自动调整数据网格大小的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！