Extjs學習（4）：拖與放

1. 定義拖放

2. 組織拖放類

3. 下面要作的應用的效果圖：汽車分類

1. 實現「拖」

    爲了配置車輛DIVs elements可拖拽狀態，咱們須要得到一個列表並循環實例化（DD）

Ext.onReady(function() {
        // Create an object that we'll use to implement and override drag behaviors a little later

        //全部拖放類的設計都是經過重寫它的方法來實現的
        var overrides = {};

        // Configure the cars to be draggable
        //小汽車啊，利用DomQuery方法查詢小汽車容器裏全部的div號，使他們可拖拽（draggable）
        var carElements = Ext.get('cars').select('div');
        Ext.each(carElements.elements, function(el) {
            //建立一個新的DD實例，將要drap的小汽車組，這裏在drop時候要用到
            //這個實例繼承Ext.apply，這是一個方便的方式給現有的對象來添加屬性或方法
            var dd = Ext.create('Ext.dd.DD', el, 'carsDDGroup', {
                isTarget  : false
            });
            //Apply the overrides object to the newly created instance of DD
            Ext.apply(dd, overrides);
        });

        //大卡車啊
        var truckElements = Ext.get('trucks').select('div');
        Ext.each(truckElements.elements, function(el) {
            var dd = Ext.create('Ext.dd.DD', el, 'trucksDDGroup', {
                isTarget  : false
            });
            Ext.apply(dd, overrides);
        });
    });

   能夠 用眼睛看一下drag節點是怎麼變化的，

    思考：拖拽過去會被粘貼，但不能拽錯（驗證有效性），且drop位置變化狀況，CSS        

2. 修復無效的drop：重置拖動這個動做中的樣式屬性

    想使其：在鼠標移動時，drag element暫時消失，當還原時從新顯示    （不用）

    使用 Ext.Fx 來執行這個動做

    爲了實現修復，須要重寫：b4StartDrag，onInvalidDrop，endDrag方法

var overrides = {
        // Called the instance the element is dragged.
        b4StartDrag : function() {
            // Cache the drag element
            if (!this.el) {
                this.el = Ext.get(this.getEl());
            }

            //Cache the original XY Coordinates of the element, we'll use this later.
            this.originalXY = this.el.getXY();
        },
        // Called when element is dropped in a spot without a dropzone, or in a dropzone without matching a ddgroup.
        onInvalidDrop : function() {
            // Set a flag to invoke the animated repair
            this.invalidDrop = true;
        },
        // Called when the drag operation completes
        endDrag : function() {
            // Invoke the animation if the invalidDrop flag is set to true
            if (this.invalidDrop === true) {
                // Remove the drop invitation
                this.el.removeCls('dropOK');

                // Create the animation configuration object
                var animCfgObj = {
                    easing   : 'elasticOut',
                    duration : 1,
                    scope    : this,
                    callback : function() {
                        // Remove the position attribute
                        this.el.dom.style.position = '';
                    }
                };

                // Apply the repair animation
                this.el.setXY(this.originalXY[0], this.originalXY[1], animCfgObj);
                delete this.invalidDrop;
            }
        },

    實現效果：

3. 配置drop目標：

    須要實例化 DDTarget 類

// Instantiate instances of Ext.dd.DDTarget for the cars and trucks container
var carsDDTarget = Ext.create('Ext.dd.DDTarget', 'cars','carsDDGroup');
var trucksDDTarget = Ext.create('Ext.dd.DDTarget', 'trucks', 'trucksDDGroup');

// Instantiate instances of DDTarget for the rented and repair drop target elements
var rentedDDTarget = Ext.create('Ext.dd.DDTarget', 'rented', 'carsDDGroup');
var repairDDTarget = Ext.create('Ext.dd.DDTarget', 'repair', 'carsDDGroup');

// Ensure that the rented and repair DDTargets will participate in the trucksDDGroup
rentedDDTarget.addToGroup('trucksDDGroup');
repairDDTarget.addToGroup('trucksDDGroup');

    實現效果：

4. 完成drop

    使用DOM工具（確保drag參數和drop參數準確，相等），需重寫DD onDragDrop方法

//the drag elements will now will be moved from their parent element to the drop target.

var overrides = {
    ...
    // Called upon successful drop of an element on a DDTarget with the same
    onDragDrop : function(evtObj, targetElId) {
        // Wrap the drop target element with Ext.Element
        var dropEl = Ext.get(targetElId);

        // Perform the node move only if the drag element's
        // parent is not the same as the drop target
        if (this.el.dom.parentNode.id != targetElId) {

            // Move the element
            dropEl.appendChild(this.el);

            // Remove the drag invitation
            this.onDragOut(evtObj, targetElId);

            // Clear the styles
            this.el.dom.style.position ='';
            this.el.dom.style.top = '';
            this.el.dom.style.left = '';
        }
        else {
            // This was an invalid drop, initiate a repair
            this.onInvalidDrop();
        }
    },

    實現效果：

5. 添加drop請求：drag和drop的反饋

    重寫onDragEnter（）和onDragOut（）方法

var overrides = {
        ...
        // Only called when the drag element is dragged over the a drop target with the
same ddgroup
        onDragEnter : function(evtObj, targetElId) {
            // Colorize the drag target if the drag node's parent is not the same as the
drop target
            if (targetElId != this.el.dom.parentNode.id) {
                this.el.addCls('dropOK');
            }
            else {
                // Remove the invitation
                this.onDragOut();
            }
        },
        // Only called when element is dragged out of a dropzone with the same ddgroup
        onDragOut : function(evtObj, targetElId) {
            this.el.removeCls('dropOK');
        }
    };

    實現效果：

6.其餘的一些例子：使用drag和drop

• GridPanel to GridPanel

• Grid to FormPanel

• Ext.form.Field to GridPanel cell

• Use of DragZone and DropZone