ExtJS4：从树拖到面板答案

【问题标题】：ExtJS4: Drag from tree to panelExtJS4：从树拖到面板
【发布时间】：2012-02-11 06:04:20
【问题描述】：

我在使用 ExtJS4 时遇到问题。

我的应用程序有一棵树，其中包含一个代表员工的字符串。
在这棵树中，拖放工作得很好。
现在我正在尝试创建一个面板，可以将员工拖到该面板上进行删除。

所以我让 ExtJS 创建一个新的 Ext.dd.DDTarget，根据需要定义拖动区域（这是有效的部分，因为它被认为是一个有效的删除目标）......但是当我放下员工时，什么都没发生。我只是不知道要使用哪个监听器以及在哪里使用它......

我真的不知道，我应该在我的代码的哪一部分发布这个问题来支持你支持我（：D）......所以我只是发布我认为我应该发布的内容并编辑这篇文章，如果有些东西不见了... :-)

这是我的 DDTarget：

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

其中“trashTarget”是面板（如下所示），“trashDrag”是拖动组的名称...

目标面板：

  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'
});

这是我解决这个问题的想法之一：

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

覆盖一些监听器；但它不起作用。
我希望我没有让你感到困惑，也许有人可以帮助我...... :-)

提前致谢
吉拉拉斯

-------------- 更新：

我将面板更改为网格面板...
当我将一个项目拖到它上面时，它会从树上消失...
...但它似乎没有触发文档中指定的任何事件...
我的新面板如下所示：

 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'
});

但不知何故，这也不起作用......

【问题讨论】：

好吧，它一直在删除我的“大家好 :-)”，所以想象一下...... :-P
好的，解决了……但由于我（还）不允许发布我的解决方案，……我稍后再做 ;-)

标签： events extjs drag-and-drop tree listeners

【解决方案1】：

嗯，好吧，我想我找到了解决方案；-)
可能不是最好的，但足以满足我的需要：D
我将在此处发布我的解决方案，以便有一天寻求此主题帮助的人可能会找到它:-)

我的问题（以及我对此想法的错误点）是，我不知道在哪里捕捉事件......或者至少现在它可以工作，当在 viewConfig 中捕捉它时 的网格面板 :-)

这是我的新面板：

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'
});

无论如何，谢谢，写下我的问题确实帮助我以不同的方式思考它:-)

【讨论】：

【解决方案2】：

为了防止从树中删除数据，您应该在 viewConfig 中设置属性：

viewConfig:{ copy: true; }

【讨论】：