SchedulerPanel column drag and drop event

[ferfer]

Hi!

We are using SchedulerPanel the integration they did for extjs with modern, version 7.

We have created a column with a button inside source, which we want to drag to create an event. I have used the modern Extjs classes for Ext.drag.Source for this functionality.

But when you drag it, it stays inside the column and does not go outside.

• I have used the z-index property, but it is not able to get out of the defined shape when dragging
  	{
             xtype     : 'schedulerpanel',
  	  itemId:'schedulerPanel',
            id:'schedulerPanel',
            flex:1,
            barMargin : 0,
            rowHeight:30,
              eventStore : {
                  readUrl  : '/siada/app/data/events.json',
                  autoLoad : true
              },
              resourceStore : {
                  readUrl  : '/siada/app/data/resources.json',
                  autoLoad : true
              },
  		.................
  		 columns : [
                  { ....
  		},
  	        {
  		    text : 'Vehículo', 
                      field: 'name_vehiculo',
                      width : 90, 
                      htmlEncode:false,
                      type:'widget',
                      widgets:[{
                          type    : 'button',
                          cls     : 'siada-task-car-button',
                          style:{
                              position:'absolute',
                              'z-index': 80000 
                          },                     
  
                          onClick : ({ source : btn, view:view, d:d, e:e, f:f, g:g },a,b,c) => {
                              const { record } = btn.cellInfo;
                              
  
  					this.horizontalSource = new Ext.drag.Source({
                          element:btn.currentElement,
                          constrain: {
                              element: schedulerPanel.childNodes,
                           }
                      });
                  },
  	//The call to defined methods does not work, is it necessary to define it within SchedulerPanel?
                  onWidgetDragStart:'prueba',
                  afterRender:'pruebaAfter'
              
              }],
      //The call to defined methods does not work, is it necessary to define it within SchedulerPanel?
              listeners:{
                  onWidgetDragStart:'prueba',
              },
  		}
  	  
  

  Attached image
  
  *Can this functionality be done inside SchedulerPanel?
  (It would be inside the column of SchedulerPanel not using an outside Grid of scheduler)
  *Is there an example?
  
  Thank you very much for your help.

[saki]

It's not fully clear to me if you want to drag the button or the whole column with buttons. Also you mention Ext JS Modern but your license says "Scheduler for Ext JS Trial". Please note that Ext version of Scheduler is based on Classic toolkit; for modern you should use Bryntum Scheduler (see https://www.bryntum.com/products/scheduler-for-extjs/features/ and https://www.bryntum.com/examples/scheduler/extjsmodern/)

If you want to drag the column then this exampe can give you some inspiration. Note: it is Grid but Scheduler is based on Grid so the same principles apply.

[ferfer]

It's not fully clear to me if you want to drag the button or the whole column with buttons. Also you mention Ext JS Modern but your license says "Scheduler for Ext JS Trial". Please note that Ext version of Scheduler is based on Classic toolkit; for modern you should use Bryntum Scheduler (see https://www.bryntum.com/products/scheduler-for-extjs/features/ and https://www.bryntum.com/examples/scheduler/extjsmodern/)

If you want to drag the column then this exampe can give you some inspiration. Note: it is Grid but Scheduler is based on Grid so the same principles apply.

Hi,
We want to drag the button. My license says "Scheduler ", no is a Trial no is for Ext JS.
We are relying just on that example:
https://www.bryntum.com/examples/scheduler/extjsmodern/ with xtype:'schedulerPanel'

We want to do what they do in the following example but not in Grid, but in Schedule resource column.
https://www.bryntum.com/examples/scheduler/dragfromgrid/ ---> "dragfromScheduler"

*If you look there is a column in the grid named "unassigened tasks". You can drag it to create a task in Scheduler. We want that operation in the column named "NBR Tasks",
it's possible?, it's possible with xtype:'schedulerPanel' ?,

Regards!

[saki]

Thank you for the clarification.

Unfortunately, we do not have example that would do exactly what you need. The similar example is that what you already refer to (dragfromgrid) and then https://www.bryntum.com/examples/scheduler/validation/, https://www.bryntum.com/examples/scheduler/drag-onto-tasks/, https://www.bryntum.com/examples/scheduler/drag-between-schedulers/

In your case you would drag within the scheduler, not from the external grid or scheduler. Nevertheless, the principle is same. You would need a custom Drag class similar to one that you can find in lib directory of the dragfromgrid example so you can use the example as the starting point. (Drag is instantiated at the end of app.js file.)

Ext JS has a little to do with it as it only serves as a container for Bryntum Scheduler and the dragging does not cross the boundary of the scheduler.

[ferfer]

Hi, we know the file that app.js refers to, and we know that the drag class instantiates there. But to be able to carry it out it is necessary, all the other classes:

DragHelper, DomHelper, Rectangle, WidgetHelper, Scheduler, EventModel, DateHelper, EventStore, Grid, Splitter

We can instantiate these classes like this:

let DH = window.bryntum.scheduler.DateHelper,
					today = DH.clearTime(new Date()),
					start     = DH.startOf(today, 'week');

But we believe it does not finish instantiating the classes since the SchedulerPanel class of the example is not prepared for modern:
.--> https://www.bryntum.com/examples/scheduler/extjsmodern/

Since we cannot include these classes within the instance of the example:
scheduler-3.1.5 \ examples \ extjsmodern \ Bryntum \ SchedulerPanel.js

var scheduler = me.getScheduler ();

            if (! scheduler.rendered) {
                scheduler.render (me.bodyElement.dom);
            }

Reproducing the example to which it refers:

class Drag extends window.bryntum.scheduler.DateHelper {
    static get defaultConfig() {
        return {
            // Don't drag the actual row element, clone it
            cloneTarget        : true,
            mode               : 'translateXY',
            // Only allow drops on the schedule area
            dropTargetSelector : '.b-timeline-subgrid',
            // Only allow drag of row elements inside on the unplanned grid
            targetSelector : '.b-grid-row:not(.b-group-row)'
        };
    }

that new instance of the window.bryntum.scheduler.DateHelper obj cannot be modified from var scheduler = me.getScheduler ();

The question xtype: schedulerPanel, is prepared to support all that, it is hard work, and I don't know if it would work by instantiating those classes in schedulerPanel, do you think it will work?

[saki]

In the code above you extend DateHelper but it should be DragHelper.

SchedulerPanel seems to be the best place to implement the custom dragging. Right after the scheduler is created in applyScheduler method you can instantiate the custom Drag object. You can also define the Drag object at the top of SchedulerPanel file.

[ferfer]

In the code above you extend DateHelper but it should be DragHelper.

SchedulerPanel seems to be the best place to implement the custom dragging. Right after the scheduler is created in applyScheduler method you can instantiate the custom Drag object. You can also define the Drag object at the top of SchedulerPanel file.

Thanks for the help, we have already done it.
Regards!