ExtJS Gantt

gantt.js

  1 ///<reference path="http://www.cnblogs.com/scripts/vswd-ext_2.0.2.js" />
  2  Ext.ns('App');
  3  
  4  var dateNow = new Date();
  5  var yearNow = dateNow.getFullYear();
  6  var monthNow = 0;
  7  var dayNow = 1;
  8  //Ext.Loader.setConfig({enabled: true, disableCaching : false });
  9  //Ext.Loader.setPath('Sch', 'http://www.cnblogs.com/../ExtScheduler2.x/js/Sch');
 10   //Ext.Loader.setPath('Gnt', 'http://www.cnblogs.com/js/Gnt');
 11   
 12   Ext.require([
 13         'Gnt.plugin.TaskContextMenu',
 14           'Gnt.column.StartDate',
 15           'Gnt.column.EndDate',
 16           'Gnt.column.Duration',
 17           'Gnt.column.PercentDone',
 18           'Gnt.column.ResourceAssignment',
 19           'Sch.plugin.TreeCellEditing',
 20           'Sch.plugin.Pan',
 21           'Ext.window.MessageBox'
 22   ]);
 23   
 24   Ext.onReady(function() {
 25       Localize();
 26       App.Gantt.init();
 27  });
 28  
 29  App.Gantt = {
 30      // Initialize application
 31      init: function(serverCfg) {
 32          Ext.QuickTips.init();
 33  
 34  
 35          var taskData = Ext.create("Gnt.data.TaskStore", {
 36              model: 'Gnt.model.Task',
 37              proxy: {
 38                  type: 'ajax',
 39                  method: 'GET',
 40                  url: "../ProjectGantt/AjaxService.ashx",
 41                  //url: 'Data/tasks.json',
 42                  reader: {
 43                      type: 'json'
 44                  }
 45              }
 46          });
 47  
 48          taskData.on({
 49              beforeload: function(store, operation, opts) {
 50              }
 51          });
 52  
 53          var comboStore = new Ext.data.SimpleStore({
 54              fields: ['Id', 'Name'],
 55              data: [
 56                     [1, '大修项目'],
 57                     [2, '技改项目'],
 58                     [3, '基建项目']
 59                    ]
 60          });
 61  
 62          var g = Ext.create("Gnt.panel.Gantt", {
 63              height: '100%',
 64              width: '100%',
 65              renderTo: Ext.getBody(),
 66              //leftLabelField: 'Name',
 67              highlightWeekends: true,
 68              showTodayLine: true,
 69              loadMask: true,
 70              enableDependencyDragDrop: false,
 71              viewConfig: { trackOver: false },
 72              startDate: new Date(yearNow, monthNow),
 73              endDate: Sch.util.Date.add(new Date(yearNow, monthNow), Sch.util.Date.YEAR, 1),
 74              viewPreset: 'weekAndDayLetter',
 75              // 甘特图提示
 76              tooltipTpl: new Ext.XTemplate(
 77                  '<h4 class="taskTip">{Name}</h4><hr />',
 78                  '<ul>',
 79                      '<li><strong>开始时间:</strong>{[Ext.Date.format(values.StartDate, "Y年m月d日")]}</li>',
 80                      '<li><strong>结束时间:</strong>{[Ext.Date.format(values.EndDate, "Y年m月d日")]}</li>',
 81                '</ul>'
 82            ).compile(),
 83            // Setup your static columns
 84            columns: [
 85                {
 86                    xtype: 'treecolumn',
 87                    header: "项目阶段",
 88                    fixed: true,
 89                    sortable: false,
 90                    dataIndex: 'Name',
 91                    width: 340,
 92                    maxWidth: 500,
 93                    listeners: {
 94                        click: function() {
 95                            var taskid;
 96                            var sm = g.lockedGrid.getSelectionModel();
 97                            sm.selected.each(function(t) {
 98                                taskid = t.get('Id');
 99                            });
100                            var rootId = g.taskStore.getNodeById(taskid).data.parentId;
101                        if (rootId == "") {
102                                  g.getSchedulingView().scrollEventIntoView(g.taskStore.getNodeById(taskid), true);
103                              }
104                          }
105                      }
106                  }
107      ],
108              taskStore: taskData,
109              trackMouseOver: false,
110              stripeRows: true,
111              tbar: [
112                          {
113                              fieldLabel: '年份',
114                              xtype: 'numberfield',
115                              name: 'dateCalendar',
116                              id: "dateCalendar",
117                              width: 200,
118                              value: yearNow,
119                              labelStyle: "{text-align:center;width:50px;}"
120                          },
121                          {
122                              fieldLabel: '项目类型',
123                              emptyText: '请选择项目类型...',
124                              name: 'ddlProjectType',
125                              id: 'ddlProjectType',
126                              xtype: 'combo',
127                              //本地数据源  local/remote
128                              mode: 'local',
129                              //设置为选项的text的字段
130                              displayField: "Name",
131                              //设置为选项的value的字段 
132                              valueField: "Id",
133                              //是否可以输入，还是只能选择下拉框中的选项
134                              editable: false,
135                              typeAhead: true,
136                              //必须选择一项
137                              forceSelection: true,
138                              //输入部分选项内容匹配的时候显示所有的选项
139                              triggerAction: 'all',
140                              labelStyle: "{text-align:center;width:80px;margin-left:-50px;}",
141                              //selectOnFocus:true,
142                              //数据
143                              store: comboStore
144                          },
145                          {
146                              text: '确定',
147                              id: "btnCalendar",
148                              enableToggle: true,
149                              pressed: true,
150                              handler: function() {
151                                  Ext.MessageBox.show({
152                                      title: "提示",
153                                      msg: "加载数据",
154                                      progress: true,
155                                      width: 300,
156                                      wait: true,
157                                      waitConfig: { interval: 500 }, //0.6s进度条自动加载一定长度
158                                     closable: true
159                                 });
160                                 yearNow = Ext.getCmp('dateCalendar').getValue();       // 获取年份
161                          projectType = Ext.getCmp('ddlProjectType').getValue(); // 获取项目类型
162                               if (projectType == null || projectType == "" || isNaN(projectType)) {
163                                    Ext.MessageBox.alert('提示', '请选择项目类型！');
164                                    return;
165                                }
166                                g.setStart(new Date(yearNow, monthNow));
167                                g.setEnd(Sch.util.Date.add(new Date(yearNow, monthNow), Sch.util.Date.YEAR, 1));
168                                  g.taskStore.filter(function(self, args, eOpts) {
169                                      return;
170                                  });
171                                  taskData.load({
172                                      params: { action: 'gantt', year: yearNow, projectType: projectType },
173                                      callback: function(records, options, success) {
174                                          Ext.MessageBox.hide();
175                                      },
176                                      scope: taskData,
177                                      add: true
178                                  });
179                              }
180                          }
181                      ]
182          });
183      }
184  }

 

Gantt.aspx

 1 <%@ Page Language="C#" MasterPageFile="~/NormalPage.Master" AutoEventWireup="true"
 2     CodeBehind="ProjectGantt.aspx.cs" Inherits="ProductionManage.ProjectGantt.ProjectGantt"
 3     Title="项目计划甘特图" %>
 4 
 5 <asp:Content ID="Content1" ContentPlaceHolderID="ContextStyle" runat="server">
 6     <meta http-equiv="pragma" content="no-cache" />
 7     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 8     <!--Ext and ux styles -->
 9     <link href="../Javascript/ext-min/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
10     <!--Scheduler styles-->
11     <link href="../Javascript/resources/css/sch-gantt-all.css" rel="stylesheet" type="text/css" />
12     <!--Implementation specific styles-->
13     <link href="examples.css" rel="stylesheet" type="text/css" />
14     <link href="resources.css" rel="stylesheet" type="text/css" />
15     <!-- 本页面css -->
16     <link href="ProjectGantt.css" rel="stylesheet" type="text/css" />
17 
18     <script src="../Javascript/jquery-1.6.2.min.js" type="text/javascript"></script>
19 
20     <!--Ext lib and UX components-->
21 
22     <script src="../Javascript/ext-min/bootstrap.js" type="text/javascript"></script>
23 
24     <script src="../Javascript/gnt-all-debug.js" type="text/javascript"></script>
25 
26     <script src="../Javascript/ext-min/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
27 
28     <script src="../Javascript/sch-lang-zh_CN.js" type="text/javascript"></script>
29 
30     
31     <!-- 本页面js -->
32     <script src="../Javascript/projectGantt.js" type="text/javascript"></script>
33 
34 </asp:Content>
35 <asp:Content ID="Content2" ContentPlaceHolderID="ContentBody" runat="server">
36     <table cellspacing="1" cellpadding="0" width="100%" style="border: 1px solid #bacce4;
37         margin-top: 2px; overflow: hidden;">
38     </table>
39 </asp:Content>

运行：