關於 Ext Js DD(Drag & Drop) TreeView to Grid

2013-01-14

2128
0
Ext.js

最近寫到要將資料從Tree View中拖拉到Grid中，並呈現某些效果，

網路上已經有很多範例教學甚至分析ExtJS的DD

5 Steps to Understanding Drag and Drop with Ext JS

我將我自己的經驗整理筆記起來，

DD為 Drag & Drop的縮寫，

簡單的說，你要知道你的拖拉區域，

從哪取，放到哪。

Drag :

取的部分可以用DragSource & DragZone去實現，

但我偷懶一點利用ViewConfig&加上plugin去建立Drag，

將以下code加入View中 :
        plugins: {
            ptype: 'gridviewdragdrop',
            ddGroup: 't2div',
            enableDrop: false
        },
    },
這樣就可以實現Drag的動作。

Drop :

但是沒有給他一個Drop的地區，不管丟到哪他都會顯示不可丟。

所以我們要添加 Drop 地區的設定，

我主要是在欲Drop的View中，加入一個afterRender function ，

去處理Drop後的動作，其中主要是要去new DragTarget，

並注意Drag & Drop的ddgroup要設定成同一group，

然後利用notifyDrop 去處理之後的動作
    afterRender:function() {
        Ext.Panel.prototype.afterRender.apply(this, arguments);
        this.dropTarget = this.body;
        var target = this;
        
        var dd = new Ext.dd.DropTarget(this.dropTarget, {
            // must be same as for tree
            ddGroup:'t2div',
            // what to do when user drops a node here
            notifyDrop:function(dd, e, node) {
                              
                var tabInfo = {
                    closable: true,
                    html: '<image id="' + node.records[0].data.ID + '" src="' + node.records[0].data.Url + '" />',
                    iconCls: node.records[0].data.iconCls,
                    title: node.records[0].data.text,
                    itemId: node.records[0].data.id
                };

                target.add(tabInfo);

                return true;

            } 
        });
    }
以上應該是可以完成將Tree Node Drop到Grid，並show出img。

如有錯誤，敬請糾正，感謝。

回首頁