I need to implement drop target for Ext Window. The windows can be dropped anywhere but when they are dropped inside DropZone then i need to call a function that will change it's layout. The problem is that the drop events are not called.
Here is how i define drop target (it is a floating panel, below code called in initComponent):
this.on('render', function(w) {
w.dropTarget = Ext.create('Ext.dd.DropTarget', w.getEl());
w.dropTarget.nofifyDrop = function(source, evt, data) {
console.log('notifyDrop');
};
w.dropTarget.notifyEnter = function() {
console.log('notifyEnter');
};
},this);
Here is how i define drop source. When window has draggable config then it has dd property that i am trying to configure
listeners:{
scope:this,
close:function(w) {
this.removeWindow(w);
},
show:function(w) {
console.log('win', w.dd);
w.dd.afterValidDrop = function() {
console.log('after valid drop');
}
w.dd.onDragDrop = function() {
console.log('on drag drop');
}
w.dd.onStartDrag = function() {
console.log('starting drag');
}
},
The problem is that not a single function is called, no action logged into console. When i switch from window to panel with floating and draggable config then the events from DropTarget are called (notifyDrop and notifyEnter) but events from panel are not. How to properly configure Drag&Drop for Window with draggable config or maybe there is a better way to implement what i need.
I also tried to disable draggable for window or panel and specify DropTarget and DragSource myself:
Droptarget now have ddGroup:
this.on('render', function(w) {
w.dropTarget = Ext.create('Ext.dd.DropTarget', w.getEl(),{
ddGroup:'winDDGroup',
notifyDrop:function(source, evt, data) {
},
notifyEnter:function() {
console.log('notifyEnter');
}
});
},this);
And drag source (ext window):
var overrides = {
startDrag: function(e) {
console.log('starting drag');
//shortcut to access our element later
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//add a css class to add some transparency to our div
this.el.addCls('selected');
//when we drop our item on an invalid place we need to return it to its initial position
this.initialPosition = this.el.getXY();
},
onDrag: function(e) {
//this.el.moveTo(e.getPageX() - 32, e.getPageY() - 32);
},
onDragEnter: function(e, id) {
console.log('onDragEnter', id);
Ext.fly(id).addCls('valid-zone');
},
onDragOver: function(e, id) {
console.log('onDragOver', id);
Ext.fly(id).addCls('valid-zone');
},
onDragOut: function(e, id) {
console.log('onDragOut');
},
onDragDrop: function(e, id) {
console.log('on drag Drop');
// change the item position to absolute
this.el.dom.style.position = 'absolute';
//move the item to the mouse position
this.el.moveTo(e.getPageX() - 32, e.getPageY() - 32);
Ext.fly(id).removeCls('valid-zone');
},
onInvalidDrop: function() {
console.log('invalid drop');
this.el.removeCls('valid-zone');
//this.el.moveTo(this.initialPosition[0], this.initialPosition[1]);
},
endDrag: function(e, id) {
console.log('end drag');
this.el.removeCls('selected');
//Ext.fly(id).removeCls('drop-target');
//this.el.highlight();
}
};
....
listeners:{
scope:this,
close:function(w) {
this.removeWindow(w);
},
render:function(w) {
var dd = Ext.create('Ext.dd.DragSource', w.getEl(), {
ddGroup:'winDDGroup',
//isTarget: false
});
Ext.apply(dd, overrides);
},
}
Now when i start dragging the window events are fired but dragging the window over drop zone have no effect. DropTarget events are not fired.
Edit: Again when i switch from window to panel then events from both source and target are fired. Still i need the drag sources to be windows.
