Flex 垂直数据网格答案

【问题标题】：Flex Vertical DatagridFlex 垂直数据网格
【发布时间】：2011-09-07 00:43:56
【问题描述】：

我可以有一个垂直而不是水平显示数据的数据网格吗？

例如，如果这是我的数据提供者：

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

我希望数据显示如下：

Fields        Value1    Value2
Firstname     John      Jack
Lastname      Doe       Jill

等等..什么是实现这一目标的最佳方法..如果我必须扩展数据网格组件，请解释如何..

【问题讨论】：

Flex 4.5 数据网格还是 MX 数据网格？ Flex 3 还是 4？
假设您不需要可排序的标题（或任何与标题等效的左侧），您可以从 DataGroup 和自定义 ItemRenderer 中获得类似的功能。
你能发布一些代码来帮助我理解如何做到这一点吗？

标签： apache-flex datagrid

【解决方案1】：

所以这是一个 hack……但事实证明你不能轻易改变 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 蝙蝠侠。

这是未旋转的项目渲染器：

<?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 度。除此之外，它实际上应该可以正常工作......

【讨论】：