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 イベントで、「DataViewB」の ddGroup で dropTarget を作成します。
  2. notifyDrop 関数内で、新しいノードを作成します。
  3. また、notifyDrop 関数内で、「DataViewBNode」の ddGroup を使用して別の dropTarget (これは DataView ではなくノード用) を作成します。
  4. DataViewA の onRender イベント内で、"DataViewBNode" の ddGroup を使用して DragZone を作成します (!重要!)
  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 に答える