Scheduler error exceptions on dragging tasks

[petersm]

Hi

I'm getting error messages like this on dragging tasks

Screenshot 2021-12-06 085905.png (75.16 KiB) Viewed 679 times

This usually seems to occur after calling load on its crudmanager

[mats]

What version are you using? How can we reproduce?

[petersm]

This is on version 4.3.3
I've attached the data being supplied to the chart

teamsCrudManager = new bryntum.scheduler.CrudManager({
		// crud manager will get stores from myAppProject project
		//project   : myAppProject,
		validateResponse:true,
		supportShortSyncResponse:true,
		autoSync : true,
		transport : {
			load : {
				url : '../resources/pagingcsp/jobcosting/activityTeamData.csp'
			},
			sync : {
				url : '../resources/pagingcsp/jobcosting/activityTeamSave.csp'
			}
		}
	});

const teamsScheduler = new bryntum.scheduler.Scheduler({
	appendTo : 'divTeams',
	crudManager : teamsCrudManager,
	weekStartDay:1,
	features : {
    	eventEdit : {
    		dateFormat:'YYYY-MM-DD'
    	}
    },
    columns          : [
        { text : 'Name', type : 'resourceInfo', width : 130 }
    ],

    features : {
		eventMenu : {
			items : {
				editActivity:{
					text:'Edit Activity',
					onItem({ eventRecord }) {
                        console.log(eventRecord)
                        var taskId = eventRecord.get("id")
                        if (taskId.indexOf("||")!=-1){
                        	top.Ext.create("Ext.ux.IFrameWindow", {
								height : 600,
								width : 750,		
								id:"EditJoblineSupplier",
								maximizable:true,
								url:"frmJobActivityGroupLinks.csp?ActivityLinkLineID="+taskId+"&EstimatedStartDate="+"&JobID="+taskId.split("||")[0]+"&bEdit=Edit",
								onClose:function (retval) {
									//dsoWorkFlow.load()
									UpdateGrid()
								}
							});
                        }
                        
                    }
				}
			}
		}
	},

    tbar : [
    	{
            type      : 'slider',
            ref       : 'zoom',
            width     : 130,
            text      : 'Zoom',
            showValue : true,
            min       : 0,
            max       : 25,
            value     : 15,
            onInput({ value }) {
                teamsScheduler.zoomLevel = value;
            }
        }
    ]
    /*eventRenderer({ eventRecord, resourceRecord, renderData }) {
    	renderData.eventStyle.backgroundColor="blue"
    }*/
	/*mode : 'timeline',

	eventStore : eventStore,
	resourceStore : resourceStore*/
});


loadTeamsData();

function loadTeamsData()
{
	if (teamsCrudManager == "") return
	
if ((Ext.getCmp("cboCustomer").getValue() == "") || (Ext.getCmp("cboCustomer").getValue() == null)|| (Ext.getCmp("cboCustomer").getValue() == "All")){
	var Customer = ""
}else{
	var Customer = Ext.getCmp("cboCustomer").getValue()
}

if ((Ext.getCmp("cboActivityCode").getValue() == "") || (Ext.getCmp("cboActivityCode").getValue() == null)|| (Ext.getCmp("cboActivityCode").getValue() == "All")){
	var ActivityCode = ""
}else{
	var ActivityCode = Ext.getCmp("cboActivityCode").getValue()
}
if ((Ext.getCmp("cboActivityGroup").getValue() == "") || (Ext.getCmp("cboActivityGroup").getValue() == null)|| (Ext.getCmp("cboActivityGroup").getValue() == "All")){
	var ActivityGroup = ""
}else{
	var ActivityGroup = Ext.getCmp("cboActivityGroup").getValue()
}

teamsCrudManager.load({
	request : {
		params : {
			jobNumber : Ext.getCmp("txtJobNumber").getRawValue(),
			description : Ext.getCmp("txtJobDescription").getRawValue(),
			customer: Customer,
			quoteNumber:Ext.getCmp("txtQuoteNumber").getRawValue(),
			jobStatus:Ext.getCmp("cboJobStatus").getValue(),
			dateFrom:Ext.getCmp("cldrDateFrom").getRawValue(),
			dateTo:Ext.getCmp("cldrDateTo").getRawValue(),
			status:Ext.getCmp("cboStatus").getValue(),
			assembly:Ext.getCmp("cboAssembly").getValue(),
			division:Ext.getCmp("cboDivision").getValue(),
			region:Ext.getCmp("cboRegion").getValue(),
			chargeUp:Ext.getCmp("cboChargeUp").getValue(),
			project:Ext.getCmp("cboProject").getValue(),
			prePriced:Ext.getCmp("cboPrePriced").getValue(),
			paymentRetention:Ext.getCmp("cboPaymentRetention").getValue(),
			activityGroup:ActivityGroup,
			team:Ext.getCmp("cboTeam").getValue()
		}
	}
})
}

[alex.l]

Hi petersm,

I tried your data and configs with our examples and I see no errors in there. Of course I didn't use any code ExtJS related that needs as well some missing in your code snippet components. Looks like the problem in something else. Please try to reproduce it yourself and zip a test case that we can check.

Thanks!

[petersm]

I tried to recreate the problem with an example but haven't had any luck.
The problem might be related to autosync as i don't get the problem if i take that out. I have validateresponse on but didn't get anything in the console from that.

Could using the scheduler and gantt chart together on the same page cause a problem?

[alex.l]

Could using the scheduler and gantt chart together on the same page cause a problem?

Don't think so, there should be no conflicts at all. validateresponse shouldn't be relevant too.

Ok, try to collect more info about the bug and check if it still exists after you upgraded your app. We have to be able to reproduce the problem on our side to help you with that.

[petersm]

Also noticed this in the console

scheduler.umd.js:10 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

[Violation] Forced reflow while executing JavaScript took 34ms

I am using this inside extjs 4.x, could that be a problem at all?

[alex.l]

Try to debug it step by step. It looks like there is some problems with record persistence. But really hard to say why it happens without a test case.

[petersm]

Hi

I think i can recreate it
Try move task "GU-01" from "Team Vitek"

var teamsCrudManager = new CrudManager({
		// crud manager will get stores from myAppProject project
		//project   : myAppProject,
		validateResponse:true,
		supportShortSyncResponse:true,
		autoSync : true,
		transport : {
			load : {
				url : 'https://webatar.co.nz/csp/nz1000121/wab/resources/pagingcsp/jobcosting/activityTeamData.csp'
			},
			sync : {
				url : 'https://webatar.co.nz/csp/nz1000121/wab/resources/pagingcsp/jobcosting/activityTeamSave.csp'
			}
		}
	});

//endregion

const scheduler = new Scheduler({
    appendTo         : 'container',
    features : {
        	eventEdit : {
        		dateFormat:'YYYY-MM-DD'
        	}
        },
        columns          : [
	        { text : 'Name', type : 'resourceInfo', width : 130 }
	    ],
	crudManager : teamsCrudManager,
	tbar : [
	    	{
	            type      : 'slider',
	            ref       : 'zoom',
	            width     : 130,
	            text      : 'Zoom',
	            showValue : true,
	            min       : 0,
	            max       : 25,
	            value     : 15,
	            onInput({ value }) {
	                scheduler.zoomLevel = value;
	            }
	        },
	        { text : 'Reload', onClick : () => {teamsCrudManager.load()} },
			
    ]
});


teamsCrudManager.load()

[mats]

It's because your assignments data is a bit dirty, you mix the types of 'resourceId', you mix Number and String:

 "assignments" : {
        "rows" : [
            {
                "eventId"    : "222||102",
                "resourceId" : "4",
                "id"         : "222||102$$4"
            },
            {
                "eventId"    : "228||122",
                "resourceId" : "4",
                "id"         : "228||122$$4"
            },
            {
                "eventId"    : "222||103",
                "resourceId" : "4",
                "id"         : "222||103$$4"
            },
            {
                "eventId"    : "360||388",
                "resourceId" : 4, 
                "id"         : "360||388$$4"
            }
        ]
    }

Change last resourceId to "4" and all is fine.