Flex - 自动调整大小的数据网格的问题 [英] Flex - Problem with auto resizing datagrid
问题描述
我正在尝试创建一个垂直调整大小的数据网格,以确保所有的渲染器都显示完整。此外,
- 渲染器的高度可变
- 渲染器可以自行调整大小
- 其中一个项目渲染器自行调整大小(通常是响应用户单击等)
- 它调度一个父数据网格拾取的冒泡事件
- DataGrid试图调整大小,以确保所有渲染器保持全部可见。
$ b
一般来说,事件的流程如下:
我正在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屋!