Ext.js中文手册
> Ext.js中文手册 > 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>

这将产生以下结果 :

Ext.js 网格到表单拖放
上一篇：