Our pure JavaScript Scheduler component


Post by f.langlais »

Hi,

this.scheduler = new bryntum.scheduler.Scheduler({
            multiEventSelect  : true,
            flex        : 40,
		....
		....
		eventMenu : {
			items : {
				sendEmail : {
					text   : 'Send email',
					icon   : 'b-fa b-fa-mail-bulk',
					weight : 200,
					onItem : ({ eventRecord}) => this.openEmailBox(eventRecord,)
					
			},
			deleteEvent : false,
			copyEvent : false,
			cutEvent : false
		}    
	},
	
	
	=> this.openEmailBox(eventRecord) work fine
	

after modify my code like this :

                
eventMenu : { // Process items before menu is shown processItems({eventRecord, items}) { items.copyEvent = false; items.deleteEvent = false; items.cutEvent = false; if (eventRecord.statut === 'PLANIFIEE') { items.sendEmail = { text : 'Send email', icon : 'b-fa b-fa-mail-bulk', onItem({eventRecord, resourceRecord}) { console.log('onitem'); this.openEmailBox(eventRecord); } }; } }, .. }

the call this.openEmailBox(eventRecord) doesn't work, nothing happen

BR


Post by alex.l »

Hi f.langlais,

Please check the context of the onItem method you declared. As we can see, first declaration and second declaration are different, so it's very possible that this you used is not that you expected.
Best of all is to declare const with correct context outside of the method and use it inside.

const me = this; // in the place where is the context is correct
const me = scheduler; // if you have it, even easier

// ....
                            onItem({eventRecord, resourceRecord}) {
                                me.openEmailBox(eventRecord);
                            } 

All the best,
Alex


Post by f.langlais »

Hi, i understand the pb, but i can't resolve it.
How to add listeners to go out of my eventMenu scheduler object ?
BR


Post by Maxim Gorkovsky »

Hello.
Arrow functions are bound to the scope they're defined in; regular function scope usually is whatever object they're called on:

const obj = { foo : () => console.log(this === window), bar : function() { console.log(this === obj) } }
obj.foo() // true
obj.bar() // true

this in the new listener should be menu instance, you can try closure to get to the correct scope. Or use arrow function instead:

const me = this;

this.scheduler = new bryntum.scheduler.Scheduler({
            multiEventSelect  : true,
            flex        : 40,
		....
		....
		eventMenu : {
			items : {
				sendEmail : {
					text   : 'Send email',
					icon   : 'b-fa b-fa-mail-bulk',
					weight : 200,
					onItem({ eventRecord}) { me.openEmailBox(eventRecord,) }

Post by f.langlais »

Hi,

i can't declare const me = this; in my lwc

Br


Post by Maxim Gorkovsky »

Then I suggest to roll back to arrow function instead of regular one.


Post by f.langlais »

hi,

i resolved my pb

BR


Post Reply