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：從樹拖到面板

回答

相關問題