Hi guys,
I have a custom component:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var label:String = "don't know";
[Bindable]
public var imageName:String = "x.gif";
]]>
</fx:Script>
<s:HGroup paddingLeft="8" paddingTop="8" paddingRight="8" paddingBottom="8">
<mx:Image id="img" source="assets/{imageName}" />
<s:Label text="{label}"/>
</s:HGroup>
</s:Group>
and a custom render, which will be used in my DataGrid:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" xmlns:components="components.*">
<s:VGroup>
<components:Person label="{dataGridListData.label}">
</components:Person>
</s:VGroup>
</s:MXDataGridItemRenderer>
This is my 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" xmlns:services="services.*">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.Image;
import mx.rpc.events.ResultEvent;
import mx.utils.ArrayUtil;
]]>
</fx:Script>
<fx:Declarations>
<fx:XMLList id="employees">
<employee>
<name>Christina Coenraets</name>
<phone>555-219-2270</phone>
<email>
[email protected]</email>
<active>true</active>
<image>assets/001.png</image>
</employee>
<employee>
<name>Joanne Wall</name>
<phone>555-219-2012</phone>
<email>
[email protected]</email>
<active>true</active>
<image>assets/002.png</image>
</employee>
<employee>
<name>Maurice Smith</name>
<phone>555-219-2012</phone>
<email>
[email protected]</email>
<active>false</active>
<image>assets/003.png</image>
</employee>
<employee>
<name>Mary Jones</name>
<phone>555-219-2000</phone>
<email>
[email protected]</email>
<active>true</active>
<image>assets/004.png</image>
</employee>
</fx:XMLList>
</fx:Declarations>
<s:HGroup>
<mx:DataGrid dataProvider="{employees}" width="100%" dropEnabled="true">
<mx:columns>
<mx:DataGridColumn headerText="Employee Name" dataField="name"/>
<mx:DataGridColumn headerText="Email" dataField="email"/>
<mx:DataGridColumn headerText="Image" dataField="image" itemRenderer="renderers.render1"/>
</mx:columns>
</mx:DataGrid>
<s:List dragEnabled="true" dragMoveEnabled="false">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>aaa</fx:String>
<fx:String>bbb</fx:String>
<fx:String>ccc</fx:String>
<fx:String>ddd</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:List>
</s:HGroup>
</s:Application>
Now what I want to do is let
the user drag an one or more item from
the left List component and drop at
the third column of
the DataGrid, then using
the dragged data to create another <components:Person /> object. So in
the final result, maybe
the first line contains just one <components:Person /> object at
the third column,
the second line contains two <components:Person /> object at
the third column and so on.
Can this be implemented in Flex? How? Great thanks.
