ExtJS4：从树拖到面板

我的应用程序有一个树，它包含一个表示雇员的字符串。
在这棵树的内部，拖动&拖放工作得很好。
现在我试图建立一个面板，员工可以被拖到这个面板上去删除。

所以我让ExtJS创建一个新的Ext.dd.DDTarget，根据需要定义dragzone（这是工作的一部分，因为它被认为是有效的下降目标）......但是当我放弃员工，什么都没发生。我只是无法弄清楚哪个听众可以使用以及在哪里使用它......

而且我不知道，我的代码的哪个部分应该发布这个问题以支持您支持我（：d）...所以我刚刚张贴的内容，我想我应该张贴和编辑这个职位，如果缺少了什么？:-)

因此，这里是我的DDTarget：

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

哪里'trashTarget'是面板（如下）和'trashDrag'dragGroup的名称...

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

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

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

重写一些听众;但它不起作用。
我希望我没有混淆你，也许有人能帮助我... :-)

在此先感谢
gilaras

------------ ---------------- UPDATE：

我改变了面板的GridPanel中...
当我拖动一个项目到它，它从树上消失。 ..
...但它似乎不会触发文档中指定的任何事件...
我的新面板看起来是这样的：

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

但不知何故，这并不工作要么...

来源

2012-01-16 gilaras

那么，它不断德尔eting我的“嗨大家:-)”，所以想象一下...... :-P – gilaras 2012-01-16 09:04:30

好吧，解决了它......但由于我还没有（但）被允许发布我的解决方案，...我会做它后来一段时间;-) – gilaras 2012-01-16 14:05:03

嗯好吧，我想我已经找到了解决办法;-)
也许不是最好的，但它足以让我需要什么：d
我会在这里发布我的解决方案，这样说不定哪天有人寻求帮助，关于这一主题可能会发现它:-)

我的问题（这个问题在我的想法中是错误的）是，我没有知道在哪里捕捉事件...或者至少现在它的工作原理，在GridPanel中的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' 
});

感谢反正，我写下来的问题真的帮了我思考它以不同的方式:-)

来源

2012-01-17 06:24:39 gilaras

要防止树中删除的数据，你应该在viewConfig设置属性：

viewConfig:{ copy: true; }

来源

2013-01-22 08:22:16 icemanovich

ExtJS4：从树拖到面板

回答

相关问题