Ext.js - Grid to Grid Drag and Drop

With the help of drag and drop plugin, we can drag data from one grid and drop it to another grid and vice versa.
The following example shows how we can drag data from one grid and drop it to another. Here, we have a reset button to reset data in both the grids.
Example

Following is a simple example showing Drag and Drop between grids.
Live Demo
<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.require([
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.dd.*'
         ]);
         
         // Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });
         Ext.onReady(function() {
            // Store data
            var myData = [
               { name : "Asha", age : "16", marks : "90" },
               { name : "Vinit", age : "18", marks : "95" },
               { name : "Anand", age : "20", marks : "68" },
               { name : "Niharika", age : "21", marks : "86" },
               { name : "Manali", age : "22", marks : "57" }
            ];
            
            // Creation of first grid store
            var firstGridStore = Ext.create('Ext.data.Store', {
               model: 'StudentDataModel',
               data: myData
            });
            
            // Creation of first grid
            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';
                     }
                  }
               },
               store            : firstGridStore,
               columns          :
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',	
                  id : 'name',    
                  flex:  1,  			
                  sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }],
               stripeRows       : true,
               title            : 'First Grid',
               margins          : '0 2 0 0'
            });
            
            // Creation of second grid store
            var secondGridStore = Ext.create('Ext.data.Store', {
               model: 'StudentDataModel'
            });
            
            // Creation of second grid
            var secondGrid = Ext.create('Ext.grid.Panel', {
               viewConfig: {
                  plugins: {
                     ptype: 'gridviewdragdrop',
                     dragGroup: 'secondGridDDGroup',
                     dropGroup: 'firstGridDDGroup'
                  },
                  listeners: {
                     drop: function(node, data, dropRec, dropPosition) {
                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                     }
                  }
               },
               store            : secondGridStore,
               columns          : 
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',	
                  id : 'name',    
                  flex:  1,  			
                  sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }],
               stripeRows       : true,
               title            : 'Second Grid',
               margins          : '0 0 0 3'
            });
            
            // Creation of a panel to show both the grids.
            var displayPanel = Ext.create('Ext.Panel', {
               width        : 600,
               height       : 200,
               
               layout       : {
                  type: 'hbox',
                  align: 'stretch',
                  padding: 5
               },
               renderTo     : 'panel',
               defaults     : { flex : 1 }, 
               items        : [
                  firstGrid,
                  secondGrid
               ],
               dockedItems: {
                  xtype: 'toolbar',
                  dock: 'bottom',
                  items: ['->', 
                  {
                     text: 'Reset both grids',
                     handler: function() {
                        firstGridStore.loadData(myData);
                        secondGridStore.removeAll();
                     }
                  }]
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "panel" > </div>
   </body>
</html>
The above program will produce the following result −
extjs_drag_drop.htm