Drag-Drop from grid to any div in ExtJS 4

In most of the documents of ExtJS, drag dropping between Ext components are explained. The following combinations have their own examples in the web-site:
grid-grid
grid-tree
grid-form
tree-tree
However compared with jQuery UI, there is not much detailed information about how to use drag-drop capabilities among any DOM elements and components using Ext

The most important source for this topic is the following sencha document:
http://docs.sencha.com/ext-js/4-0/#!/guide/drag_and_drop

For starters who just want to apply basic drag drop between a grid and any div element, you can follow the above steps:

1)Create a new grid. Besides of its required properties , this grid must have the following property:

viewConfig: {
    forceFit: false,
    plugins: {
       ptype: 'gridviewdragdrop',
       dragGroup: 'gridDDGroup'
    }
}

model fields: firstName,lastName
2)Add a div to your body.

< div id="droppablezone" style=" background-color: Gray;" >< / div >

The important one is its id name which we will use in third step.

3)Make your div a valid drop target:

Ext.create('Ext.dd.DropTarget', 'droppablezone', {
    ddGroup: ' gridDDGroup ',
    notifyDrop: function (ddSource, e, data) {
        document.getElementById( e.target.id ).innerHTML += data.records[0].data.firstName;
    },
    notifyEnter: function (ddSource, e, data) {
    }
});

First we create an Ext.dd.DropTarget of our 'droppablezone' id. For ddGroup property, we put the same value as grid's dragGroup property.
I put two listeners here:
notifyEnter: Whenever dragged item is in div's area, it is called. e
notifyDrop:When item is dropped in div's area, it is called. data is used to get dragged item's record. In my example I used record's model's firstName. I also used e parameter to show that you can get dropped target information via this parameter's target property.(you can just write 'droppablezone' instead of e.target.id)

You can apply similar structure to trees also.