How Can Flex List Items be Positioned Absolutely Using an ItemRenderer
I am trying to create a grid of items using a List component. I have a data source which contains a positionX and a positionY value for each item in the grid. The data source also identifies what type of item each item in the grid is and I want to use this to display each item differently depending on the type.
I have created a background graphic, for example 600px x 600px. The List is placed on top of the background graphic and set to be the same size.
I have created the following ItemRenderer and set it as the itemRenderer for the List:
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
autoDrawBackground="true"
useHandCursor="true"
buttonMode="true"
mouseChildren="false"
width="100%" height="100%">
<!-- Use the data property to access the data passed to the item renderer. -->
<s:Group
id="locationGroup"
x="{data.positionX}" y="{data.positionY}"
width="23.058" height="23.058">
<s:RichText
text="{data.rowIdent}, {data.columnIdent}"
styleName="bodyStyle"/>
</s:Group>
</s:ItemRenderer>
The List continues to want to position each listItem in rows. Can anyone advise me how to enable each listItem to be freely positioned depending on it's data source properties please?
Thanks
I have created a simple but working ItemRenderer to achieve my aim and I wanted to share it. Here's the code:
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
autoDrawBackground="true"
useHandCursor="true"
buttonMode="true"
mouseChildren="false"
width="23.058" height="23.058">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import vo.VoLocation;
override public function set data( value:Object ) : void {
super.data = value;
// Check to see if the data property is null.
if (value== null)
return;
// If the data property is not null.
var _location:Array = value as Array; // Cast the 'value' to an Array data type.
this.x = _location[1];
this.y = _location[2];
detailsRichText.text = _location[1];
}
]]>
</fx:Script>
<!-- Use the data property to access the data passed to the item renderer. -->
<!-- Each Tile is 23.058px -->
<s:Group
id="locationGroup">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xf0ffff" />
</s:fill>
</s:Rect>
<s:RichText
id="detailsRichText"
fontSize="4"/>
</s:Group>
</s:ItemRenderer>
So why use a list? Well I had a similar scenario once before, using WPF, and I used a List and it worked a treat. As you can see above, each item in my data source is represented as an individual ItemRenderer object and each item is positioned using the positionX and positionY values. By using a List I get all of the events, such as mouse events, selected items are identified etc.
Hope it helps.
链接地址: http://www.djcxy.com/p/34650.html