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 😀
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 🙂