0

我正在使用 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

        }
    });
}
...
4

1 回答 1

0

耶！终于想通了这个。

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

在我的程序中，用户可以将项目从 DataView A 拖放到 DataView B。将项目拖放到 DataView B 后，该项目将出现在 DataView B 中。最重要的是，用户可以从 DataView A 拖放项目，然后将其放在DataView B 中的一个节点。代码需要区分被拖放到 DataView 上的项目和被拖放到 DataView 内节点上的项目。

通用说明：

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

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

很重要的是第一个ddGroup是给节点的，在afterrender事件中添加的那个是给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')                            
                        }
                    });
                }

            }
        });
...
    },
于 2013-03-16T02:44:12.270 回答