教程2-在网页甘特图上显示任务关联关系

上个教程说到如何在网页中创建甘特图，以及如何在甘特图中显示任务（横道）。

这本教程主要教大家如何在网页甘特图上显示任务关联关系。 在extjs网页甘特图的设计的时候，就充分考虑了数据的解耦，所以任务和关联关系可以分别在不同的xml文件中存储（当然也可以在同一个xml文件中）。这也给我们后端的存储带来了很大的方便，例如在数据库中，我们的任务表和任务关系表分别保存在不同的数据表中。

我们还是以xml为例。 这时候我们需要准备关联关系的xml

<Links>
  <Link>
    <From>12</From>
    <To>17</To>
    <Type>2</Type>
  </Link>
  ...
</LInks>

这个xml定义很简单，From是从哪个任务，To是到哪个任务，Type是指任务From和任务To的关系，包括完成-完成(FF) 0，完成-开始(FS) 1，开始-完成(SF) 2，开始-开始(SS) 3。

编写代码

和加载任务xml类似，我们也需要定义一个关联关系的store。

var dependencyStore = new Ext.data.Store({   
            autoLoad : true,
            proxy : new Ext.data.HttpProxy({
                //关联关系的xml
                url : 'dependencies.xml',
                method:'GET'
            }),
            reader: new Ext.data.XmlReader({
                // 记录有一个'Link' 标签
                record: 'Link',
                fields : [
                    // 3 个必填项
                    {name:'From'},
                    {name:'To'},
                    {name:'Type', type : 'int'}
                ]
            })
        });

最后我们在创建甘特图的代码中指定甘特图的关联关系的store

var g = new Sch.gantt.GanttPanel({
            height : 600,
            width: 1000,
            ...
            dependencyStore : dependencyStore
});

大功告成。一个基本的甘特图就完成了。