examples/dd/dnd_grid_to_grid.js

   1 Ext.require([
   2     'Ext.grid.*',
   3     'Ext.data.*',
   4     'Ext.dd.*'
   5 ]);
   6
   7 Ext.define('DataObject', {
   8     extend: 'Ext.data.Model',
   9     fields: ['name', 'column1', 'column2']
  10 });
  11
  12 Ext.onReady(function(){
  13
  14     var myData = [
  15         { name : "Rec 0", column1 : "0", column2 : "0" },
  16         { name : "Rec 1", column1 : "1", column2 : "1" },
  17         { name : "Rec 2", column1 : "2", column2 : "2" },
  18         { name : "Rec 3", column1 : "3", column2 : "3" },
  19         { name : "Rec 4", column1 : "4", column2 : "4" },
  20         { name : "Rec 5", column1 : "5", column2 : "5" },
  21         { name : "Rec 6", column1 : "6", column2 : "6" },
  22         { name : "Rec 7", column1 : "7", column2 : "7" },
  23         { name : "Rec 8", column1 : "8", column2 : "8" },
  24         { name : "Rec 9", column1 : "9", column2 : "9" }
  25     ];
  26
  27     // create the data store
  28     var firstGridStore = Ext.create('Ext.data.Store', {
  29         model: 'DataObject',
  30         data: myData
  31     });
  32
  33
  34     // Column Model shortcut array
  35     var columns = [
  36         {text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'},
  37         {text: "column1", width: 70, sortable: true, dataIndex: 'column1'},
  38         {text: "column2", width: 70, sortable: true, dataIndex: 'column2'}
  39     ];
  40
  41     // declare the source Grid
  42     var firstGrid = Ext.create('Ext.grid.Panel', {
  43         multiSelect: true,
  44         viewConfig: {
  45             plugins: {
  46                 ptype: 'gridviewdragdrop',
  47                 dragGroup: 'firstGridDDGroup',
  48                 dropGroup: 'secondGridDDGroup'
  49             },
  50             listeners: {
  51                 drop: function(node, data, dropRec, dropPosition) {
  52                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
  53                     Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
  54                 }
  55             }
  56         },
  57         store            : firstGridStore,
  58         columns          : columns,
  59         stripeRows       : true,
  60         title            : 'First Grid',
  61         margins          : '0 2 0 0'
  62     });
  63
  64     var secondGridStore = Ext.create('Ext.data.Store', {
  65         model: 'DataObject'
  66     });
  67
  68     // create the destination Grid
  69     var secondGrid = Ext.create('Ext.grid.Panel', {
  70         viewConfig: {
  71             plugins: {
  72                 ptype: 'gridviewdragdrop',
  73                 dragGroup: 'secondGridDDGroup',
  74                 dropGroup: 'firstGridDDGroup'
  75             },
  76             listeners: {
  77                 drop: function(node, data, dropRec, dropPosition) {
  78                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
  79                     Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
  80                 }
  81             }
  82         },
  83         store            : secondGridStore,
  84         columns          : columns,
  85         stripeRows       : true,
  86         title            : 'Second Grid',
  87         margins          : '0 0 0 3'
  88     });
  89
  90     //Simple 'border layout' panel to house both grids
  91     var displayPanel = Ext.create('Ext.Panel', {
  92         width        : 650,
  93         height       : 300,
  94         layout       : {
  95             type: 'hbox',
  96             align: 'stretch',
  97             padding: 5
  98         },
  99         renderTo     : 'panel',
 100         defaults     : { flex : 1 }, //auto stretch
 101         items        : [
 102             firstGrid,
 103             secondGrid
 104         ],
 105         dockedItems: {
 106             xtype: 'toolbar',
 107             dock: 'bottom',
 108             items: ['->', // Fill
 109             {
 110                 text: 'Reset both grids',
 111                 handler: function(){
 112                     //refresh source grid
 113                     firstGridStore.loadData(myData);
 114
 115                     //purge destination grid
 116                     secondGridStore.removeAll();
 117                 }
 118             }]
 119         }
 120     });
 121 });