Multi assignment in Extjs Modern

[edison.shi]

Hi,

I found a bug when add assignmentStore into ExtjsModern in my develop.

Can you help to find a workround or fix it?

You can test in online ExtjsModern demo with following step(I will use multi assign data in this case):

1. Remove all eventStore and resourceStore,
Open the console,

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

2. Add assignmentStore

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

3. Add resourceStore data

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().add(res)

4. Add eventStore data

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().add(eve)

5. Add assignmentStore data

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().add(ass)

5. find the date (01,01,2017)

6.

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

double click an event then you can see a copy of this event. If it is a multi assign, it will copy the first one. Also you can see the console the eventStore changed.

7. drag an event you have already double click, and move to another place, then you will see one of the event will not move

Please help with that.

Many thanks
Edison

[saki]

It seems like a bug in the custom implementation of the event editor of the example. If we disable beforeeventedit in MainController then the example uses the default event editor and events are not duplicated and the extra server request is not sent.

Thank you for reporting it. The ticket is here: https://github.com/bryntum/support/issues/205

[edison.shi]

Hi,

If you can put

resourceId

into eventStore for each event,
set the eventStore like:

var eve = [
        {
            id        : 1,
            startDate : new Date(2017, 0, 1, 10),
            endDate   : new Date(2017, 0, 1, 12),
            resourceId : 'r1',
            name      : 'Multi assigned',
            iconCls   : 'b-fa b-fa-users'
        },{
            id        : 1,
            startDate : new Date(2017, 0, 1, 10),
            endDate   : new Date(2017, 0, 1, 12),
            resourceId : 'r2',
            name      : 'Multi assigned',
            iconCls   : 'b-fa b-fa-users'
        },{
            id        : 1,
            startDate : new Date(2017, 0, 1, 10),
            endDate   : new Date(2017, 0, 1, 12),
            resourceId : 'r8',
            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),
            resourceId : 'r3',
            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),
            resourceId : 'r4',
            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),
            resourceId : 'r5',
            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),
            resourceId : 'r6',
            name       : 'Single assigned',
            iconCls    : 'b-fa b-fa-user',
            eventColor : 'violet'
        }
    ]

Set the assignmentStore and the resourceStore like the stores above. The events are not duplicated.
Is this will cause any problem if set the resourceId in both eventStore and resourceSrore?
Also the id in eventStore will duplicate.

If I use the default event editor, where I can custom the event editor to add more information I needed.

Many thanks
Edison

[saki]

For multi-assigned events we have assignments store so it then used to keep assignments of an event to resources. So your first approach is fine: adding events w/o resources and then add records to assignments store.

If you want to look into it yourself then the best place to begin is editEvent method of MainController.

[dongryphon]

The problem you describe comes from the example's beforeeventedit handler when the example is modified to use multi-assignment as above.

In this case the handler should look more like this:

    var rec = event.eventRecord;
    
    me.editEvent(rec, event.eventElement,
            (rec.resource || rec.assignments) ? null : event.resourceRecord);

The editEvent method is simply being told the event is new and should be associated to the passed resource (which is null when the event is not new).

That example would likely need other adjustments to fully handle multi-assignment mode.

Are you looking for a similar example that uses multi-assignment or are you trying to use the example to reproduce a bug in your app?

[edison.shi]

Hi dongryphon,

I'm doing an app using scheduler with extjs modern. I combine drag and drop function before, this time I found some bugs when I combine multi assign with extjs modern. I adjust too many things to finish it (do mulit assign by event editor) ,(still have some problems when change the resource by drag).
In your extjs modern demo, you also

override: 'Ext.field.Select',

in schedulerPanel.js
It cause the select field and combobox can not know array when the data render into a selectfield or a combobox,
maybe you can also fix this in after release.

Thank you
Edison

[dongryphon]

Hi Edison,

On the override, there is a piece that is needed for Ext JS 6.7+ that is commented out since the example uses 6.5:

    // Only for 6.6
    // if (me.getMultiSelect()) {
    //     return me.syncMultiValues(Ext.Array.from(value));
    // }

If you copy the code into a 6.7+ project, you'll want to put that piece back. (The comment says "Only for 6.6" but it should read "Only for 6.7+"

[dongryphon]

Re:using the scheduler in Ext JS modern

Once you switch to multi-assignment, you may want to just remove the custom event editor. That example is showing only some of what you would need to do to fully customize the UI there, but that's not needed if the default editing does what you want.

If you are running into other bugs, I'd recommend creating new messages for them so we can investigate what you are experiencing.