自定义datagrid以显示任务之间的连接

Question

我在Flex中创建了一个程序，用于创建简单的计划，类似于MS Project或Vico Control。我有一个问题需要解决。 （你可以在这里看到：OnTime Project Scheduling tool made in Flex

计划的任务表示为甘特图，我在DataGrid的其中一行中创建了一个itemRenderer。任务显示为甘特图，但我还想显示任务之间的连接。

请看下面的图片，看看我想在这里完成的工作:(上面是datagrid现在看起来的图像，下面是我要添加的内容） alt text http://img202.imageshack.us/img202/1399/gantt.jpg

有关如何在DataGrid的项呈示器中执行此操作的任何建议吗？

Thanx很多 拉吉斯拉夫

Answer 1

好的，这是你需要做的。

1. 在dataProvider中，有一个字段是一个对象（你应该使它成为一个类），它包含以下属性： 开始：数字（百分比） 长度：数量（百分比） 指数：INT [期权道具isFirst：Boolean，isLast：Boolean]

2. 使用容器创建一个itemRenderer（比如说Canvas）并使用图形类绘制一个矩形，其左边对应于start属性。这将是itemRender宽度的百分比，可以从类的updateDisplayList protected方法中的unscaledWidth确定，您将覆盖该方法。同样，矩形的宽度对应于对象的length属性，以Canvas宽度的百分比表示。给它任何你喜欢的高度。

3. 绘制连接器。再次使用图形类在矩形的两侧绘制和绘制水平线。给它们一个恒定的长度。从水平线的末端绘制线条：左侧的线条最多为0，右侧的线条为最高。右侧的高度为0。

4. 计算出绘制中间连接器所需的距离，使其看起来连接到它上面的线。 这只需要在itemRenderer的顶部完成。

5. 如果isStart = true（对象的索引为0），请不要在矩形的左侧或顶部绘制任何内容。如果isEnd = true（对象的索引是ArrayCollection.length -1），请不要在右侧或底部绘制任何内容。

你已经完成了。您将需要了解如何使用图形对象进行绘制，但这非常简单，无论如何都应该在您的保留曲目中。