ExtJS Gantt

gantt.js

///<reference path="http://www.cnblogs.com/scripts/vswd-ext_2.0.2.js" />
 Ext.ns('App');
 
 var dateNow = new Date();
 var yearNow = dateNow.getFullYear();
 var monthNow = 0;
 var dayNow = 1;
 //Ext.Loader.setConfig({enabled: true, disableCaching : false });
 //Ext.Loader.setPath('Sch', 'http://www.cnblogs.com/../ExtScheduler2.x/js/Sch');
  //Ext.Loader.setPath('Gnt', 'http://www.cnblogs.com/js/Gnt');
  
  Ext.require([
        'Gnt.plugin.TaskContextMenu',
          'Gnt.column.StartDate',
          'Gnt.column.EndDate',
          'Gnt.column.Duration',
          'Gnt.column.PercentDone',
          'Gnt.column.ResourceAssignment',
          'Sch.plugin.TreeCellEditing',
          'Sch.plugin.Pan',
          'Ext.window.MessageBox'
  ]);
  
  Ext.onReady(function() {
      Localize();
      App.Gantt.init();
 });
 
 App.Gantt = {
     // Initialize application
     init: function(serverCfg) {
         Ext.QuickTips.init();
 
 
         var taskData = Ext.create("Gnt.data.TaskStore", {
             model: 'Gnt.model.Task',
             proxy: {
                 type: 'ajax',
                 method: 'GET',
                 url: "../ProjectGantt/AjaxService.ashx",
                 //url: 'Data/tasks.json',
                 reader: {
                     type: 'json'
                 }
             }
         });
 
         taskData.on({
             beforeload: function(store, operation, opts) {
             }
         });
 
         var comboStore = new Ext.data.SimpleStore({
             fields: ['Id', 'Name'],
             data: [
                    [1, '大修项目'],
                    [2, '技改项目'],
                    [3, '基建项目']
                   ]
         });
 
         var g = Ext.create("Gnt.panel.Gantt", {
             height: '100%',
              '100%',
             renderTo: Ext.getBody(),
             //leftLabelField: 'Name',
             highlightWeekends: true,
             showTodayLine: true,
             loadMask: true,
             enableDependencyDragDrop: false,
             viewConfig: { trackOver: false },
             startDate: new Date(yearNow, monthNow),
             endDate: Sch.util.Date.add(new Date(yearNow, monthNow), Sch.util.Date.YEAR, 1),
             viewPreset: 'weekAndDayLetter',
             // 甘特图提示
             tooltipTpl: new Ext.XTemplate(
                 '<h4 class="taskTip">{Name}</h4><hr />',
                 '<ul>',
                     '<li><strong>开始时间:</strong>{[Ext.Date.format(values.StartDate, "Y年m月d日")]}</li>',
                     '<li><strong>结束时间:</strong>{[Ext.Date.format(values.EndDate, "Y年m月d日")]}</li>',
               '</ul>'
           ).compile(),
           // Setup your static columns
           columns: [
               {
                   xtype: 'treecolumn',
                   header: "项目阶段",
                   fixed: true,
                   sortable: false,
                   dataIndex: 'Name',
                    340,
                   maxWidth: 500,
                   listeners: {
                       click: function() {
                           var taskid;
                           var sm = g.lockedGrid.getSelectionModel();
                           sm.selected.each(function(t) {
                               taskid = t.get('Id');
                           });
                           var rootId = g.taskStore.getNodeById(taskid).data.parentId;
                       if (rootId == "") {
                                 g.getSchedulingView().scrollEventIntoView(g.taskStore.getNodeById(taskid), true);
                             }
                         }
                     }
                 }
     ],
             taskStore: taskData,
             trackMouseOver: false,
             stripeRows: true,
             tbar: [
                         {
                             fieldLabel: '年份',
                             xtype: 'numberfield',
                             name: 'dateCalendar',
                             id: "dateCalendar",
                              200,
                             value: yearNow,
                             labelStyle: "{text-align:center;50px;}"
                         },
                         {
                             fieldLabel: '项目类型',
                             emptyText: '请选择项目类型...',
                             name: 'ddlProjectType',
                             id: 'ddlProjectType',
                             xtype: 'combo',
                             //本地数据源  local/remote
                             mode: 'local',
                             //设置为选项的text的字段
                             displayField: "Name",
                             //设置为选项的value的字段 
                             valueField: "Id",
                             //是否可以输入，还是只能选择下拉框中的选项
                             editable: false,
                             typeAhead: true,
                             //必须选择一项
                             forceSelection: true,
                             //输入部分选项内容匹配的时候显示所有的选项
                             triggerAction: 'all',
                             labelStyle: "{text-align:center;80px;margin-left:-50px;}",
                             //selectOnFocus:true,
                             //数据
                             store: comboStore
                         },
                         {
                             text: '确定',
                             id: "btnCalendar",
                             enableToggle: true,
                             pressed: true,
                             handler: function() {
                                 Ext.MessageBox.show({
                                     title: "提示",
                                     msg: "加载数据",
                                     progress: true,
                                      300,
                                     wait: true,
                                     waitConfig: { interval: 500 }, //0.6s进度条自动加载一定长度
                                    closable: true
                                });
                                yearNow = Ext.getCmp('dateCalendar').getValue();       // 获取年份
                         projectType = Ext.getCmp('ddlProjectType').getValue(); // 获取项目类型
                              if (projectType == null || projectType == "" || isNaN(projectType)) {
                                   Ext.MessageBox.alert('提示', '请选择项目类型！');
                                   return;
                               }
                               g.setStart(new Date(yearNow, monthNow));
                               g.setEnd(Sch.util.Date.add(new Date(yearNow, monthNow), Sch.util.Date.YEAR, 1));
                                 g.taskStore.filter(function(self, args, eOpts) {
                                     return;
                                 });
                                 taskData.load({
                                     params: { action: 'gantt', year: yearNow, projectType: projectType },
                                     callback: function(records, options, success) {
                                         Ext.MessageBox.hide();
                                     },
                                     scope: taskData,
                                     add: true
                                 });
                             }
                         }
                     ]
         });
     }
 }

Gantt.aspx

<%@ Page Language="C#" MasterPageFile="~/NormalPage.Master" AutoEventWireup="true"
    CodeBehind="ProjectGantt.aspx.cs" Inherits="ProductionManage.ProjectGantt.ProjectGantt"
    Title="项目计划甘特图" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContextStyle" runat="server">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--Ext and ux styles -->
    <link href="../Javascript/ext-min/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <!--Scheduler styles-->
    <link href="../Javascript/resources/css/sch-gantt-all.css" rel="stylesheet" type="text/css" />
    <!--Implementation specific styles-->
    <link href="examples.css" rel="stylesheet" type="text/css" />
    <link href="resources.css" rel="stylesheet" type="text/css" />
    <!-- 本页面css -->
    <link href="ProjectGantt.css" rel="stylesheet" type="text/css" />

    <script src="../Javascript/jquery-1.6.2.min.js" type="text/javascript"></script>

    <!--Ext lib and UX components-->

    <script src="../Javascript/ext-min/bootstrap.js" type="text/javascript"></script>

    <script src="../Javascript/gnt-all-debug.js" type="text/javascript"></script>

    <script src="../Javascript/ext-min/locale/ext-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../Javascript/sch-lang-zh_CN.js" type="text/javascript"></script>

    
    <!-- 本页面js -->
    <script src="../Javascript/projectGantt.js" type="text/javascript"></script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentBody" runat="server">
    <table cellspacing="1" cellpadding="0" width="100%" style="border: 1px solid #bacce4;
        margin-top: 2px; overflow: hidden;">
    </table>
</asp:Content>

运行：