Creating drag and drop for grid in Extjs.

This tip shows how to create a panel that shows how rows can be easily dragged and dropped between two or more grids in Extjs-4.2

Note:- This drag and drop is helpfull when we have list of user out of these to select some of them ,or give some previlage,authentication,add as a friend etc we just do drag some user form one grid to other grid.
//These are the file required form Extjs Framework to link the code .

            
            
            
            
            
//This is the data that will shown in one grid
            var myData = [
                            { name : "Mukul" },
                            { name : "Manisha" },
                            { name : "Rahul"},
                            { name : "aslye" },
                            { name : "Hilton" },
                            { name : "Prakash" },
                            { name : "Ritu" },
                            { name : "Sonu" },
                            { name : "santosh" },
                            { name : "Roashan" }
                        ];

                        // create the data store
                        var firstGridStore = Ext.create('Ext.data.Store', {
                            model: 'DataObject',
                            data: myData
                        });


                        // Column Model shortcut array
                        var columns = [
                            {text: "User Name", sortable: true, dataIndex: 'name'},
                           
                        ];

                        // declare the source Grid which have data .
                        var firstGrid = Ext.create('Ext.grid.Panel', {
                            multiSelect: true,
                            viewConfig: {
                                plugins: {
                                    ptype: 'gridviewdragdrop',
                                    dragGroup: 'firstGridDDGroup',
                                    dropGroup: 'secondGridDDGroup'
                                },
                                listeners: {
                                    drop: function(node, data, dropRec, dropPosition) {
                                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                                        //Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
                                    }
                                }
                            },
                            store            : firstGridStore,
                            columns          : columns,
                            stripeRows       : true,
                            title            : 'All User'
                            //margins          : '0 2 0 0'
                        });

                        var secondGridStore = Ext.create('Ext.data.Store', {
                            model: 'DataObject'
                        });

                        // create the destination Grid where to put selected row from source grid to destination grid.
                        var secondGrid = Ext.create('Ext.grid.Panel', {
                            viewConfig: {
                                plugins: {
                                    ptype: 'gridviewdragdrop',    // ptype, dragGoup,dropGroup will have string that match will other grid such that two or more grid can group together.
                                    dragGroup: 'secondGridDDGroup',
                                    dropGroup: 'firstGridDDGroup'
                                },
                                listeners: {
// selection of row to be drop on which position on other grid.
                                    drop: function(node, data, dropRec, dropPosition) {
                                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                                        //Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
                                    }
                                }
                            },
                            store            : secondGridStore,
                            columns          : columns,
                            stripeRows       : true,
                            title            : 'Selected User'
                            //margins          : '0 5 0 0'
                        });
 
//Simple 'border layout' panel to house both grids .
                        var displayPanel = Ext.create('Ext.Panel', {
                            width        : 300,
                            height       : 300,
                            layout       : {
                                type: 'hbox',
                                align: 'stretch',
                                padding: 5
                            },
                            renderTo     : document.body,
                            defaults     : { flex : 1 }, //auto stretch
                            items        : [
                                firstGrid,
                                secondGrid
                            ],
                            dockedItems: {
                                xtype: 'toolbar',
                                dock: 'bottom',
                                items: ['->', // Fill
                                {
                                    text: 'Reset both grids',
                                    handler: function(){
                                        //refresh source grid
                                        firstGridStore.loadData(myData);
                    
                                        //purge destination grid
                                        secondGridStore.removeAll();
                                    }
                                }]
                            }
                        });

Explanation: We have two grids, one grid containing data and another is empty. Both the grids have been put into one panel that shows both grids as one group. With the above code we have drag and drop functionality in grid. to know the functionality read the comment that is give before each grop of code.
For implementing the code just copy the same ordered code in “script” tag, and run but have a Extjs 4.2 framework configured in code folder .