让Spark DataGrid支持拖放

List、Tree和 DataGrid等MX list-based控件提供了对拖放操作的内置支持,而在Spark组件中,目前只有Spark List控件还提供这一特性,Spark DataGrid不再基于ListBased而是基于SkinnableContainerBase,虽然方便了自定义外观,然而其拖放功能却大大削弱了。不过我们还是可以定义GridEvent事件处理函数,为Spark DataGrid手动添加拖放支持的。

什么是内置支持?在MX list-based控件中,通过设置dragEnabled=true可以将项目拖出此控件并放到其它控件上,设置dropEnabled=true可以将所拖动的项目放到目标控件上,设置dragMoveEnabled=true可以在拖放操作过程中移动控件中的项目,设置draggableColumns=true允许通过拖动标题单元格重排列。内置支持很方便地实现拖放操作,然而Spark DataGrid却不支持这些特性。下面我们就通过自定义Spark DataGrid,让其实现类似功能。

点击此处查看本实例的效果,点击此处下载本实例的源码。

说明:

1. 很多代码都是Alex写的:http://blogs.adobe.com/aharui/2011/03/spark-checkbox-datagrid-with-drag-and-drop-support.html,我只是将其封装成自定义类,并修正了不少Bug。

2. 在Spark DataGrid中,启动拖动一般不再使用mouseDown和mouseMove事件,而是使用gridMouseDrag事件。其他事件都差不多,比如使用dragEnter和dragDrop事件实现将拖动项目拖入到Spark DataGrid上。

3. 在Spark DataGrid中,拖动项目时,拖动代理为一个Group,内含了该项目渲染器的一个副本,拖动包含的数据格式为itemsByIndex;拖动标题列,拖动代理为该标题渲染器的一个副本,包含的数据格式为spark.components.gridClasses.GridColumn。正是因为这些不同,我们对其分别定义了GridEvent事件处理函数。

4. 本实例中,从上到下第 一个控件是MX DataGrid,第二第三个控件都是Spark DataGrid,最后一个是Spark List。目前,已经实现了Spark DataGrid控件之间的拖放,Spark DataGrid与Spark List控件之间的拖放,MX list-based控件拖入到Spark DataGrid控件上。但是,跟Spark List控件一样,不能直接拖出到MX list-based控件上。

5. 另外,对项目和标题列拖放指示器也只是作了简单处理,大家可以自己完善。

6. 我估计Adobe会在Flex下一个版本中提供Spark DataGrid拖放操作的内置支持,拭目以等吧。

发表评论