Our pure JavaScript Scheduler component


Post by eugenem »

I've tried to add a custom editor button like this:

taskEditFeature: {
      editorConfig: {
        bbar: {
          items: {
            myButton: {
              text: 'Wait',
              icon: 'b-fa-clock',
              onClick: (evt) => {
                console.debug(arguments);
              }
            }
          }
        },

but how do I get the edited event? I've got this = my component.


Post by Animal »

Try

taskEditFeature: {
      editorConfig: {
        bbar: {
          items: {
            myButton: {
              text: 'Wait',
              icon: 'b-fa-clock',
              onClick: 'up.onWaitClick' 
            }
          }
        },
        onWaitClick(clickDetails) {
            // this will be the editor.
        }
}

"up." at the beginning of an event handler means look in the owner hierarchy, so the button will find first its Toolbar, and the method is not found there, then it will go up to the editor, and it is configured into the editor as part of editorConfig, so that's where it will be called.

That has the record.

Then the https://www.bryntum.com/docs/scheduler/api/Scheduler/view/EventEditor#property-record


Post by eugenem »

in your sample, THIS will be the editor, but I won't be able to access my component

and if I do this:

 onWaitClick: (clickDetails) => {
          console.debug(clickDetails);
        },

then THIS is my component, but I don't get the editor

so how do I get both?


Post by alex.l »

There is a source param that contains a Button, this will be the editor.
this.owner will contain Gantt/SchedulerPro

       taskEdit: {
            editorConfig: {
              bbar: {
                items: {
                  myButton: {
                    text: 'Wait',
                    icon: 'b-fa-clock',
                    onClick: 'up.onWaitClick'
                  }
                }
              },
              onWaitClick({ event, source }) {
                  // this - is editor
                  // source - is button
              }
            }
        }

All the best,
Alex


Post by Animal »

And as a Container, the editor will have a widgetMap through which you may reference all the widgets in it: https://www.bryntum.com/docs/scheduler/api/Core/widget/Container#property-widgetMap


Post by eugenem »

But I won't get my component then. I need to call my own functions from it. So I need to use

 () => {}

syntax...


Post by alex.l »

Ok, that was not clear what do you mean in "my component".
You can use parent property to get parent of the button, try source.parent.parent to get the editor, since first parent will be a Toolbar.

All the best,
Alex


Post by eugenem »

thanks! this worked:

bbar: {
          items: {
            myButton: {
              text: 'Wait',
              icon: 'b-fa-clock',
              onClick: (evt) => {
                this.backend.addToWaiting({ id: evt.source.parent.parent.loadedRecord.id });
                evt.source.parent.parent.close();
              }
            }
          }
        },

Post Reply