Flex Vertical Datagrid

时间:2011-06-02 11:43:46

标签: flex datagrid

我可以使用垂直而不是水平显示数据的数据网格吗?

例如,如果这是我的数据提供者:

array('firstname':'John','lastname':'Doe'),
array('firstname':'Jack','lastname':'Jill')

我希望数据显示如下:

Fields        Value1    Value2
Firstname     John      Jack
Lastname      Doe       Jill

等......最好的方法是什么..如果我必须扩展datagrid组件,请解释如何..

1 个答案:

答案 0 :(得分:4)

所以这是一个黑客...但事实证明你不能轻易改变spark数据网格的流量。据我所知,你需要覆盖其中的每个组件,这需要很长时间。 DataGrid使用自己的布局,它看起来非常适合1行= 1个数据。

所以...开始黑客攻击:

<s:DataGrid rotation="270">
  <s:columns>
    <s:ArrayList>
      <s:GridColumn itemRenderer="unrotate" headerRenderer="headerUnrotate"/>
      <s:GridColumn itemRenderer="unrotate" headerRenderer="headerUnrotate"/>
    </s:ArrayList>
  </s:columns>
</s:DataGrid>

好的......我做了什么?我只是旋转整个数据网格。我如何解决它,以便我们不必倾斜你的头?我取消旋转itemrenderer中的每一列。 HOLY HACK蝙蝠侠。

这是项目渲染器unrotate:

<?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" clipAndEnableScrolling="true">

<fx:Script>
    <![CDATA[
        override public function prepare(hasBeenRecycled:Boolean):void {
            lblData.text = data[column.dataField]
        }
    ]]>
</fx:Script>

<s:Label id="lblData" top="9" left="7" rotation="90"/>

</s:GridItemRenderer>

标题代码类似,只需旋转90即可返回到我们开始的位置。我知道这个解决方案远非完美,但它是我能想到的最好的,没有完全搞乱DataGrid类

您可能还需要覆盖外观以提供WIDER标头...这实际上是一个TALLER标头,因为我们旋转了270度。除此之外它应该可以正常工作......