From Learn About the Ext JavaScript Library

Being with Ext for a couple of months, searching for help and helping on forums I have realized that there is a lot of questions on the subject of Drag & Drop and that there is lack of examples. So comes this tutorial...

Contents 1 Preface 2 Attaching Drag Data 3 Calling configured functions 4 Test it

Preface

If you haven't read the first and second part of this tutorial do it now because otherwise the following text will not make sense for you. We are going to attach some data to dragged items and to call configurable functions on items drops.

Attaching Drag Data

When we drag an item there are usually some data attached to it. Let's look how could we do it. Add some (fake) data to dd creation of first two items in first container:

var dd11 = Ext.get('dd1-item1');
dd11.dd = new Ext.dd.DDProxy('dd1-item1', 'group', {
     dragData:{name:'Item 1.1',index:1},
     scope:this,
     fn:function(dd, data) {
         alert(data.toSource());
     }
});
 
var dd12 = Ext.get('dd1-item2');
dd12.dd = new Ext.dd.DDProxy('dd1-item2', 'group', {
     dragData:{name:'Item 1.2',index:2},
     scope:this,
     fn:function(dd, data) {
         alert(data.toSource());
     }
});

We've just added the third argument (config) to the dd constructor call. This argument is available in our function overrides as this.config.

One doubt: Where to look for in docs the accepted values for the config object third parameter of DDProxy constructor ?

Calling configured functions

We've put scope:this and fn:function(){...} to the config object, now make some use of it. Add some lines to our dragEnd override so that it reads:

endDrag: function() {
    var dragEl = Ext.get(this.getDragEl());
    var el = Ext.get(this.getEl());
    if(this.lastTarget) {
        Ext.get(this.lastTarget).appendChild(el);
        el.applyStyles({position:'', width:''});
    }
    else {
        el.applyStyles({position:'absolute'});
        el.setXY(dragEl.getXY());
        el.setWidth(dragEl.getWidth());
    }
    Ext.get('dd1-ct').removeClass('dd-over');
    Ext.get('dd2-ct').removeClass('dd-over');
 
    if('function' === typeof this.config.fn) {
        this.config.fn.apply(this.config.scope || window, [this, this.config.dragData]);
    }
}

Here we first test if a function to call has been passed and if yes we call the function either in passed scope or in global scope (window) if none was passed. I've chosen the arguments to the callback function because I thought that these two might be useful, however, you can pass arguments suitable for your application.

Test it

Navigate to your dd.html and try to drag and drop one of the first two items from the left container. You see, you get alert from callback function showing that it really got our data.

• Custom Drag and Drop Part 2

• Ext Programmer's API Documentation
• Ext User Forums