[ANSWERED] Scheduler ResourceStore modelClass

[jmeire]

Hi

I'm currently trying to implement the angular scheduler.
There was an issue I ran into when I wanted to work with a custom idField and childrenField.

I based myself on this example:
https://www.bryntum.com/examples/scheduler/tree/

I created a custom model 'FmResource':

class FmResource extends ResourceModel {
  static get fields() {
    return [
      {
        name: 'guid',
        type: 'string'
      },
      {
        name: 'url',
        type: 'string'
      }
    ];
  }
}
(FmResource as any).exposeProperties();

In my scheduler component I set the modelClass of the resourceStore to my custom FmResource model.

FmResource.idField = 'guid';
FmResource.childrenField = 'url';
this.resourceStore = new ResourceStore({
	tree: true,
	autoLoad: true,
	readUrl: 'init',
	modelClass: FmResource,
});

But in console the following error appears:
Uncaught (in promise): TypeError: Class constructor FmResource cannot be invoked without 'new'
TypeError: Class constructor FmResource cannot be invoked without 'new'.

So I have 2 questions:
- Is this the right approach to use a custom idField and childrenField?
- How can I resolve this error?

Thanks in advance!

[Maxim Gorkovsky]

Hello.
There is a known issue about extending model class in UMD bundle being impossible: https://github.com/bryntum/support/issues/192

There are few things you can do:
1. Try to switch from scheduler.umd to scheduler.module bundle. That would allow to extend models but IE11 won't be supported (without extra build configuration)
2. In case you only need to extend fields you can try simpler syntax:

resourceStore = new ResourceStore({
  tree : true,
  autoLoad : true,
  readUrl : 'init',
  fields : [{ name : 'guid', type : 'string' }, { name : 'url', type : 'string' }]
});

[jmeire]

And if I add this to the Resource store:

fields : [{ name : 'guid', type : 'string' }, { name : 'url', type : 'string' }

How can I configurate that guid should be used as idField and url as childrenField?

[Maxim Gorkovsky]

As I said, that works only if you need to change fields. In your case I can advise to use scheduler.module.js bundle. Do you need to support IE11?

[jmeire]

No I don't need to support IE11.

But when I change my imports from:
import { ResourceStore, AjaxHelper, Override, ResourceModel } from 'bryntum-scheduler/scheduler.umd.js';
To:
import { ResourceStore, AjaxHelper, Override, ResourceModel } from 'bryntum-scheduler/scheduler.module.js';

I get the following error in console:
Uncaught Error: Bundle included twice, check cache-busters and file types (.js)
at Function.setVersion (scheduler.module.js:9)
at Module../bryntum-config/build/scheduler.module.js (scheduler.module.js:9)

[sergey.maltsev]

Hi!

Use

import { ... } from 'bryntum-scheduler';

Also don't forget to replace all scheduler.umd.js in /examples/angular/_shared/projects/bryntum-angular-shared/src folder and then recompile _shared with npm run build

See details in ReadMe.txt file in demo folder or refer to this guide
https://www.bryntum.com/docs/scheduler/#guides/integration/angular.md

[jmeire]

Okay, thank you!