ExtJS4: Drag from tree to panel

Question

I'm facing a problem using ExtJS4.

My application has a tree containing a string representing an employee.
Inside this tree, drag&drop works just fine.
Now I'm trying to have a panel, to which an employee can be dragged to delete.

So I let ExtJS create a new Ext.dd.DDTarget, define the dragzone as needed (and this is the part that works, because it's recognized as a valid goal for dropping) ... but when I drop the employee, nothing happens. I just can't figure out which listener to use and where exactly to use it ...

And I don't really know, which part of my code I should post with this question to support you in supporting me (:D) ... so I just post what I think I should post and edit this post if something is missing ... :-)

So here is my DDTarget:

 var trashDDTarget = Ext.create('Ext.dd.DDTarget', 'trashTarget', 'trashDrag');

where 'trashTarget' is the panel (so below) and 'trashDrag' the name of the dragGroup...

The targetPanel:

  var trashPanel = Ext.create('Ext.panel.Panel', {
title: 'Trash!',
id: 'trashTarget',
width: 400,
height: 150,
renderTo: 'trash',
bodyStyle: 'background-image: url(/images/trash_can.png) !important'
});

And this is one of my ideas to solve this problem:

  Ext.override(Ext.dd.DDTarget, {
onDragDrop  : function(evtObj, targetElId) {
  console.log(evtObj);
},
onInvalidDrop: function(evt) {
  console.log(evt);
}
});

Overriding some listeners; but it doesn't work.
I hope I didn't confuse you and that maybe someone can help me ... :-)

Thanks in advance
gilaras

---------------------------- UPDATE:

I changed the panel to a gridpanel ...
When I drag an item onto it, it disappears from the tree ...
... but it doesn't seem to fire any event specified in the docs ...
My new panel looks like this:

 var trashPanel = Ext.create('Ext.grid.Panel', {
title: 'Trash!',
id: 'trashTarget',
width: 400,
viewConfig: {
  plugins: {
    ptype: 'gridviewdragdrop',
    dropGroup: 'trashDrag',
    dragGroup: 'trashDrag',
    dragText: 'In den Papierkorb ziehen, um zu löschen...'
  }
},
height: 150,
renderTo: 'trash',
columns:[
  {
    hidden: true
  }
],

bodyStyle: 'background-image: url(/images/trash_can.png) !important'
});

But somehow this doesn't work either ...

Answer 1

Hm okay, i guess I've found a solution ;-)
May not be the best, but it's enough for what I need :D
I'll post my solution here, so that maybe someday someone seeking for help on this topic may find it :-)

My problem (and the point that was wrong in my thoughts about it) was, that I didn't know where to catch the events ... or at least now it works, when catching it in the viewConfig of the gridpanel :-)

So here's my new panel:

var trashPanel = Ext.create('Ext.grid.Panel', {
title: 'Trash!',
id: 'trashTarget',
width: 400,
viewConfig: {
  plugins: {
    ptype: 'gridviewdragdrop',
    dropGroup: 'trashDrag',
    dragGroup: 'trashDrag',
    dragText: 'In den Papierkorb ziehen, um zu löschen...'
  },
  listeners: {
    drop: function(node, data, overModel, dropPosition) {
      console.log('Mitarbeiter mit ID ' + data.records[0].internalId + ' gedropt!');
      var antwort = function(btn){
        if(btn.indexOf('no') != -1){
          treeStore.load();
        } else {
          Ext.Ajax.request({
              url: '/app/loeschenPage',
              params:
              {
                id: data.records[0].internalId
              },
              method: 'GET',
              success: function() {
                Ext.MessageBox.alert("Und tschüss...", "Mitarbeiter erfolgreich aus der Datenbank gelöscht.");
                treeStore.load();
              }
            });
        }
      };
      Ext.MessageBox.confirm('Wirklich löschen?', 'Soll der Mitarbeiter WIRKLICH FUER IMMER geloescht werden? Das ist eine sehr lange Zeit...', antwort);

    }
  }
},
height: 150,
renderTo: 'trash',
columns:[
  {
    hidden: true
  }
],

bodyStyle: 'background-image: url(/images/trash_can.png) !important'
});

Thanks anyways, writing my problem down really helped me thinking about it in a different way :-)

Answer 2

To prevent remove data from tree you should set property in viewConfig:

viewConfig:{ copy: true; }