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.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>
上述程式將產生以下結果 −
extjs_drag_drop.htm
列印頁面
上一個
下一個