ExtJS Modern Demo duplicates events in some circumstances

[jsakalos]

Reported here: https://www.bryntum.com/forum/viewtopic.php?f=51&t=13129

It is caused by the custom event editor of the example. When the default event editor is used (beforeeventedit disabled in MainController), the demo behaves.

Steps to reproduce:

1. Open ExtJS Modern Demo: http://lh/bryntum-suite/Scheduler/examples/extjsmodern/
2. Copy & paste in the console:

Ext.first('schedulerpanel').getEventStore().removeAll();
Ext.first('schedulerpanel').getResourceStore().removeAll();

Ext.first('schedulerpanel').setAssignmentStore(new bryntum.scheduler.AssignmentStore())

var res = [
    { id : 'r1', name : 'Celia', city : 'Barcelona' },
    { id : 'r2', name : 'Lee', city : 'London' },
    { id : 'r3', name : 'Macy', city : 'New York' },
    { id : 'r4', name : 'Madison', city : 'Barcelona' },
    { id : 'r5', name : 'Rob', city : 'Rome' },
    { id : 'r6', name : 'Dave', city : 'Barcelona' },
    { id : 'r7', name : 'Dan', city : 'London' },
    { id : 'r8', name : 'George', city : 'New York' },
    { id : 'r9', name : 'Gloria', city : 'Rome' },
    { id : 'r10', name : 'Henrik', city : 'London' }
];

Ext.first('schedulerpanel').getResourceStore().data = res;

var eve = [
    {
        id        : 1,
        startDate : new Date(2017, 0, 1, 10),
        endDate   : new Date(2017, 0, 1, 12),
        name      : 'Multi assigned',
        iconCls   : 'b-fa b-fa-users'
    },
    {
        id         : 2,
        startDate  : new Date(2017, 0, 1, 13),
        endDate    : new Date(2017, 0, 1, 15),
        name       : 'Single assigned',
        iconCls    : 'b-fa b-fa-user',
        eventColor : 'indigo'
    },
    {
        id         : 3,
        startDate  : new Date(2017, 0, 1, 8),
        endDate    : new Date(2017, 0, 1, 11),
        name       : 'Single assigned',
        iconCls    : 'b-fa b-fa-user',
        eventColor : 'cyan'
    },
    {
        id         : 4,
        startDate  : new Date(2017, 0, 1, 10),
        endDate    : new Date(2017, 0, 1, 13),
        name       : 'Single assigned',
        iconCls    : 'b-fa b-fa-user',
        eventColor : 'blue'
    },
    {
        id         : 5,
        startDate  : new Date(2017, 0, 1, 13),
        endDate    : new Date(2017, 0, 1, 15),
        name       : 'Single assigned',
        iconCls    : 'b-fa b-fa-user',
        eventColor : 'violet'
    }
];

Ext.first('schedulerpanel').getEventStore().data = eve;

var ass = [
    { resourceId : 'r1', eventId : 1 },
    { resourceId : 'r2', eventId : 1 },
    { resourceId : 'r8', eventId : 1 },
    { resourceId : 'r3', eventId : 2 },
    { resourceId : 'r4', eventId : 3 },
    { resourceId : 'r5', eventId : 4 },
    { resourceId : 'r6', eventId : 5 }
];

Ext.first('schedulerpanel').getAssignmentStore().data = ass;

Ext.first('schedulerpanel').getEventStore().on('change', (event)=>{
    console.log(event)
});

await Ext.first('schedulerpanel').getScheduler().scrollToDate(new Date('Jan 1, 2017 3:00 PM'));

3. Double-click 2nd event from the top

4. The result is that a server request is sent and the event is duplicated:

[dongryphon]

The problem is that the pasted code makes a fundamental change to the nature of the data in that it becomes multi-assignment. The example does not use an assignmentStore so coding it to handle that alternate use case would only confuse things. In the end, I added some comments:

    // If it's a newly created event, it won't have a resource stamped into it, but the
    // resource for which it is being created will be passed. This would need to check
    // "assignments" instead in multi-assignment mode.

This should clue in the reader that such changes impact the example.