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

问题描述

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

• 渲染器的高度可变


• 渲染器可以自行调整大小



$ b

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





• 其中一个项目渲染器自行调整大小（通常是响应用户单击等）
  
• 它调度一个父数据网格拾取的冒泡事件


• DataGrid试图调整大小，以确保所有渲染器保持全部可见。






我正在DataGrid中使用此代码来计算高度：
$ b $ pre $ height = measureHeightOfItems（0，dataProvider.length）+ headerHeight;


这似乎得到不正确的高度。我已经尝试了一些变体，包括callLater（为了确保调整大小已经完成，所以度量可以正常工作），并重写meausre（）和调用invalidateSize（）/ validateSize（），但都不起作用。 b


以下是三个可以说明问题的课程。单击项目渲染器中的按钮可调整渲染器的大小。网格也应该展开，以便所有的3个渲染器都显示完整。





任何建议将不胜感激。





Regards



Marty
$ b DataGridProblem.mxml（应用程序文件）

 < mx：Application xmlns：mx =http://www.adobe.com/2006/mxml布局=vertical
 xmlns：view =view。*> 
< mx：ArrayCollection id =dataProvider> 
< mx：String>项目A< / mx：String> 
< mx：String>项目B< / mx：String> 
< mx：String>项目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

 包视图
 {
 import flash.events.Event; 
 
导入mx.controls.DataGrid; 
导入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.0encoding =utf-8？> 
 < mx：Button width =50height =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> 
  
 
 
解决方案
问题。代码很快就陷入了对边缘案例的处理中。
 
 
 
我最终抛出了dataGrid的方法，并用VBox& HBox便于调整大小。
 
I'm trying to create a datagrid which will resize vertically to ensure all the renderers are displayed in full.  Additionally,


Renderers are of variable height
Renderers can resize themselves


Generally speaking, the flow of events is as follows :


One of the item renderers resizes itself (normally in response to a user click etc) 
It dispatches a bubbling event which the parent datagrid picks up 
The DataGrid attempts to resize to ensure that all renderers remain visible in full.


I'm currently using this code within the datagrid to calculate the height:
height = measureHeightOfItems(0, dataProvider.length ) + headerHeight;
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.

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.

Any suggestions would be greatly appreciated.

Regards

Marty

DataGridProblem.mxml (Application file)
<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.

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

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