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>
运行：
