教程1-在网页上显示一个最基本的甘特图

前言：本

extjs甘特图控件是基于extjs的最新版本构架的，如果你熟悉extjs的编程方式， 那么学习起来就非常容易；如果你以前没有接触过extjs，也没有关系，我们会教你一步一步的入门。

这是第一个网页甘特图程序，我们要完成以下功能
教学目标

1. 准备好网页甘特图数据

2. 在网页上显示一个最基本的甘特图

1. 准备数据

extjs甘特图可以接收xml、json、web服务等多种数据形式，下面以XML为例。

   
     
1     
计划任务     
2010-01-18T00:00:00-08:00     2010-02-02T00:00:00-08:00     
40     
null     
false     
   
   ... 

在以上的数据结构中， 包含了一个任务的id，名称，开始时间，结束时间等等。xml的tag名称不一定非得是id，name，因为我们可以在以下的程序中再做一次映射。

2. 引入甘特图需要的文件

要使用extjs网页甘特图控件需要引入以下文件。

这些文件看起来有点多，但是相互分离， 减少相互之间的耦合性。 你可以直接拷贝到html中的head块内。

3.编写代码

然后我们就可以开始编写代码了，我们首先需要定义一个xml的读取器。

var myreader = new Ext.data.XmlReader({
                // records will have a 'Task' tag
                record: 'Task',
                idPath: "Id",
                fields : [
                    //以下数据是必须的，并且要和xml中匹配
     	            {name:'Id'},
                    {name:'Name', type:'string'},
                    {name:'StartDate', type : 'date', dateFormat:'c'},
                    {name:'EndDate', type : 'date', dateFormat:'c'},
                    {name:'PercentDone'},
                    {name:'ParentId', type: 'auto'},
                    {name:'IsLeaf', type: 'bool'},

                    // 以下是任务的附加数据                    
                    {name:'Responsible'}
                ]
            })

基于以上的xml读取器，我们要定义一个store

var taskStore = new Ext.ux.maximgb.tg.AdjacencyListStore({
            defaultExpanded : true,
    	    autoLoad : true,
            proxy : new Ext.data.HttpProxy({
                //我们需要到同级目录下的tasks.xml获取数据
                url : 'tasks.xml',
                method:'GET'
            }),
            //这是上面定义的reader
            reader: myreader 
});

最后就是定义一个甘特图了， 我们只需要用new构造一个甘特图的对象。

var g = new Sch.gantt.GanttPanel({
            //甘特图显示在什么位置
            renderTo : Ext.getBody(),
            leftLabelField : 'Name',
            //定义甘特图中的开始时间和结束时间
            startDate : new Date(2010,0,4), 
            endDate : Sch.util.Date.add(new Date(2010,0,4), Sch.util.Date.WEEK, 20), 
            //定义时间刻度
            viewPreset : 'weekAndDayLetter',
            // 甘特图左边显示的列
            columns : [
                {
                    header : 'Tasks', 
                    sortable:true, 
                    dataIndex : 'Name', 
                    locked : true,
                    width:250, 
                    editor : new Ext.form.TextField()
                }
            ],
            //刚才定义好的数据存取器
            taskStore : taskStore,
        });

这样，一个最基本的甘特图就做出来了。 最后的效果如以下所示。 它只是显示了任务（以列和图表的方式），但是并没有显示任务之间的关联关系，这个将会在下一节中讲述。