ext js拖放dataview確定節點落在

我正在使用ext js將數據從一個數據視圖拖放到另一個數據視圖。我想知道放置事件是否發生在現有節點的頂部，或者是否放在數據視圖的空白區域。ext js拖放dataview確定節點落在

下面的代碼爲我的DropTarget：

... 
onDesktopDataViewRender: function (v) { 
    var dataView = v; 

    v.dropTarget = Ext.create('Ext.dd.DropTarget', v.el, { 
     ddGroup: 'FromSearchToDesktop', 
     notifyDrop: function (source, e, dropData) { 

      //Want do do something like: 
      //if(dropped directly on any node) { 
      // do some logic with that node 
      //} 
      //else { 
      // do the code below 

       var recordAlreadyExists = false; 

       v.store.each(function (r) { 
        if (r.data.ID == dropData.searchData.ID) { 
         recordAlreadyExists = true; 
        } 
       }); 

       if (recordAlreadyExists == false) {       
        v.store.add(dropData.searchData); 
       } 
      //end else 

     } 
    }); 
} 
...

來源

2013-02-22 user1304444

耶！最後想出了這一個。

快速回答是爲節點創建一個DropZone。長的答案是如何做到這一點。

在我的程序中，用戶可以將項目從DataView A拖到DataView B.在DataView B中刪除項目後，該項目出現在DataView B中。最重要的是，用戶可以從DataView A拖動項目，並將其放在DataView B中的節點上。代碼需要區分在DataView上放置的項目和在DataView內部的節點上放置的項目。

通用指令：

在DataViewB的事件的OnRender，創建的「DataViewB」
裏面的notifyDrop功能的ddGroup與DropTarget，創建一個新的節點。
同樣在notifyDrop函數中，使用ddGroup的「DataViewNode」創建另一個dropTarget （此節點代替DataView）。
內DataViewA的事件的OnRender，創建一個DragZone與「DataViewBNode」的ddGroup （！重要！）
內DataViewA的一個AfterRender事件中，dragZone添加到「DataViewB」組。

現在，您將能夠從DataViewA中拖動並放入DataViewB的空白區域以添加節點，但是您也可以直接從DataViewB中刪除節點並執行其他操作。

這是非常重要的是第一ddGroup是節點，而這在一個AfterRender事件添加了一個對於數據視圖

下面是數據視圖A中的代碼：

onDataViewARender: function (v) { 
    var dataView = v; 
... 
    v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), { 
     ddGroup: 'DataViewBNode', 
     getDragData: function (e) { 
      var sourceEl = e.getTarget(v.itemSelector, 10), d; 
      if (sourceEl) { 
       d = sourceEl.cloneNode(true); 
       d.id = Ext.id(); 
       return v.dragData = { 
        sourceEl: sourceEl, 
        repairXY: Ext.fly(sourceEl).getXY(), 
        ddel: d, 
        searchData: v.getRecord(sourceEl).data, 
        store: v.store, 
        source: 'DataViewA' 
       } 
      } 
     }, 

     getRepairXY: function() { 
      return this.dragData.repairXY; 
     } 
    }); 
}, 

onDataViewAAfterRender: function(v) { 
    var dragZone = v.dragZone; 

    dragZone.addToGroup('DataViewB'); 
},

這裏是DataViewB的代碼

onDataViewBRender: function (v) { 
     var dataView = v; 

     v.dropTarget = Ext.create('Ext.dd.DropTarget', v.el, { 
      ddGroup: 'DataViewB', 
      notifyDrop: function (source, e, dropData) { 
       var recordAlreadyExists = false; 

       v.store.each(function (r) { 
        if (r.data.ID == dropData.searchData.ID && r.data.Type == dropData.searchData.Type) { 
         recordAlreadyExists = true; 
        } 
       }); 

       if (recordAlreadyExists == false) {       
        v.store.add(dropData.searchData); 

        var nodes = v.container.dom.childNodes[0].childNodes; 
        var index = v.container.dom.childNodes[0].childNodes.length -1; 

        // 
        //Here is where you create the dropTarget for the new node 
        // 
        nodes[index].dropTarget = Ext.create('Ext.dd.DropTarget', nodes[index], { 
         ddGroup: 'DataViewBNode', 
         notifyDrop: function (source, e, dropData) { 
          console.log('success')        
         } 
        }); 
       } 

      } 
     }); 
... 
    },

來源

2013-03-16 02:44:12 user1304444

ext js拖放dataview確定節點落在

回答

相關問題