Ext.js - 網格到表單拖放

透過拖放外掛，我們可以從一個網格中拖動資料並將其放入表單欄位中。
下面的示例表明，我們可以從網格中拖動資料並將其放入表單。此處我們有一個重置按鈕，用於重置表單和網格中的資料。
示例

下面是一個簡單的示例，展示了從網格到表單的拖放。
<!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>
上述程式將產生以下結果 −
extjs_drag_drop.htm
列印頁面