ext-js拖放数据视图确定在其上拖放的节点

Question

我正在使用ext-js将数据从一个数据视图拖放到另一个。我想知道丢弃事件是发生在现有节点的顶部，还是只是被丢弃在数据视图的空白处。

这是我的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
        }
    });
}
...

Answer 1

耶！终于找到了这个。

快速答案是为节点创建一个DropZone。长期的答案是如何做到这一点。

在我的程序中，用户可以将项目从DataView A拖动到DataView B。在DataView B中删除项目后，该项目将显示在DataView B.除此之外，用户还可以从DataView A拖动项目，并将其拖放到DataView B内的节点上。代码需要区分在DataView上删除的项目和在DataView内的节点中删除的项目。

通用说明：

1. 在DataViewB的onrender事件中，创建一个ddGroup为的dropTarget"DataViewB"
2. 在notifyDrop函数中，创建一个新节点
3. 同样在notifyDrop函数中，创建另一个dropTarget（这个用于节点而不是DataView），ddGroup为"DataViewBNode"
4. 在DataViewA的onRender事件中，使用ddGroup创建一个DragZone的"DataViewBNode"（！important！）
5. 在DataViewA的afterrender事件内部，将dragZone添加到"DataViewB"组

现在，您可以从DataViewA拖动并放在DataViewB的空白处添加节点，但也可以直接从DataViewB放在节点上并执行不同的操作。

非常重要的是，第一个ddGroup用于节点，而在afterrender事件中添加的ddGroup用于DataView

这是DataView 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')                            
                        }
                    });
                }
            }
        });
...
    },