Flex Vertical Datagrid [英] Flex Vertical Datagrid

问题描述

例如，如果这是我的dataprovider：

  array（'firstname'：'John'，'lastname'：'Doe'），
 array（'firstname'：'Jack'，'lastname' ：'Jill'）
  

我希望这样显示数据：

 字段Value1 Value2 
名字John Jack 
姓氏Doe Jill 
  

等等....什么是最好的方法来实现这一点..如果我必须扩展datagrid组件，请解释如何..

解决方案

所以这是一个黑客...但是事实证明你不能轻易地改变spark datagrid的流程。从我可以看出，你需要覆盖它内部的每个组件，这将需要很长时间。 DataGrid使用自己的布局，它看起来非常适合1 row = 1的数据。

所以...开始hack：

 < s： DataGrid rotation =270> 
< s：columns> 
< s：ArrayList> 
< s：GridColumn itemRenderer =unrotateheaderRenderer =headerUnrotate/> 
< s：GridColumn itemRenderer =unrotateheaderRenderer =headerUnrotate/> 
< / s：ArrayList> 
< / s：columns> 
< / s：DataGrid> 
  

好吧，我做了什么？我只是旋转整个datagrid。我如何解决它，所以我们不必倾斜你的头？我拆开了itemrenderer中的每一列。 HOLY HACK蝙蝠侠。

这里是项目渲染器unrotate：

  ;？xml version =1.0encoding =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/mxclipAndEnableScrolling =true> 
 
< fx：脚本> 
<！[CDATA [
 override public function prepare（hasBeenRecycled：Boolean））：void {
 lblData.text = data [column.dataField] 
} 
] ] 
< / fx：脚本> 
 
< s：标签id =lblDatatop =9left =7rotation =90/> 
 
< / s：GridItemRenderer> 
  

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

你可能还需要覆盖皮肤来提供一个WIDER标题...其实是一个TALLER标题，因为我们旋转了270度。其他那么应该实际上可以正常工作...

Can i have a datagrid that displays data vertically instead of horizontally ?

for example, if this is my dataprovider:

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

I want the data to be displayed like this :

Fields        Value1    Value2
Firstname     John      Jack
Lastname      Doe       Jill

and so on .... whats the best way to achieve this .. If i have to extend the datagrid component, please explain how ..

解决方案

So this is a hack... but it turns out you can't easily change the flow of the spark datagrid. From what I can tell, you'd need to override just about every component inside it and it'd take a long time. The DataGrid uses its own layout and it seems very set on the subject of 1 row = 1 piece of data.

So... commence hack:

<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>

Okay... what did I do? I just rotate the whole datagrid. How do I fix it so we don't have to tilt your head? I un-rotate each column in the itemrenderer. HOLY HACK batman.

here's the item renderer 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>

The header code is similar, just rotate 90 to get back to where we started. I know this solution is far from perfect but it's the best I could think of without completely messing with the DataGrid class

You probably also need to override the skin to provide a WIDER header... which is actually a TALLER header since we're rotated 270 degrees. Other then that it should actually work okay...

这篇关于Flex Vertical Datagrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！