Ext.js - Grid to Form Drag and Drop

With the help of drag and drop plugin, we can drag data from one grid and drop it to form fields.
The following example shows that we can drag data from a grid and drop it to a form. Here, we have a reset button to reset data in both the form and the grid.
Example

Following is a simple example showing Drag and Drop grid to form.
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.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 data model
            Ext.define('StudentDataModel', {
               extend: 'Ext.data.Model',
               fields: [
                  {name: 'name', mapping : 'name'},
                  {name: 'age', mapping : 'age'},
                  {name: 'marks', mapping : 'marks'}
               ]
            });
            
            // Creation of grid store
            var gridStore = Ext.create('Ext.data.Store', {
               model  : 'StudentDataModel',
               data   : myData
            });
            
            // Creation of first grid
            var grid = Ext.create('Ext.grid.Panel', {
               viewConfig: {
                  plugins: {
                     ddGroup: 'GridExample',
                     ptype: 'gridviewdragdrop',
                     enableDrop: false
                  }
               },
               enableDragDrop   : true,
               stripeRows       : true,
               width            : 300,
               margins          : '0 2 0 0',
               region           : 'west',
               title            : 'Student Data Grid',
               selModel         : Ext.create('Ext.selection.RowModel',{
                  singleSelect  : true
               }),
               store            : gridStore,
               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
               }]
            });
            
            // Creation of form panel
            var formPanel = Ext.create('Ext.form.Panel', {
               region     : 'center',
               title      : 'Generic Form Panel',
               bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
               labelWidth : 100,
               width      : 300,
               margins    : '0 0 0 3',
               
               items      : [{
                  xtype : 'textfield',
                  fieldLabel : 'Student Name',
                  name       : 'name'
               },{
                  xtype : 'textfield',
                  fieldLabel : 'Age',
                  name       : 'age'
               },{
                  xtype : 'textfield',
                  fieldLabel : 'Marks',
                  name       : 'marks'
               }]
            });
            
            // Creation of display panel for showing both grid and form
            var displayPanel = Ext.create('Ext.Panel', {
               width    : 600,
               height   : 200,
               layout   : 'border',
               renderTo : 'panel',
               bodyPadding: '5',
               items    : [grid, formPanel],
               bbar    : [
               '->',
               {
                  text    : 'Reset',
                  handler : function() {
                     gridStore.loadData(myData);
                     formPanel.getForm().reset();
                  }
               }]
            });
            var formPanelDropTargetEl =  formPanel.body.dom;
            
            //Creation of tager variable for drop.
            var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', formPanelDropTargetEl, {
               ddGroup: 'GridExample',
               notifyEnter: function(ddSource, e, data) {
                  formPanel.body.stopAnimation();
                  formPanel.body.highlight();
               },
               notifyDrop  : function(ddSource, e, data) {
                  var selectedRecord = ddSource.dragData.records[0];
                  formPanel.getForm().loadRecord(selectedRecord);
                  ddSource.view.store.remove(selectedRecord);
                  return true;
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "panel" > </div>
   </body>
</html>
The above program will produce the following result −
extjs_drag_drop.htm