Simple Drag and Drop in ExtJS - Drop Code

Drop Code

onCompRender: function (component, eOpts) {
  component.dropZone = Ext.create("Ext.dd.DropZone",component.getEl(),{
    // Tell the zone what our target component is
    getTargetFromEvent: function(event) { 
        return component;
    },
    // When the node is dropped, add a new instance to the
    // the component via the supplied component clone
    onNodeDrop : function(target,dd,e,data){
        component.add(data.componentClone);
    },
    ddGroup: 'auGroup'
  });
}

Drop Code Explained

A new DropZone is instanciated and stored for possible later use in the component. Ext.dd.DropZone takes two parameters: the element that will host the dragzone (in our case: component.getEl()) and a config object.

The config object:

  • Overrides the getTargetFromEvent function
  • Overrides the onNodeDrop function
  • Assigns a dd group to the drop zone

The getTargetFromEvent function specifies the valid drop zone. In our case we simply return our container.

The onNodeDrop function is where the drop behavior is defined. Our previously discussed getDragData method returned an object. This object is passed as the fourth parameter of the function (named data in our example). The clone of the drag object is accessed via the aptly named variable: data.componentClone. This widget is simply added to our container which completes our successful drop.