How to render a collection of DisplayObject instances in a spark List?
Is it possible to have a Spark List display items from an ArrayCollection of DisplayObjects (ie: Canvas)? Something like the code below does not render anything unless I specify an itemRenderer.
<s:List dataProvider="{ displayObjects }">
<s:layout>
<s:VerticalLayout rowHeight="290" gap="20" />
</s:layout>
</s:List>
The reason is to leverage the List's drag and drop features for rearranging custom components. Currently, I am using a VGroup (without drag and drop) and do not want to recreate all the drag and drop functionality that you get "for free" with the List control. Other viable solutions can also be accepted.
TIA.
Try this:
//Application
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.containers.Canvas;
[Bindable]private var displayObjects:ArrayCollection = new ArrayCollection();
[Bindable]private var size:int = 40;
private const COLOR:Array = ["0x00ff00", "0xff0000", "0x0000ff", "0xffff00" , "0x00ffff"];
private function doAddCanvas(colorId:int):Canvas
{
var canvas:Canvas = new Canvas();
canvas.setStyle("backgroundColor", COLOR[colorId]);
canvas.width = size;
canvas.height = size;
return canvas;
}
protected function init():void
{
for (var i:int = 0; i < 5; i++)
displayObjects.addItem(doAddCanvas(i));
}
]]>
</fx:Script>
<s:VGroup x="20" y="20">
<s:List
width="100" height="150"
dataProvider="{displayObjects}"
itemRenderer="com.ListItemRenderer"
dragEnabled="true" dropEnabled="true"
dragMoveEnabled="true">
<s:layout>
<s:VerticalLayout rowHeight="{size}" gap="20" />
</s:layout>
</s:List>
</s:VGroup>
</s:Application>
//ItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<fx:Script>
<![CDATA[
import mx.containers.Canvas;
override public function set data(value:Object):void
{
if (value != null)
{
hgMain.removeAllElements();
hgMain.addElement(value as Canvas);
}
super.data = value;
}
]]>
</fx:Script>
<s:HGroup id="hgMain" width="100%" height="100%"/>
</s:ItemRenderer>
上一篇: 弯曲防止火花列表上的选择状态