uas6.0/WebContent/app/projectscheduler/ProjectGanttPan.js

Ext.define("App.ProjectGanttPan", {
    extend : "Gnt.panel.Gantt", 
    requires : [
        'Gnt.plugin.TaskContextMenu',
        'Gnt.column.StartDate',
        'Gnt.column.EndDate',
        'Gnt.column.Duration',
        'Gnt.column.PercentDone',
        'Gnt.column.ResourceAssignment',
        'Sch.plugin.TreeCellEditing',
        'Sch.plugin.Pan'
    ],
    //rightLabelField : 'Responsible',
    highlightWeekends : true,
    showTodayLine : true,
    loadMask : true,
    enableProgressBarResize : true,
    listeners:{
     	'lockedGrid':{
	            	itemclick:function(a,b,c,d){
	            		
	            	},
	            	itemcontextmenu: function(view, record, node, rowIndex, e){   
				   		a=window.textconttextmenu;
	            		a.rec=record,
	            		a.grid=this.up();
				        e.preventDefault();
				        a.showAt(e.getX(), e.getY());
				   }
	            	
            	},
         'taskdblclick':function(gantt,record){
           		var keyValue=record.data.id;
            	var formCondition = "id  IS" + keyValue ;
        		var gridCondition="ra_taskid IS"+keyValue;
           		var panel = Ext.getCmp("id=" +keyValue);  
                var caller= 'MProjectTaskGanttEdit';
                var url= basePath+'jsps/crm/marketmgr/marketresearch/task.jsp';
                var main = parent.Ext.getCmp("content-panel");
                
    	        if(!panel){ 
    		           var title = "";
	    	           panel = { 
			    				//title : main.getActiveTab().title+'('+title+')',
			    				title:'项目任务: ('+keyValue+')',
			    				tag : 'iframe',
			    				tabConfig:{tooltip:'项目任务('+title+')'},
			    				frame : true,
			    				border : false,
			    				layout : 'fit',
			    				iconCls : 'x-tree-icon-tab-tab',
			    				html : '<iframe id="iframe_maindetail_'+caller+"_"+keyValue+'" src="'+url+'?formCondition='+formCondition+'&gridCondition='+gridCondition+'" height="100%" width="100%" frameborder="0" scrolling="no"></iframe>',
			    				closable : true,
			    				listeners : {
			    					close : function(){
			    			    		main.setActiveTab(main.getActiveTab().id); 
			    					}
			    				} 
	    	         	  };
	    	      		this.openTab(panel,"id=" + keyValue); 
    	            }
    	            else{ 
	    	           main.setActiveTab(panel); 
    	            } 
          
         }} ,        
    initComponent : function() {
        
        Ext.apply(this, {

            lockedGridConfig : {
                width: 210,
                title : '任务列表',
                collapsible : false
            },
			lockedViewConfig: {
                plugins: {
                    ptype: 'treeviewdragdrop'
                }
            },
            schedulerConfig : {
                collapsible : true,
                title : '日程安排'
            },

            leftLabelField : {
                dataIndex : 'Name',
                editor : { xtype : 'textfield' }
            },
            rightLabelField : {
	            renderer : function(value, record) {
	                //get resources of the task
	                var resources = record.getResources(),
	                    names = [];
	
	                for(var i=0, l=resources.length; i<l; i++){
	                    var res = resources[i];
	                    
	                    if(res){
	                        names.push(res.getName());
	                    }
	                }
	                //return the string with resources names
	                return names.join(', ');
	            }
	        },
            
            // Add some extra functionality
            selModel : new Ext.selection.TreeModel({ ignoreRightMouseSelection : false }),

            plugins : [
                textconttextmenu=Ext.create("App.TaskContextMenu"), 
                Ext.create("Sch.plugin.Pan"), 
                Ext.create('Sch.plugin.TreeCellEditing', { clicksToEdit: 2 }),
                Ext.create('Gnt.plugin.Printable',{
                		printableMilestoneTpl : new Gnt.template.Milestone({
						        prefix : 'foo',
						        printable : true,
						        imgSrc : 'images/milestone.png'
					 	   }),
			            printRenderer : function(task, tplData) {
			                if (task.isMilestone()) {
			                    return;
			                } else if (task.isLeaf()) {
			                    var availableWidth = tplData.width - 4,
			                        progressWidth = Math.floor(availableWidth*task.get('PercentDone')/100);
			                    return {
			                        progressBarStyle : Ext.String.format('width:{2}px;border-left:{0}px solid #7971E2;border-right:{1}px solid #E5ECF5;', progressWidth, availableWidth - progressWidth, availableWidth)
			                    };
			                } else {
			                    var availableWidth = tplData.width - 2,
			                        progressWidth = Math.floor(availableWidth*task.get('PercentDone')/100);
			                    return {
			                        progressBarStyle : Ext.String.format('width:{2}px;border-left:{0}px solid #FFF3A5;border-right:{1}px solid #FFBC00;', progressWidth, availableWidth - progressWidth, availableWidth)
			                    };
			                }
			            },
			
			            beforePrint : function(sched) {
			                var v = sched.getSchedulingView();
			                this.oldRenderer = v.eventRenderer;
			                this.oldMilestoneTemplate = v.milestoneTemplate;
			                v.milestoneTemplate = this.printableMilestoneTpl;
			                v.eventRenderer = this.printRenderer;
			            },
			
			            afterPrint : function(sched) {
			                var v = sched.getSchedulingView();
			                v.eventRenderer = this.oldRenderer;
			                v.milestoneTemplate = this.oldMilestoneTemplate;
			            }
			        })
			    
            ],

            // Define an HTML template for the tooltip
            tooltipTpl : new Ext.XTemplate(
                '<h4 class="tipHeader">{Name}....{Id}</h4>',
                '<table class="taskTip">', 
                    '<tr><td>开始:</td> <td align="right">{[Ext.Date.format(values.StartDate, "y-m-d")]}</td></tr>',
                    '<tr><td>结束:</td> <td align="right">{[Ext.Date.format(Ext.Date.add(values.EndDate, Ext.Date.MILLI, -1), "y-m-d")]}</td></tr>',
                    '<tr><td>进度:</td><td align="right">{PercentDone}%</td></tr>',
                '</table>'
            ).compile(),

            eventRenderer: function(task){
                return {
                        style : 'background-color: #'+task.data.TaskColor
                };
            },
            
            // Define the static columns
            columns : [
                {
                    xtype : 'treecolumn',
                    header: '项目任务',
                    sortable: true,
                    dataIndex: 'Name',
                    width: 210,
                    field: {
                        allowBlank: false
                    },
                    renderer : function(v, meta, r) {
                        if (!r.data.leaf) meta.tdCls = 'sch-gantt-parent-cell';

                        return v;
                    }
                },
                {
                    xtype : 'startdatecolumn',
                    header:'开始日期'
                },
                {
                    xtype : 'enddatecolumn',
                    header:'完成日期'
                   // hidden : true
                },
                {
                    xtype : 'durationcolumn',
                    header:'需要时间'
                },
                {
                    xtype : 'percentdonecolumn',
                    header:'完成率',
                    width : 50
                },
	            {
	                header : '资源分配', 
	                width:150,
	                xtype : 'resourceassignmentcolumn', 
	                editor : Ext.create('Gnt.widget.AssignmentCellEditor', {
								assignmentStore : this.assignmentStore,
						        resourceStore : this.resourceStore
						    })
	            },

                //column displaying task color
                {
                    header: '色彩',
                    xtype: 'templatecolumn',
                    width: 50,
                    tdCls: 'sch-column-color',
                    field: {
                        allowBlank: false
                    },
                    tpl: '<div class="color-column-inner" style="background-color:#{TaskColor}">&nbsp;</div>',
                    listeners: {
                        click : function(panel, el, a, b, event, record) {
                            event.stopEvent();
                            this.rec = record;
                            this.showColumnMenu(el, event, record);
                        }
                    },
                    showColumnMenu: function(el, event, rec){
                        if(!this.colorMenu){
                            this.colorMenu = new Ext.menu.Menu({
                                cls: 'gnt-locked-colormenu',
                                plain: true,
                                items: [
                                    {
                                        text: '调整任务颜色',
                                        menu: {
                                            showSeparator: false,
                                            items: [
                                                Ext.create('Ext.ColorPalette', {
                                                    listeners: {
                                                        select: function(cp, color){      
                                                            this.rec.set('TaskColor', color);
                                                        },
                                                        scope: this
                                                    }
                                                })
                                            ]
                                        }
                                    }
                                ]                             
                            });
                        }
                        this.colorMenu.showAt(event.xy);
                    }                                     
                }
            ],
            tbar : this.createToolbar()
        });
        
        this.callParent(arguments);
        
    },
createToolbar : function() {
        return [{
            xtype: 'buttongroup',
            title: '编辑工具',
            columns: 4,
            items: [
                {
                    iconCls : 'icon-prev',
                    text : '向上添加任务',
                    scope : this,
                    handler : function() {
                    	
						task=this.getSelectionModel().getSelection()[0];
						newTask=this.copyTask(task);
						task.parentNode.insertBefore(newTask, task);
                    }
                },
                {
                    iconCls : 'icon-next',
                    text : '向下添加任务',
                    scope : this,
                    handler : function() {
                    	task=this.getSelectionModel().getSelection()[0];
						newTask=this.copyTask(task);
						if (task.nextSibling) {
							 task.parentNode.insertBefore(newTask, task.nextSibling)
						} else {
							 task.parentNode.appendChild(newTask)
						}
                    }
                },
                {
                    text : '添加子任务',
                    iconCls : 'icon-collapseall',
                    scope : this,
                    handler : function() {
                        task=this.getSelectionModel().getSelection()[0];
                        
                        task.set("leaf", false);
						task.appendChild(this.copyTask(task));
						task.expand();
                    }
                },
                {
                    text : '添加里程碑',
                    iconCls : 'zoomfit',
                    handler : function() {
                    	task=this.getSelectionModel().getSelection()[0];
                    	var b = task.getTaskStore();
						newTask = this.copyTask(task);
						if (task.nextSibling) {
							 task.parentNode.insertBefore(newTask, task.nextSibling)
						} else {
							 task.parentNode.appendChild(newTask)
						};
						var a = task.getEndDate();
						if (a) {
							newTask.calendar =newTask.calendar|| task.getCalendar();
							newTask.setStartEndDate(a, a, b.skipWeekendsDuringDragDrop)
						};
					
                    },
                    scope : this
                },
                {
                    text : '删除任务',
                    iconCls : 'icon-expandall',
                    scope : this,
                    handler : function() {
                       var a = this.getSelectionModel().selected;
					   this.taskStore.remove(a.items)
                    }
                },
                {
                    text : '添加前置任务 ',
                    iconCls : 'zoomfit',
                    scope : this,
                    handler : function() {
                    	
                    	task=this.getSelectionModel().getSelection()[0];
                    	var b = task.getDependencyStore();
						newTask = new MyTaskModel({leaf:true,Name:'新建的任务'});
						c=newTask;
						newTask.calendar = newTask.calendar || task.getCalendar();
						newTask.beginEdit();
						newTask.set(task.startDateField, newTask.calculateStartDate(task.getStartDate(), 1,
										Sch.util.Date.DAY));
						newTask.set(task.endDateField, task.getStartDate());
						newTask.set(task.durationField, 1);
						newTask.set(task.durationUnitField, Sch.util.Date.DAY);
						newTask.endEdit();
						task.parentNode.insertBefore(newTask, task);  
						var a = new b.model({
									fromTask : newTask,
									toTask : task,
									type : b.model.Type.EndToStart
								});
						b.add(a);
                    }
                },
                {
                    text : '添加后续任务',
                    iconCls : 'icon-expandall',
                    scope : this,
                    handler : function() {
                    	task=this.getSelectionModel().getSelection()[0];
                        e = task.getTaskStore(), d = task.getDependencyStore();
							newTask = new MyTaskModel({leaf:true,Name:'新建的任务'});
							
							newTask.calendar = newTask.calendar || task.getCalendar();
							newTask.taskStore = e;
							newTask.setStartDate(task.getEndDate(), true, e.skipWeekendsDuringDragDrop);
							newTask.setDuration(1, Sch.util.Date.DAY);
							if (task.nextSibling) {
								 task.parentNode.insertBefore(newTask, task.nextSibling)
							} else {
								 task.parentNode.appendChild(newTask)
							}
							var a = new d.model({
										fromTask : task,
										toTask : newTask,
										type : d.model.Type.EndToStart
									});
							d.add(a);
                    }
                },
                {
                    text : '保存',
                    iconCls : 'icon-save',
                    scope : this,
                    handler : function() {
                        this.assignmentStore.sync();
						this.resourceStore.sync();
						this.dependencyStore.sync();
						taskstore=this.taskStore;
						taskstore.sync({
							success:function(taskStore){
								taskstore.load();
							}
						});
                    }
                }
            ]
        },{
            xtype: 'buttongroup',
            title: '显示工具',
            columns: 3,
            items: [
                {
                    iconCls : 'icon-prev',
                    text : '向前',
                    scope : this,
                    handler : function() {
                        this.shiftPrevious();
                    }
                },
                {
                    iconCls : 'icon-next',
                    text : '向后',
                    scope : this,
                    handler : function() {
                        this.shiftNext();
                    }
                },
                {
                    text : '全部收起',
                    iconCls : 'icon-collapseall',
                    scope : this,
                    handler : function() {
                        this.collapseAll();
                    }
                },
                {
                    text : '全部任务',
                    iconCls : 'zoomfit',
                    handler : function() {
                        this.zoomToFit();
                    },
                    scope : this
                },
                {
                    text : '全部展开',
                    iconCls : 'icon-expandall',
                    scope : this,
                    handler : function() {
                        this.expandAll();
                    }
                },
                {
                    text : '打印',
                    iconCls : 'icon-save',
                    scope : this,
                    handler : function() {
                    	this.zoomToFit();
                  	  	this.print();
                    }
                }
            ]
        },
        {
            xtype: 'buttongroup',
            title: '显示精度',
            columns: 2,
            items: [{
                    text: '6 周',
                    scope : this,
                    handler : function() {
                        this.switchViewPreset('weekAndMonth');
                    }
                },
                {
                    text: '10 周',
                    scope : this,
                    handler : function() {
                        this.switchViewPreset('weekAndDayLetter');
                    }
                },
                {
                    text: '1 年',
                    scope : this,
                    handler : function() {
                        this.switchViewPreset('monthAndYear');
                    }
                },
                {
                    text: '5 年',
                    scope : this,
                    handler : function() {
                        var start = new Date(this.getStart().getFullYear(), 0);

                        this.switchViewPreset('monthAndYear', start, Ext.Date.add(start, Ext.Date.YEAR, 5));
                    }
                }
            ]},
            {
                xtype: 'buttongroup',
                title: '设置任务完成百分比',
                columns: 5,
                defaults : { scale : "large" },
                items: [{
                        text: '0%<div class="percent percent0"></div>',
                        scope : this,
                        handler : function() {
                            this.applyPercentDone(0);
                        }
                    },
                    {
                        text: '25%<div class="percent percent25"><div></div></div>',
                        scope : this,
                        handler : function() {
                            this.applyPercentDone(25);
                        }
                    },
                    {
                        text: '50%<div class="percent percent50"><div></div></div>',
                        scope : this,
                        handler : function() {
                            this.applyPercentDone(50);
                        }
                    },
                    {
                        text: '75%<div class="percent percent75"><div></div></div>',
                        scope : this,
                        handler : function() {
                            this.applyPercentDone(75);
                        }
                    },
                    {
                        text: '100%<div class="percent percent100"><div></div></div>',
                        scope : this,
                        handler : function() {
                            this.applyPercentDone(100);
                        }
                    }
                ]
            },
            {
            	xtype: 'buttongroup',
           		title: '其他',
            	columns: 2,
            	defaults : { scale : "large" },
	            items: [{
	                    text: '资源调整',
	                    scope : this,
	                    handler : function() {
	                        this.switchViewPreset('weekAndMonth');
	                    }
	                },{
	                	text: '资源负荷',
	                    scope : this,
	                    handler : function() {
	                        this.switchViewPreset('weekAndMonth');
	                    }
	                }]
	                
            },
            '->',
            {
                xtype: 'buttongroup',
                title: '查找',
                columns : 1,
                items: [
                {
                    iconCls : 'action',
                    text : '滚动到最后一个任务',
                    scope : this,
                        
                    handler : function(btn) {
                        var latestEndDate = new Date(0),
                            latest;
                        this.taskStore.getRootNode().cascadeBy(function(task) {
                            if (task.get('EndDate') >= latestEndDate) {
                                latestEndDate = task.get('EndDate');
                                latest = task;
                            }
                        });
                        this.getSchedulingView().scrollEventIntoView(latest, true);
                    }
                },
                {
                    xtype : 'textfield',
                    emptyText : '查找任务...',
                    scope : this,
                    width:150,
                    enableKeyEvents : true,
                    listeners : {
                        keyup : {
                            fn : function(field, e) {
                                var value   = field.getValue();
                                    
                                if (value) {
                                    this.taskStore.filter('Name', field.getValue(), true, false);
                                } else {
                                    this.taskStore.clearFilter();
                                }
                            },
                            scope : this
                        },
                        specialkey : {
                            fn : function(field, e) {
                                if (e.getKey() === e.ESC) {
                                    field.reset();
                                }
                                this.taskStore.clearFilter();
                            },
                            scope : this
                        }
                    }
                }]
            }
        ];
    },
    copyTask : function(c) {
		var a=new MyTaskModel({leaf:true,Name:'新建的任务'});
		a.setPercentDone(0);
		a.set(a.startDateField, (c && c.getStartDate()) || null);
		a.set(a.endDateField, (c && c.getEndDate()) || null);
		a.set(a.durationField, (c && c.getDuration()) || null);
		a.set(a.durationUnitField, (c && c.getDurationUnit()) || "d");
		return a
	},
    
    applyPercentDone : function(value) {
        this.getSelectionModel().selected.each(function(task) { task.setPercentDone(value); });
    },

    showFullScreen : function() {
        this.el.down('.x-panel-body').dom[this._fullScreenFn]();
    },
    
   openTab : function (panel,id){ 
    	var o = (typeof panel == "string" ? panel : id || panel.id); 
    	var main = parent.Ext.getCmp("content-panel"); 
    	var tab = main.getComponent(o); 
    	if (tab) { 
    		main.setActiveTab(tab); 
    	} else if(typeof panel!="string"){ 
    		panel.id = o; 
    		var p = main.add(panel); 
    		main.setActiveTab(p); 
    	} 
    } ,
    // Experimental, not X-browser
    _fullScreenFn : (function() {
        var docElm = document.documentElement;
        
        if (docElm.requestFullscreen) {
            return "requestFullscreen";
        }
        else if (docElm.mozRequestFullScreen) {
            return "mozRequestFullScreen";
        }
        else if (docElm.webkitRequestFullScreen) {
            return "webkitRequestFullScreen";
        }
    })()
});