extjs - DropTarget for Ext Window -

extjs - DropTarget for Ext Window -

i need implement drop target ext window. windows can dropped anywhere when dropped within dropzone need phone call function alter it's layout. problem drop events not called.

here how define drop target (it 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 how define drop source. when window has draggable config has dd property trying 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 not single function called, no action logged console. when switch window panel floating , draggable config events droptarget called (notifydrop , notifyenter) events panel not. how configure drag&drop window draggable config or maybe there improve way implement need.

i tried disable draggable window or panel , specify droptarget , dragsource myself:

droptarget 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 access our element later if (!this.el) { this.el = ext.get(this.getel()); } //add css class add together transparency our div this.el.addcls('selected'); //when drop our item on invalid place need homecoming 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'); // alter item position absolute this.el.dom.style.position = 'absolute'; //move item 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 start dragging window events fired dragging window on drop zone have no effect. droptarget events not fired.

edit: 1 time again when switch window panel events both source , target fired. still need drag sources windows.

i had similar issue when trying manipulate proxy , drag handle may help. maybe should dragtracker or dragdrop components. dragtracker provide events dragstart , drag end among others can utilize implement drop logic.

this implementation (for panels, maybe it'll help, cant in great depth)

//add listener afterrender, perchance other window.on('afterrender', me._setupdragdrop, window); //do magic _setupdragdrop : function(win){ win.dd = new ext.dd.dragdrop(win.id); win.dd.sethandleelid(win); win.dragtracker = new ext.dd.dragtracker({ onbeforestart: function(e) { //do stuff }, onstart: function(e) { //do stuff }, ondrag: function(e) { //do stuff }, onend: function(e) { //do stuff } }); win.dragtracker.initel(win.el); },

hope helps.

extjs extjs4 extjs4.1 extjs4.2